typescript 'mat-form-field' 不是已知元素 - Angular 4 & Angular Material 2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47158651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
'mat-form-field' is not a known element - Angular 4 & Angular Material 2
提问by Laiso
In my angular application, I have a presentation.modulethat holds all components. I have created a shared-material.modulecontaining all angular material 2 modules used in the whole app. I have imported it in the previous presentation.module. In my app.module, I have imported the presentation.module.
在我的 angular 应用程序中，我有一个presentation.module包含所有组件的。我创建了一个shared-material.module包含整个应用程序中使用的所有 angular material 2 模块。我在之前的presentation.module. 在我app.module的presentation.module.
The app.modulehave in its declaration app.component, header.componentand footer.component
将app.module在其声明中app.component，header.component并footer.component
Here is my app.module:
这是我的app.module：
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent
],
imports: [
// Layer's modules
PresentationModule,
BusinessDelegateModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is my presentation.module:
这是我的presentation.module：
const modules = [
SharedMaterialModule,
SharedModule,
HomePresentationModule,
SecurityPresentationModule,
]
@NgModule({
imports: [...modules],
exports: [...modules]
})
export class PresentationModule {
}
The source code of shared-material.module:
的源代码shared-material.module：
// updated: Before, i have just imported these modules without re-exporting them.
const materialModules = [
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule
];
@NgModule({
imports: [...materialModules],
exports: [...materialModules],
declarations: []
})
export class SharedMaterialModule {
}
As you can see bellow, I have registered a security-presentation.module, here is its source code:
正如你在下面看到的，我已经注册了一个security-presentation.module，这是它的源代码：
@NgModule({
imports: [
SharedModule,
SecurityRoutingModule
],
declarations: [
LoginComponent,
RegisterComponent,
EmailConfirmationComponent,
PasswordResetComponent
]
})
export class SecurityPresentationModule {
}
My problem is when I attempt to use mat-input-fieldin the login.component(in the security-presentation.module), i got this error:
我的问题是当我尝试mat-input-field在login.component（在security-presentation.module）中使用时，出现此错误：
Uncaught Error: Template parse errors:
'mat-form-field' is not a known element
But other angular material 2 components work fine in the app.component, header.componentand footer.component:
但是其他角度材料 2 组件在app.component,header.component和 中工作正常footer.component：
app.component.html
app.component.html
<div>
<app-header></app-header>
<div class="main-container">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
Should I import shared-material.modulein each presentation module or is there a way to fix this?
我应该shared-material.module在每个演示模块中导入还是有办法解决这个问题？
Thank you in advance.
先感谢您。
采纳答案by Laiso
Because your shared module should first import the material modules :
因为您的共享模块应该首先导入材料模块：
const materialModules = [
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule
];
@NgModule({
imports: [...materialModules],
exports: [...materialModules],
declarations: []
})
export class SharedMaterialModule {
}
