Modularizing Angular 5 App

Question

Ich versuche eine Angular 5 App in Module zu teilen. Der Arbeitscode ist dies (der entsprechende Code):

app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FooterComponent } from './path/to/component'; 

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

app.component.html:

<app-footer></app-footer> 

Jetzt möchte ich Verwenden Sie die Fußzeile, um es in ein Modul zu ändern (nur die Änderungen):

app.module.ts:

import { FooterModule } from './path/to/module'; 

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

footer.module.ts:

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule} from '@angular/router'; 
import { FooterComponent } from './footer.component'; 

@NgModule({ 
    declarations: [FooterComponent], 
    imports: [ 
    CommonModule, 
    RouterModule.forChild([ 
     { path: 'footer', component: FooterComponent } 
    ]) 
    ] 
}) 

export class FooterModule { } 

Dieser Code funktioniert nicht und ich weiß nicht, was falsch ist. Können Sie mir mit einem Hinweis helfen? Vielen Dank im Voraus.

Answer 1

Ein Problem könnte sein, dass Sie versuchen, die Fußzeilenkomponente in Ihrer App-Komponente zu verwenden, die sich nicht mehr im selben Modul befindet. Sobald Sie Zeug in Untermodule auslagern, sind die dort deklarierten Komponenten auch nur in diesem Modulumfang zugänglich. Wenn Sie eine Komponente außerhalb davon verwenden möchten, müssen Sie exportieren es.

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule} from '@angular/router'; 
import { FooterComponent } from './footer.component'; 

@NgModule({ 
    declarations: [FooterComponent], 
    imports: [ 
    CommonModule, 
    RouterModule.forChild([ 
     { path: 'footer', component: FooterComponent } 
    ]) 
    ], 
    exports: [FooterComponent] 
}) 

export class FooterModule { } 

Answer 2

Sie sollten Ihr Modul auf den app.ts importieren nicht erklären es

app.module.ts:

import { FooterModule } from './path/to/module'; 

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

Und Export FooterComponent auf dem footer.module footer.module. ts:

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule} from '@angular/router'; 
import { FooterComponent } from './footer.component'; 

@NgModule({ 
    declarations: [FooterComponent], 
    imports: [ 
    CommonModule, 
    RouterModule.forChild([ 
     { path: 'footer', component: FooterComponent } 
    ]) 
    ], 
    exports: [FooterComponent] 
}) 

export class FooterModule { } 

Hoffnung, es hilft