Javascript 角度6材质MatFormField显示为未知组件_Javascript_Angular_Typescript_Module_Angular Material

Javascript 角度6材质MatFormField显示为未知组件

javascript angular typescript module angular-material

Javascript 角度6材质MatFormField显示为未知组件,javascript,angular,typescript,module,angular-material,Javascript,Angular,Typescript,Module,Angular Material,我试图建立一个基本的“博客”与平均堆栈。现在我正在尝试使用Angular 6。加载我的表单页面时，控制台显示此错误：错误：模板分析错误：“mat form field”不是已知元素：如果“mat form field”是一个角度组件，则确认它是该模块的一部分如果“mat form field”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。（“[ERROR->]”：ng:///AppRoutingMod

我试图建立一个基本的“博客”与平均堆栈。现在我正在尝试使用Angular 6。加载我的表单页面时，控制台显示此错误：

错误：模板分析错误：“mat form field”不是已知元素：

如果“mat form field”是一个角度组件，则确认它是该模块的一部分

如果“mat form field”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。（“[ERROR->]”：ng:///AppRoutingModule/CreatePostComponent。html@1：2

我不知道发生了什么事。。。或者如何修复它。我的代码是：

app.module.ts:

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

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

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

<form #createPost>
  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>
</form>

material.ts（角度材料模块）：

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

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

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

<form #createPost>
  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>
</form>

app-routing.module.ts（通过角度安装创建）：

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

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

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

<form #createPost>
  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>
</form>

最后，创建post.component.html:

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

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

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

<form #createPost>
  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>
</form>

因此，任何有助于我解决此问题的意见都将不胜感激

删除

批准模块中的声明


将此添加到app.module.ts

declarations: [
    AppComponent,
    CreatePostComponent
],


将AppRoutingModule
导入您的AppModule

imports: [ ...modules, AppRoutingModule],


删除批准模块中的声明

将此添加到app.module.ts

declarations: [
    AppComponent,
    CreatePostComponent
],


将AppRoutingModule
导入您的AppModule

imports: [ ...modules, AppRoutingModule],