угловой пользовательский компонент и угловая маршрутизация не работают

Question

иерархия файлов:

Я могу получить доступ / проверить, но он возвращает пустую страницу.

test.component.html

<h1>Hello its working now </h1>
<p>test works!</p>

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { TestComponent } from './test/test.component'; 

const routes: Routes = [
  { 
   path: 'test', 
   component: TestComponent 
  },


]; 

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents =[HomeComponent, TestComponent]

Я новичок в изучении углов

Answer 1

В вашем app-routing.module.ts все выглядит нормально. Теперь вам нужно импортировать этот модуль в ваш app.module.ts

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test/test.component';

const routes: Routes = [
  { path: 'test', component: TestComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Итакв app.module.ts необходимо импортировать AppRoutingModule . В массиве imports: [] просто добавьте AppRoutingModule

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, TestComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Теперь вы можете использовать <router-outlet>. Поэтому, когда пользователь перейдет к пункту «/ test» ниже, ваш TestComponent будет отображаться.

Примечание : если вы используете grid-layout , потребуется 1 столбец / строка. Он будет отображаться с вашим TestComponent.

app.component.html

<h1> Working example </h1>
<a [routerLink]="['/test']" routerLinkActive="active"> Test </a>
<router-outlet></router-outlet>