首先,检查一下是否已将组件添加到NgModule中的imports或declarations中。 其次,可能是因为路由路径与组件的路径不匹配造成的。确保路由路径与组件的路径匹配。 还可能是因为组件的选择器与HTML中的选择器不匹配。确保它们相匹配。 最后,在angular.json文件中添加该组件的路径。 示例代码: 在app.module.ts文件中:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { ContactComponent } from './contact.component';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'contact', component: ContactComponent }
];
@NgModule({
declarations: [
AppComponent,
HomeComponent,
ContactComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在app.component.html文件中:
在home.component.ts文件中:
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
template: 'Home
'
})
export class HomeComponent {}
在contact.component.ts文件中:
import { Component } from '@angular/core';
@Component({
selector: 'app-contact',
template: 'Contact
'
})
export class ContactComponent {}