所有Material Angular指令都显示为“不是已知元素”

时间:2017-11-17 20:54:34

标签: angular angular-material

我正在使用Angular 5材料(5.0.0-rc0)进行Angular 5项目(5.0.0-rc0),并且在我的生命中,我无法调试,而每个单一的5材质指令都会出现< / p>

  

mat-xyz不是已知元素

这是我的app.module的样子

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Component } from '@angular/core';
// Import the Http Module and our Data Service
import { DataService } from './data.service';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import 'hammerjs';

import {
  MatAutocompleteModule,
  ...
  MatStepperModule
} from '@angular/material';
import { HttpModule } from '@angular/http';
import { CdkTableModule } from '@angular/cdk/table';
import { LandingComponent } from './sandbox/landing/landing.component';

@NgModule({
  declarations: [
    AppComponent,
    LandingComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
    ...
    MatTooltipModule,
  ],
  providers: [DataService], 
  bootstrap: [AppComponent]
})
export class AppModule { }

Landing组件有这样的HTML

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

并且.ts是以下

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我知道它可能是小事或愚蠢的事,但对我来说,我找不到它

提前致谢!

2 个答案:

答案 0 :(得分:1)

将它们移至导入。您目前在出口中拥有它们:

imports: [
    BrowserModule,
    HttpModule,
    MatAutocompleteModule,
    ...
    MatTooltipModule,
  ],
  exports: [
    CdkTableModule
  ],

答案 1 :(得分:0)

Webstorm在过去一年半的时间里一直在给我这样一个消息,我和Angular一起工作过。对我来说不会影响任何事情。它可能会在IDE中关闭,但我很好奇Webstorm是否能解决这个问题。

我看到的消息是Unknown html tag mat-card ......等等。