Modularizing Angular 5 App

Question

각도 5 앱을 모듈로 분할하려고합니다.

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> 

지금 내가 원하는 실무 코드는이 (관련 코드)입니다 꼬리말을 사용하여 모듈로 변경하십시오 (변경 사항 만) :

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 { } 

이 코드는 작동하지 않고 내가 잘못이 무엇인지 모른다. 힌트를 가지고 도와 줄 수 있습니까? 미리 감사드립니다.

Answer 1

동일한 모듈에없는 응용 프로그램 구성 요소에서 바닥 글 구성 요소를 사용하려고 할 때 한 가지 문제가있을 수 있습니다. 하위 모듈에 물건을 외주하자마자, 거기에 선언 된 구성 요소는이 모듈 범위에서만 액세스 할 수 있습니다. 외부의 구성 요소를 사용하려면 을으로 가져와야합니다.

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

귀하는

app.module.ts를 선언하지 app.ts에 모듈을 가져와야합니다 :

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

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

그리고 수출 FooterComponent을 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 { } 

희망이

을하는 데 도움이 0