Angular懒加载组件异常：引入NavBarComponent时出现模板解析错误

这个问题我之前做懒加载模块时也碰到过！本质是Angular的懒加载模块和根模块是完全隔离的，根模块里注册的组件不会自动被懒加载模块识别到，给你几个靠谱的解决办法：

方案1：导入Navbar组件所在的共享模块（推荐） #

如果你的NavBarComponent已经属于一个共享模块（比如SharedModule或者专门的NavbarModule），直接在懒加载的产品模块中导入这个模块即可：

// product.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductComponent } from './product.component';
// 导入包含NavBarComponent的模块
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [ProductComponent],
  imports: [
    CommonModule,
    SharedModule // 加入这个模块
  ]
})
export class ProductModule { }

如果还没有共享模块，建议创建一个：把NavBarComponent的声明和导出都放到SharedModule里，这样所有需要用导航栏的模块都能直接导入共享模块，复用组件。

方案2：直接在产品模块声明NavBarComponent（不推荐） #

⚠️ 注意：Angular不允许同一个组件在多个模块中声明！如果你的NavBarComponent已经在根模块（比如AppModule）里声明过了，这种方法会报错。只有当NavBarComponent还没在任何模块声明时，才能在产品模块里声明它：

// product.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductComponent } from './product.component';
import { NavBarComponent } from '../navbar/navbar.component';

@NgModule({
  declarations: [
    ProductComponent,
    NavBarComponent // 直接声明
  ],
  imports: [CommonModule]
})
export class ProductModule { }

这种方法会导致组件无法在其他模块复用，所以不推荐。

方案3：使用CUSTOM_ELEMENTS_SCHEMA（临时应急，不推荐） #

错误提示里提到的CUSTOM_ELEMENTS_SCHEMA只能临时屏蔽错误，但Angular不会把app-navbar当成Angular组件处理，组件的功能会完全失效，只适合你确实在使用Web Component的场景：

// product.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductComponent } from './product.component';

@NgModule({
  declarations: [ProductComponent],
  imports: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 添加这个
})
export class ProductModule { }

强烈不推荐用这个解决Angular组件的问题，只是临时救急的办法。

总结一下：最规范的做法是用共享模块统一管理可复用组件，然后在懒加载模块中导入共享模块，这样既能解决错误，又能保证组件的复用性。

内容的提问来源于stack exchange，提问作者koque