Angular4 multiple modules issue

Question

I have an app which has multiple views like navigation and pages. So I added a layout module and imported that module to the main module & now trying to use layout modules navigation component in app component. So this should show navigation.html content but its coming as blank. It's not giving any error as well. Not sure what I am doing wrong. Well below is my code that will give the proper picture: here is app.model.ts

    

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { LayoutsModule } from './layouts/index';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        LayoutsModule,
        AppRoutingModule
      ],   
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

and here is LayoutsModule

   

    import { NgModule } from '@angular/core';
    import { NavigationComponent } from './navigation/navigation.component';


    @NgModule({
      declarations: [
        NavigationComponent
      ],
      exports: [

      ],
      imports: [

      ],
      providers: [

      ]
    })
    export class LayoutsModule {}

and my app.component.html

 

    <app-navigation></app-navigation>
    <router-outlet></router-outlet>

Spiffy

Answer 1

You should export NavigationComponent from your LayoutsModule so that it can usable out LayoutsModule. Basically whatever you want to exposed to be used by another module/ system inside Angular, you have to put those component/directive/pipe inside exports metadata options of NgModule or rather it could have been loaded via route segment from Angular Router.

@NgModule({
  declarations: [
    NavigationComponent
  ],
  exports: [
      NavigationComponent
  ],
  imports: [],
  providers: []
})
export class LayoutsModule {}

Not sure why you didn't get an error. It should've thrown an error.

Robbert

Answer 2

You need to export the component(s) in your LayoutModule that you want to make available to other modules:

import { NgModule } from '@angular/core';
import { NavigationComponent } from './navigation/navigation.component';


@NgModule({
  declarations: [
    NavigationComponent,
  ],
  exports: [
    NavigationComponent,
  ],
  imports: [

  ],
  providers: [

  ]
})
export class LayoutsModule {}

More information on sharing modules: https://angular.io/guide/sharing-ngmodules

Surround