응용 프로그램 모듈에
app.module.ts
`import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule, FormGroup } from'@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
/*Routing Module*/
import {AppRoutingModule} from './app-routing.module';
/*Core Module*/
import { CoreModule } from './core/core.module';
/*Shared Module*/
import {SharedModule} from './shared/shared.module';
/*Featured Module*/
import { LoginModule } from './login/login.module';
import { LandingModule } from './landing/landing.module';
@NgModule({
imports: [
BrowserModule,
FormGroup,
FormsModule,
ReactiveFormsModule,
SharedModule.forRoot(),
LandingModule,
LoginModule,
CoreModule.forRoot(),
AppRoutingModule,
BrowserAnimationsModule
],
declarations: [
AppComponent,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
공유 모듈
다음shared.module.ts
`import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from './material.module';
@NgModule({
imports: [ CommonModule, MaterialModule, FlexLayoutModule],
declarations: [ ],
exports: [ CommonModule, MaterialModule, FlexLayoutModule]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: []
};
}
}
기능 모듈
landing.module.ts
`import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, FormGroup, FormBuilder, Validators } from '@angular/forms';
import {SharedModule} from '../shared/shared.module';
import { LandingRoutingModule } from './landing-routing.module';
import { HomeComponent } from './home/home.component';
import { RegisterComponent } from './register/register.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
FormGroup,
SharedModule,
LandingRoutingModule
],
declarations: [HomeComponent, RegisterComponent]
})
export class LandingModule { }
을 오류가 발생합니다 RegisterComponent FormGroup을 사용해 보았는데 콘솔에 오류가 발생했습니다. compiler.es5.js : 1694 Uncaught Error : 모듈 'AppModule'에 의해 가져온 'FormGroup'의 예기치 않은 값. @NgModule 주석을 추가하십시오. 사람이내 기능 모듈에 FormGroup 수입하고 있고 내 안에 Angular4 여러 모듈 구조
코어 모듈을 여러 모듈
`import {ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpService } from './http.service';
import { StoreService } from './store.service';
@NgModule({
imports: [ CommonModule ],
declarations: [],
exports: []
})
export class CoreModule {
constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
if (parentModule) {
throw new Error(
'CoreModule is already loaded. Import it in the AppModule only');
}
}
static forRoot(): ModuleWithProviders {
return {
ngModule: CoreModule,
providers: [ HttpService, StoreService ]
};
}
}`
앱 routing.module 또한
`import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
const appRoutes: Routes = [
{ path:'', redirectTo:'home', pathMatch:'full' },
{ path: 'login', loadChildren: 'app/login/login.module#LoginModule' }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}`
그리고 게으른 로딩을 할 수있는 올바른 방법을 모듈을 가져올 나에게 올바른 방법을 말할 수 있었다하시기 바랍니다. 감사합니다
, 내 기능 모듈에 ReactiveformsModule을 가져 놓쳤다 구성 요소에서 가져올 수 있습니다 사람은 코어 또는에서 formsModule, ReactiveformsModule을 배치 할 곳으로 도움을 줄 수 다시 공유하기 때문에 피쳐 모듈에서 가져올 필요가 없으며 내 피쳐 모듈을 지연로드하는 올바른 방법도 있습니다. – Enthu