App模块
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注释 . 请任何人告诉我在多个模块中导入模块的正确方法
核心模块
`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 ]
};
}
}`
app-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 {
}`
还有正确的懒人加载方式.Thankyou
1 回答
您不必在任何模块内使用 FormGroup . 从功能模块中移除 .
您可以直接导入组件iteself