延迟加载错误组件不是ngmodule

Question

错误

  

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

APP模块

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

APP路由模块

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>

Answer 1

问题

您已经在两个模块PrincipalTemplateComponent和AppModule中声明了相同的组件AuthModule。

修复

您只需从PrincipalTemplateComponent中删除AppModule

  

注意：如果在其他模块（PrincipalTemplateComponent除外）中使用AuthModule，则应在“共享模块”中声明。

shared.module.ts

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

Answer 2

您需要的全部信息都在错误消息中，包括解决方案。基本上，您只能将一个组件声明为单个模块的一部分。

在这种情况下，您应该创建一个模块，声明该共享组件，然后在其他2个模块中导入此共享“模块”，这样您就可以在这2个模块中使用该组件。