Friday, May 17, 2019

the "is part of the declarations of 2 modules" error

Looks like so...

Type JumbotronComponent in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/components/jumbotron.component.ts is part of the declarations of 2 modules: BusinessUnitRecordsModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/business-unit-records.module.ts and UploadModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/upload.module.ts! Please consider moving JumbotronComponent in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/components/jumbotron.component.ts to a higher module that imports BusinessUnitRecordsModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/business-unit-records.module.ts and UploadModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/upload.module.ts. You can also create a new NgModule that exports and includes JumbotronComponent in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/components/jumbotron.component.ts then import that NgModule in BusinessUnitRecordsModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/business-unit-records.module.ts and UploadModule in E:/Agents/Angular-1/_work/30/s/src/Trifecta/src/app/modules/upload.module.ts.

 
 

You cannot have a component referenced in two lazy-loaded modules. When I was working at Ceremity it seemed like the solution was to put the thing (component) that has to work both places (modules) in the common outermost God module, but I could not get that to work today and the Ceremity days were of Angular 4 and I am working with Angular 7 now. This has a better fix. You have to make your own module for the component that will straddle two other modules like so:

import { NgModule } from '@angular/core';
import { JumbotronComponent } from '../components/jumbotron.component';
import { CommonModule} from '@angular/common';
@NgModule({
      declarations: [
         JumbotronComponent
      ],
      imports: [
         CommonModule
      ],
      providers: [],
      exports: [JumbotronComponent]
      })
   export class JumbotronModule { }

 
 

Note the exports metadata property above. I want you to see that above everything else. Alright, in the modules that actually loop this module in add the new module to the imports metadata property. Remove the direct reference to the component from the declarations metadata property of these modules.

No comments:

Post a Comment