Question

我正在尝试使用MEAN堆栈构建基本的“博客”。现在，我尝试使用Angular6。控制台在加载表单页面时显示此错误：

错误：模板解析错误：'mat-form-field'不是已知元素：



如果“ mat-form-field”是Angular组件，则请验证它是否属于此模块。



如果“ mat-form-field”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。（“ [ERROR->]”）：ng：///AppRoutingModule/CreatePostComponent.html@1：2

我不确定发生了什么...或如何解决。我的代码是：

app.module.ts：

A LDA_Gibbs topic model with 16 topics.

    Warning messages:
    1: In e$fun(obj, substitute(ex), parent.frame(), e$data) :
      already exporting variable(s): dtm, nstart, seed, best, burnin, iter, thin, n.cores
    2: closing unused connection 10 (<-MyPC:11888) 
    3: closing unused connection 9 (<-MyPC:11888) 
    4: closing unused connection 8 (<-MyPC:11888) 
    5: closing unused connection 7 (<-MyPC:11888) 
    6: closing unused connection 6 (<-MyPC:11888) 
    7: closing unused connection 5 (<-MyPC:11888) 
    8: closing unused connection 4 (<-MyPC:11888) 
    9: closing unused connection 3 (<-MyPC:11888)

material.ts（AngularMaterialModule）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './material';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts（由Angular安装创建）：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';

const modules = [
  MatToolbarModule,
  MatGridListModule,
  MatFormFieldModule,
  MatInputModule,
  MatDatepickerModule
];

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

最后是create-post.component.html：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CreatePostComponent } from './posts/create-post.component/create-post.component';

const routes: Routes = [
  {
    path: 'posts/new',
    component: CreatePostComponent
  }
];

@NgModule({
  declarations: [
    CreatePostComponent
  ],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

因此，对帮助我解决此问题的任何评论表示赞赏。

Answer 1

删除declarations中的AppRoutingModule

将此添加到app.module.ts

declarations: [
    AppComponent,
    CreatePostComponent
],

将AppRoutingModule导入您的AppModule

imports: [ ...modules, AppRoutingModule],

Angular 6 Material MatFormField显示为未知组件

1 个答案: