CODEWITHSUNDEEP
angularangular-material
Surreal
Surreal

Reputation: 1047

All Material Angular directives come up as 'is not a known element'

I am on an Angular 5 project (5.0.0-rc0) with Angular 5 material (5.0.0-rc0) and for the life of me I can not debug while every single angular 5 material directive is coming up with

mat-xyz is not a known element

Here is what my app.module looks like

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

The Landing component has HTML like so

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

and it's .ts is the following

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

}

I know its probably something small or stupid, but for the life of me I can not find it

Thanks in advance!

Upvotes: 0

Views: 1070

Answers (2)

austinthedeveloper
austinthedeveloper

Reputation: 2601

Move them to the imports. You currently have them in exports:

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

Upvotes: 2

Preston
Preston

Reputation: 3526

Webstorm has been giving me such a message for the past year and a half that I've worked with Angular. Doesn't affect anything for me. It can probably be turned off in the IDE but I'm curious if Webstorm ever gets this figured out.

The message I see is Unknown html tag mat-card... and similar.

Upvotes: 0

Related Questions