代码之家  ›  专栏  ›  技术社区  ›  sebaLinares

组件pautascomponent不是任何NGmodule或模块的一部分:当实际存在时[角度7]

  •  1
  • sebaLinares  · 技术社区  · 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.M.模块

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

    应用程序路由模块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 { }
    

    功能.模块.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已声明

    功能.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 我没有得到任何错误,并且Estudiantes.component.ts被完美地呈现出来(这是非常奇怪的行为)。

    当我 [routerLink]="['pautas']" 或从sidebar.component中的[routerlink]=“['estudiantes']”。所以他们基本上是双胞胎,但一个不起作用。

    1 回复  |  直到 7 年前
        1
  •  2
  •   Danil Gudz    7 年前

    路径上有两个点。删除一个。功能路由模块中组件的路径不正确

    import { PautasComponent } from '../components/pautas/pautas.component';
    
    推荐文章