Using component from another module in Angular 4

Question

I have RoomsComponent in the AppModule, its route is /rooms. Also i have a lazy-loaded module CompaniesModule with component CompaniesComponent with the route /companies.

I'm trying to build a route like /companies/{company_id}/rooms/ when RoomsComponent is reused from AppModule.

I can't do it a long RoomsComponent is not declared in the CompaniesModule, but this throws me an error, because a component cannot be declared in multiple modules.

See stackoverflow.com/questions/39601784/…

yurzui
– yurzui

2017-09-23 06:53:13 +00:00
Commented Sep 23, 2017 at 6:53 — yurzui
– yurzui, Commented Sep 23, 2017 at 6:53

DeborahK · Accepted Answer · 2017-07-04 08:13:33Z

47

Declare the RoomsComponent in a Shared module and then import that shared module into the modules that need it. Here is an example of one of my Shared Modules:

import { NgModule }  from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { StarComponent } from './star.component';

@NgModule({
  imports: [ CommonModule],
  exports : [
    CommonModule,
    FormsModule,
    StarComponent
  ],
  declarations: [ StarComponent ],
})
export class SharedModule { }

Notice that my StarComponent is declared AND exported here. It can then be used in any component that is declared in a module that imports this shared module.

answered Jul 4, 2017 at 8:13

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

sandum Over a year ago

Ok, but how to use that component in another module if we don't declare it?

DeborahK Over a year ago

If it's declared in a module that exports it ... and we import that module ... that's all we need. See this video for more information on modules : youtube.com/watch?v=ntJ-P-Cvo7o&t=2s

DeborahK Over a year ago

Or the Angular docs here: angular.io/guide/ngmodule#shared-modules

DeborahK Over a year ago

I also have a sample app here that demonstrates shared modules : github.com/DeborahK/Angular2-GettingStarted

Gaspar Over a year ago

How you do it if Star is another big component, and you don't wanna put it in SharedModule because you use LazyLoad?

|

Collectives™ on Stack Overflow

Using component from another module in Angular 4

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related