Angular Shared Module導入不會導入提到的模塊

Question

我已將共享模塊添加到我的應用程序。 看起來很簡單。

const imports = [
    CommonModule,
    RouterModule,
    BrowserModule,
    FormsModule, ReactiveFormsModule
];


@NgModule({imports})

export class SharedModule {}

當我將共享模塊導入另一個模塊時，看不到導入的人員。 我收到這樣的錯誤：“無法綁定到'formGroup'，因為它不是'form'的已知屬性。（”，這意味着FormsModule無法正確導入。如果我將基本模塊直接導入到我的應用模塊中它工作正常。

非常感謝您的幫助和建議。

Answer 1

您很可能還需要導出這些模塊。

典型：

@NgModule({
    imports: [
        SomeModule
    ],
    declarations: [
        ...
    ],
    exports: [
        SomeModule,
    ]
});

另請參閱此角形文檔...

通過重新導出 CommonModule和FormsModule，導入此SharedModule的任何其他模塊都可以從CommonModule訪問NgIf和NgFor之類的指令，並且可以使用FormsModule中的指令[[ngModel）]綁定到組件屬性。

Answer 2

您必須導出在共享模塊中使用的依賴模塊，以便從其他不導入這些依賴關系的地方使用共享模塊。

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CustomerComponent } from './customer.component';

@NgModule({
 imports:      [ CommonModule ],
 declarations: [ CustomerComponent ],
 exports:      [ CustomerComponent
                 CommonModule, FormsModule ]
})
export class SharedModule { }