“mat-form-field”不是已知元素 - Angular 4和Angular Material 2。

Question

在我的 Angular 应用程序中，我有一个名为 presentation.module 的模块，其中包含所有组件。我创建了一个名为 shared-material.module 的模块，其中包含整个应用程序中使用的所有 Angular Material 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

但是其他Angular Material 2组件在app.component、header.component和footer.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吗？还是有其他方法可以解决这个问题？提前致谢。

- Laiso

---

我也遇到了同样的问题，但还没有找到解决方案。:( 你能修复它吗？ - balu

Answer 1

因为您的共享模块应该首先导入材料模块：

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

- user4676340

---

我得到了相同的错误，我已经添加了imports属性。 - Laiso

抱歉，在你的代码中没有找到它。你也把它放在演示模块里了吗？如果是这样，如果你能把它添加到你的帖子中，那就太好了，因为你可以看到它真的会让人感到困惑。 - user4676340

我已经更新了我的帖子。我不明白为什么一些材料模块在app.component、header.component和footer.component内部正常工作，但在其他视图中却无法工作，即使我已经在共享模块中导入它们。 - Laiso

我正在使用 Angular Material ^5.0.0-rc0。 - Laiso

我明白了。演示模块没有导入，这是正常的还是你忘记了？ - user4676340