By Sean


2018-05-16 15:02:41 8 Comments

I am using a component for routing in 2 separate modules. Angular throws an error about 2 declarations. How can I make this shared?

Typical guides for shared components show how to share but not use in the module for routing.

I want to use the ProductComponent in 2 separate modules but the component is used for routing so typical shared component strategy doesn't work.

Routing :

EXAMPLE1.module.ts

`

...
import { ProductComponent } from '../../product/product.component';

export const routes:Routes = [
    { path: 'products/:product-slug',  component: ProductComponent },
    other example 1 routes
];

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [
        ProductComponent,
        other example 1 components
    ],
    providers: [
        ...
    ]
})
export class EXAMPLE1 { }

`

EXAMPLE2.module.ts

`

...
import { ProductComponent } from '../../product/product.component';

export const routes:Routes = [
    { path: 'different/:product-slug',  component: ProductComponent },
    other example 2 routes
];

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [
        ProductComponent,
        other example 2 components
    ],
    providers: [
        ...
    ]
})
export class EXAMPLE1 { }

`

The product component is shared amongst these 2 modules

Any ideas?

4 comments

@Fateh Mohamed 2018-05-16 15:20:34

you can export that component in your shared.module.ts like this

declarations: [ ProductComponent,
               ...
              ]
exports: [ ProductComponent],

after that you can import your shared module in the 2 modules

imports:[ 
        SharedModule,
      ]

so in your app.routing.ts you can import it and you dont need to declare it in the modules anymore, import your component in your both routing files, something like this

import { ProductComponent } from '../shared/product.component.ts'

@Sean 2018-05-16 15:26:07

but if ProductComponent is used in routing it throws an error when using sharedmodule

@Fateh Mohamed 2018-05-16 15:29:33

you need to import your component in your routing files from shared folder , import { ProductComponent } from '../shared/product.component.ts'

@Sean 2018-05-16 15:36:29

thanks so that worked, adding import for shared to handle declaration and also importing the component for routing did it. I was trying to only do one or the other not both at the same time

@Sean 2018-05-16 15:35:39

Thanks to Fateh Mohamed I got it working

...
import { SharedModule } from '../../shared/shared.module'; <-- for declerations
import { ProductComponent } from '../../product/product.component'; <-- for routing

export const routes:Routes = [
    { path: 'products/:product-slug',  component: ProductComponent },
    other example 1 routes
];

@NgModule({
    imports: [
        CommonModule,
        SharedModule <----- add shared module
        ...
    ],
    declarations: [
        other example 1 components <-- remove declaration of component
    ],
    providers: [
        ...
    ]
})
export class EXAMPLE1 { }

@Samy Sammour 2018-05-17 08:43:46

If the answer from Fateh Mohamed works for you, then please mark it as the correct answer. Thank you!

@J. Pichardo 2018-05-16 15:22:52

For that you would do a shared module, something like

@NgModule({
      declarations: [ ProductComponent ],
      exports:[ ProductsComponent ]
 })
 export class SharedProductModule{}

And then import that module in both modules

@NgModule({
     imports: [ SharedProductModule ]
 })
 exports class ExampleModule {}

@Sean 2018-05-16 15:25:08

so i tried that but it still gives an error saying 'cannot find ProductComponent' for the routing. Shared works if its not used in routing

@Samy Sammour 2018-05-16 15:22:17

you cannot declare one component in two module.

You either declare it in one module and then export it and use it in the other module. or you create a new shared module and will be shared between both.

@NgModule({
    declarations: [
        ProductComponent
    ],
    exports: [ProductComponent]
})
export class EXAMPLE1 { }

@NgModule({
    imports: [
        EXAMPLE1 
    ]
})
export class EXAMPLE2 { }

and now you can use the first component, with no problem I guess!

@Sean 2018-05-16 15:26:49

I know this, but using a sharedmodule still leaves the ProductComponent undeclared for routing in both modules...

@Samy Sammour 2018-05-17 08:42:49

Now I understand what you want. In that case, you need to use Lazy loading. This is a good article about how to use it: medium.com/@kouipheng.lee/… This will allow you to add routing from other modules to the main module.

Related Questions

Sponsored Content

4 Answered Questions

[SOLVED] What's the difference between an Angular component and module

1 Answered Questions

0 Answered Questions

Angular 5 sharing components between lazy loaded modules broken the routing

1 Answered Questions

Lazy Load to route other than empty route in Angular 2

0 Answered Questions

angular 5 paypal integration

1 Answered Questions

[SOLVED] Reexporting the CommonModule is required when we import BrowserModule at app start?

  • 2017-07-20 19:18:22
  • user3205479
  • 265 View
  • 0 Score
  • 1 Answer
  • Tags:   angular

1 Answered Questions

[SOLVED] Angular 2 shared component error

0 Answered Questions

Importing Angular components to a module

1 Answered Questions

[SOLVED] Angular 2: Use component from Module in Routing

Sponsored Content