时间戳

首页 > 解决方案 > 延迟加载错误组件不是 ngmodule

javascript - 延迟加载错误组件不是 ngmodule

问题描述

错误

错误错误：未捕获（承诺）：错误：类型 PrincipalTemplateComponent 是 2 个模块声明的一部分：AppModule 和 AuthModule！请考虑将 PrincipalTemplateComponent 移至导入 AppModule 和 AuthModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 PrincipalTemplateComponent，然后在 AppModule 和 AuthModule 中导入该 NgModule。错误：类型 PrincipalTemplateComponent 是 2 个模块声明的一部分：AppModule 和 AuthModule！请考虑将 PrincipalTemplateComponent 移至导入 AppModule 和 AuthModule 的更高模块。您还可以创建一个新的 NgModule 导出并包含 PrincipalTemplateComponent 然后将该 NgModule 导入 AppModule 和 AuthModule

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './components/home/home.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { PrincipalTemplateComponent } from './layouts/principal-template/principal-template.component';
import { NavComponent } from './layouts/nav/nav.component';
import { FooterComponent } from './layouts/footer/footer.component';

@NgModule({
  declarations: [
  AppComponent,
  HomeComponent,
  NotFoundComponent,
  PrincipalTemplateComponent,
  NavComponent,
  FooterComponent
 ],
imports: [
  BrowserModule,
  AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

授权模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { SignInComponent } from './sign-in/sign-in.component';
import { LogInComponent } from './log-in/log-in.component';
import { FormComponent } from './form/form.component';
import { PrincipalTemplateComponent } from 'src/app/layouts/principal-template/principal-template.component';
import { FooterComponent } from 'src/app/layouts/footer/footer.component';
import { NavComponent } from 'src/app/layouts/nav/nav.component';

const routes: Routes = [
  { path: 'sign-in', component: SignInComponent },
  { path: 'log-in', component: LogInComponent },
];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  declarations: [
    SignInComponent,
    LogInComponent,
    FormComponent,
    PrincipalTemplateComponent,
    NavComponent,
    FooterComponent
  ]
})
export class AuthModule {}

应用路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { NotFoundComponent } from './components/not-found/not-found.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'auth', loadChildren: './components/auth/auth.module#AuthModule' },
  { path: 'ad', loadChildren: './components/ad/ad.module#AdModule' },
  { path: '**', component: NotFoundComponent }
];

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

主页组件 && 登录组件

<ng-template #template>
  hola
</ng-template>

<app-principal-template></app-principal-template>

<ng-template #template>
  hola 2
</ng-template>

<app-principal-template></app-principal-template>

标签： javascriptangulartypescript

解决方案

问题

PrincipalTemplateComponent您在两个模块中声明了相同的组件，AppModule并且AuthModule.

使固定

你只需PrincipalTemplateComponent从AppModule

注意：如果您PrincipalTemplateComponent在其他模块（不包括AuthModule）中使用，那么您应该在共享模块中声明。

shared.module.ts

@NgModule({
  declarations: [
    PrincipalTemplateComponent
  ],
  exports:[PrincipalTemplateComponent]
})
export class SharedModule {}

推荐阅读