Problema de módulos múltiples de Angular4

11

Tengo una aplicación que tiene múltiples vistas como navegación y páginas. Así que agregué un módulo de diseño e importé ese módulo al módulo principal y ahora trato de usar el componente de navegación de los módulos de diseño en el componente de la aplicación. Así que esto debería mostrar el contenido de navigation.html pero está en blanco. Tampoco da ningún error. No estoy seguro de lo que estoy haciendo mal. Muy abajo está mi código que le dará la imagen adecuada: aquí está 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 { }

y aquí está LayoutsModule

   

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


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

      ],
      imports: [

      ],
      providers: [

      ]
    })
    export class LayoutsModule {}

y mi app.component.html

 

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

0
6

Debe exportar NavigationComponentdesde su LayoutsModulepara que se pueda utilizar LayoutsModule. Básicamente, lo que desee exponer para que lo use otro módulo / sistema dentro de Angular, debe colocar esas component/ directive/ pipedentro de las exportsopciones de metadatos NgModuleo, más bien, podría haberse cargado a través de un routesegmento desde Angular Router.

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

No estoy seguro de por qué no recibió un error. Debería haber arrojado un error.

2

Debe exportar los componentes en su LayoutModuleque desea que estén disponibles para otros módulos:

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


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

  ],
  providers: [

  ]
})
export class LayoutsModule {}

Más información sobre compartir módulos: https://angular.io/guide/sharing-ngmodules