组件 'ToolBarComponent' 被多个 NgModule 声明

Question

我正在尝试使用 netlify 部署应用程序，但部署失败并出现以下错误：

 Error: src/app/components/toolbar/toolbar.component.ts:12:14 - error NG6007: The Component 'ToolBarComponent' is declared by more than one NgModule.

问题是我正在使用声明语句在其他页面中使用它：

 18   declarations: [DestinyPage, ToolBarComponent, ModalDestinyPage],

我尝试在导入语句中使用它，但失败并出现错误：

ToolBarComponent does not have 'ɵmod' property

我也尝试使用导出语句并得到同样的错误，我在堆栈中看到的另一个解决方案是在使用工具栏的文件中使用模块而不是组件，但工具栏没有'有一个页面，所以我认为它不适用。

有人可以帮助我吗？

git link: https://github.com/devpupo/baps-app

Answer 1

如果您运行以下命令，您将在本地收到错误：ng build --prod

由于您在多个模块中使用工具栏组件，我建议您将组件移动到 SharedModule 中，而不是将组件导入多个模块中，您需要导入该模块。

import { NgModule } from '@angular/core';
import { ToolBarComponent} from '../components/toolbar/toolbar.component';
@NgModule({
declarations: [
  ToolBarComponent,
],
exports: [
  ToolBarComponent,
]
})
export class SharedModule { }

然后您需要将 SharedModule 导入到您要使用的其他模块中。

import { SharedModule} from '../example.module';
@NgModule({
 imports: [
   SharedModule
 ]
   ...
  })

我可以看到工具栏组件在所有其他组件中被调用，如果您尝试为页面（无论路由或组件将显示的组件）执行 header/footer，请考虑也使用路由器插座 - <router-outlet></router-outlet> 您可以在其中调用父组件中的工具栏组件，并且只调用一次而不会影响其他组件 modules/component.

共享模块： https://angular.io/guide/sharing-ngmodules 路由器插座： https://angular.io/api/router/RouterOutlet

组件 'ToolBarComponent' 被多个 NgModule 声明

The Component 'ToolBarComponent' is declared by more than one NgModule

deployment

typescript

ionic-framework

angular