'mat-form-field'は既知の要素ではありません - 角度4＆角材2

Question

私の角形のアプリケーションでは、すべてのコンポーネントを保持するpresentation.moduleがあります。私はshared-material.moduleを作成し、アプリケーション全体で使用されているすべての角度材料2モジュールを含んでいます。以前のpresentation.moduleで輸入しました。 app.moduleではpresentation.moduleをインポートしました。

app.moduleはここでその宣言にapp.component、header.componentとfooter.component

を持っているが、私のapp.module次のとおりです。ここで

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    FooterComponent 
    ], 
    imports: [ 
    // Layer's modules 
    PresentationModule, 
    BusinessDelegateModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

は私presentation.module次のとおりです。

const modules = [ 
    SharedMaterialModule, 
    SharedModule, 
    HomePresentationModule, 
    SecurityPresentationModule, 
] 

@NgModule({ 
    imports: [...modules], 
    exports: [...modules] 
}) 
export class PresentationModule { 
} 

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

あなたが怒鳴る見ることができるように、私はsecurity-presentation.moduleを登録している、ここではそのソースコードは次のとおりです。

@NgModule({ 
    imports: [ 
    SharedModule, 
    SecurityRoutingModule 
    ], 
    declarations: [ 
    LoginComponent, 
    RegisterComponent, 
    EmailConfirmationComponent, 
    PasswordResetComponent 
    ] 
}) 
export class SecurityPresentationModule { 
} 

私は（security-presentation.moduleに）login.componentでmat-input-fieldを使用しようとすると、私の問題があり、私は

Uncaught Error: Template parse errors: 
'mat-form-field' is not a known element 

しかし、他の角度材料2つのコンポーネントがapp.componentで正常に動作し、header.componentと：このエラーを得ました：

app.component.html

<div> 

    <app-header></app-header> 

    <div class="main-container"> 
    <router-outlet></router-outlet> 
    </div> 

    <app-footer></app-footer> 

</div> 

は、私は、各プレゼンテーションモジュールでshared-material.moduleをインポートするべきか、この問題を解決する方法はありますか？

ありがとうございます。

Answer 1

共有モジュールは、第一の材料モジュールをインポートする必要がありますので：私は同じエラーを得た

const materialModules = [ 
    MatButtonModule, 
    MatMenuModule, 
    MatToolbarModule, 
    MatIconModule, 
    MatCardModule, 
    MatSidenavModule, 
    MatFormFieldModule, 
    MatInputModule, 
    MatTooltipModule 
]; 
@NgModule({ 
    imports: [...materialModules], 
    exports: [...materialModules], 
    declarations: [] 
}) 
export class SharedMaterialModule { 
}