Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular4 multiple modules issue

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>

like image 984
Olga Shylina Avatar asked Feb 20 '18 20:02

Olga Shylina


2 Answers

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.

like image 53
Pankaj Parkar Avatar answered Oct 04 '22 01:10

Pankaj Parkar


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

like image 21
Brandon Avatar answered Oct 04 '22 00:10

Brandon