'mat-form-field' không phải là một phần tử đã biết - Góc 4 & Vật liệu Góc 2

Question

Trong ứng dụng góc của tôi, tôi có presentation.module chứa tất cả các thành phần. Tôi đã tạo một shared-material.module chứa tất cả các tài liệu góc 2 mô-đun được sử dụng trong toàn bộ ứng dụng. Tôi đã nhập nó trong presentation.module trước đó. Trong số app.module, tôi đã nhập presentation.module.

Các app.module có trong tuyên bố của mình app.component, header.component và footer.component

Đây là tôi app.module:

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

Đây là tôi presentation.module:

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

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

Mã nguồn của 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 { 
} 

Như bạn thấy dưới đây, tôi đã đăng ký một security-presentation.module, đây là mã nguồn của nó:

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

Vấn đề của tôi là khi tôi cố gắng sử dụng mat-input-field trong login.component (trong security-presentation.module), i nhận lỗi này:

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

Nhưng 2 thành phần nguyên liệu góc khác làm việc tốt trong app.component, header.component và.210:

app.component.html

<div> 

    <app-header></app-header> 

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

    <app-footer></app-footer> 

</div> 

Tôi có nên nhập shared-material.module trong mỗi module trình bày hoặc là có một cách để sửa lỗi này?

Cảm ơn bạn trước.

Answer 1

Bởi vì mô-đun chia sẻ của bạn đầu tiên nên nhập các module vật liệu:

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