Question

我已经导入了PostListComponent app.module.ts，但是当我在路线中使用以下行时

  { path: '', component: PostListComponent }

我收到错误

Error: Component PostListComponent is not part of any NgModule or the module has not been imported into your module.

如果我删除该行，则会加载页面。我导入了PostListComponent，所以似乎无法弄清楚引发该错误的原因。

app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PostCreateComponent } from './posts/post-create/post-create.component';
import { PostListComponent } from 'angular-03-finished/angular-03-finished/src/app/posts/post-list/post-list.component';

const routes: Routes = [
  { path: '', component: PostListComponent },
  { path: 'create', component: PostCreateComponent }
];

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

export class AppRoutingModule {}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import {HttpClientModule} from "@angular/common/http";
import {
  MatInputModule,
  MatCardModule,
  MatButtonModule,
  MatToolbarModule,
  MatExpansionModule
} from "@angular/material";

import { AppComponent } from "./app.component";
import { PostCreateComponent } from "./posts/post-create/post-create.component";
import { HeaderComponent } from "./header/header.component";
import { PostListComponent } from "./posts/post-list/post-list.component";
import { AppRoutingModule } from "./app-routing.module";

@NgModule({
  declarations: [
    AppComponent,
    PostListComponent,
    PostCreateComponent,
    HeaderComponent,
    PostListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
    MatToolbarModule,
    MatExpansionModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

在您的app-routing.module.ts

内部

更改此导入：

import { PostListComponent } from 'angular-03-finished/angular-03-finished/src/app/posts/post-list/post-list.component';

要导入：

import { PostListComponent } from "./posts/post-list/post-list.component";

Angular-路由路径抛出控制台错误

1 个答案: