组件 PautasComponent 不是任何 NgModule 或模块的一部分:实际存在时 [Angular 7]
Component PautasComponent is not part of any NgModule or the module: When actually exists [Angular 7]
我收到这个错误
ERROR Error: Uncaught (in promise): Error: Component PautasComponent is not part of any NgModule
or the module has not been imported into your module.
Error: Component PautasComponent is not part of any NgModule or the module has not been imported into your module.
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate
问题是我昨天遇到了同样的问题,所以今天我创建了一个新模块,同样的事情发生了。
文件夹结构:
app-routing.ts/
app.component.ts
app.module.ts
|--features/
|--features-routing.module.ts
|--features.module.ts
|--features.components.ts
|--pautas/
|--pautas.component.ts
|--estudiantes/
|-- estudiantes.component.ts
|--shared/
|--components/
|--navbar/
|-- navbar.component.ts
|--sidebar/
|-- sidebar.component.ts
在 app.component.ts 中只有一个 <router-outlet></router-outlet>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
// Feature routing modules
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
RegisterComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ReactiveFormsModule,
CoreModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
应用-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
// Auth Module
{
path:'login',
loadChildren: './auth/auth.module#AuthModule'
},
{
path: 'features',
loadChildren: './features/features.module#FeaturesModule'
},
{
path:'',
redirectTo: '/login',
pathMatch: 'full'
}
]
@NgModule({
imports: [RouterModule.forRoot(appRoutes, { enableTracing: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }
features.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeaturesRoutingModule } from './features-routing.module';
import { FeaturesComponent } from './features.component';
import { ComponentsModule } from '../shared/components/components.module';
import { PautasComponent } from './components/pautas/pautas.component';
import { EstudiantesComponent } from './components/estudiantes/estudiantes.component';
@NgModule({
declarations: [FeaturesComponent, PautasComponent, EstudiantesComponent],
imports: [
CommonModule,
ComponentsModule, // This is from the shared folder
FeaturesRoutingModule
]
})
export class FeaturesModule { }
在这里你可以看到pautas.component被声明
features.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeaturesComponent } from './features.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { PautasComponent } from '../components/pautas/pautas.component';
import { EstudiantesComponent } from './components/estudiantes/estudiantes.component';
const routes: Routes = [
{path: '', component: FeaturesComponent, children: [
{ path: 'dashboard', component: DashboardComponent},
{ path: 'estudiantes', component: EstudiantesComponent},
{ path: 'pautas', component: PautasComponent },
{ path: '', redirectTo: 'dashboard'}
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeaturesRoutingModule { }
我认为创建新模块可以解决问题,但事实并非如此。并且 仅在 pautas.component 中发生,因为当我注释掉 features-routing.module.ts
中的 pautas 路由时,我没有收到任何错误并且 estudiantes.component.ts 完美呈现(这真是奇怪的行为)。
当我 [routerLink]="['pautas']"
或 [routerLink]="['estudiantes']" 来自 sidebar.component 时都呈现。所以他们基本上是双胞胎,但一个不行。
路径中有两个点。删除一个。您的功能路由模块中组件的路径不正确
import { PautasComponent } from '../components/pautas/pautas.component';
我收到这个错误
ERROR Error: Uncaught (in promise): Error: Component PautasComponent is not part of any NgModule
or the module has not been imported into your module.
Error: Component PautasComponent is not part of any NgModule or the module has not been imported into your module.
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate
问题是我昨天遇到了同样的问题,所以今天我创建了一个新模块,同样的事情发生了。
文件夹结构:
app-routing.ts/
app.component.ts
app.module.ts
|--features/
|--features-routing.module.ts
|--features.module.ts
|--features.components.ts
|--pautas/
|--pautas.component.ts
|--estudiantes/
|-- estudiantes.component.ts
|--shared/
|--components/
|--navbar/
|-- navbar.component.ts
|--sidebar/
|-- sidebar.component.ts
在 app.component.ts 中只有一个 <router-outlet></router-outlet>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
// Feature routing modules
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
RegisterComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ReactiveFormsModule,
CoreModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
应用-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
// Auth Module
{
path:'login',
loadChildren: './auth/auth.module#AuthModule'
},
{
path: 'features',
loadChildren: './features/features.module#FeaturesModule'
},
{
path:'',
redirectTo: '/login',
pathMatch: 'full'
}
]
@NgModule({
imports: [RouterModule.forRoot(appRoutes, { enableTracing: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }
features.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeaturesRoutingModule } from './features-routing.module';
import { FeaturesComponent } from './features.component';
import { ComponentsModule } from '../shared/components/components.module';
import { PautasComponent } from './components/pautas/pautas.component';
import { EstudiantesComponent } from './components/estudiantes/estudiantes.component';
@NgModule({
declarations: [FeaturesComponent, PautasComponent, EstudiantesComponent],
imports: [
CommonModule,
ComponentsModule, // This is from the shared folder
FeaturesRoutingModule
]
})
export class FeaturesModule { }
在这里你可以看到pautas.component被声明
features.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeaturesComponent } from './features.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { PautasComponent } from '../components/pautas/pautas.component';
import { EstudiantesComponent } from './components/estudiantes/estudiantes.component';
const routes: Routes = [
{path: '', component: FeaturesComponent, children: [
{ path: 'dashboard', component: DashboardComponent},
{ path: 'estudiantes', component: EstudiantesComponent},
{ path: 'pautas', component: PautasComponent },
{ path: '', redirectTo: 'dashboard'}
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeaturesRoutingModule { }
我认为创建新模块可以解决问题,但事实并非如此。并且 仅在 pautas.component 中发生,因为当我注释掉 features-routing.module.ts
中的 pautas 路由时,我没有收到任何错误并且 estudiantes.component.ts 完美呈现(这真是奇怪的行为)。
当我 [routerLink]="['pautas']"
或 [routerLink]="['estudiantes']" 来自 sidebar.component 时都呈现。所以他们基本上是双胞胎,但一个不行。
路径中有两个点。删除一个。您的功能路由模块中组件的路径不正确
import { PautasComponent } from '../components/pautas/pautas.component';