Netlify部署Angular项目报错ToolBarComponent被多个NgModule声明怎么解决

NG6007报错的核心原因是ToolBarComponent被添加到了超过一个NgModule的declarations配置数组中，Angular要求每个组件/指令/管道只能被唯一的一个NgModule声明。 #

具体解决步骤 #

• 第一步：定位所有重复声明的位置
  全局搜索项目中所有的NgModule装饰器配置，找到所有在declarations数组中引入了ToolBarComponent的模块，仅保留1处声明，删除其余所有模块中declarations里的ToolBarComponent条目。
• 第二步：配置组件的跨模块调用权限
  找到你保留的声明ToolBarComponent的那个NgModule，把ToolBarComponent添加到该模块的exports数组中，示例代码如下：

@NgModule({
  declarations: [ToolBarComponent],
  // 导出组件，允许其他导入该模块的地方使用Toolbar
  exports: [ToolBarComponent]
})
// 这里替换为你实际保留声明的模块名即可，不需要单独新建页面
export class YourExistingModule { }

• 第三步：在需要使用工具栏的模块中引入对应的NgModule
  所有需要用到ToolBarComponent的页面模块，不需要再声明组件，只需要在自己的imports数组中引入上一步导出了Toolbar的那个模块即可，以你的Destiny页模块为例：

@NgModule({
  // 删除declarations里的ToolBarComponent
  declarations: [DestinyPage, ModalDestinyPage],
  imports: [
    CommonModule,
    // 新增导入声明了Toolbar的模块
    YourExistingModule
  ]
})
export class DestinyPageModule {}

之前尝试失败的原因说明 #

直接把ToolBarComponent放到其他模块的imports数组报错，是因为Angular的imports数组仅接受NgModule类，不接受组件类，ɵmod是Angular编译NgModule时才会生成的属性，组件本身没有这个属性所以会报错。
认为工具栏没有单独页面就不能对应模块的理解有误，Angular的模块不需要绑定对应页面，仅用来封装可复用的组件、指令、管道即可，是官方推荐的跨模块复用公共组件的标准方案。

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