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.

Answer 1

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.