繁体   English   中英

组件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 { }

APP-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呈现完美(这确实是奇怪的行为)。

当我从sidebar.component中选择[routerLink]="['pautas']"或[routerLink] =“ ['estudiantes']”时,两者都呈现。 因此,他们基本上是双胞胎,但其中之一根本不起作用。

路径中有两个点。 删除一个。 要素路径模块中的组件路径不正确

import { PautasComponent } from '../components/pautas/pautas.component';

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM