'mat-grid-tile' is not a known element

[michaelb-01]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Grid list to work like the example on the material website

What is the current behavior?

'mat-grid-tile' is not a known element

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV

I used the StackBlitz start but the grid list works fine there.. I've match all of my package versions to that of the StackBlitz project, i've re-instsalled material and all my other packages several times but i'm still getting the same error... There's no point in me including a working stackblitz project here but could anyone suggest anything I could try?

I'm just using the example from the material website:

<mat-grid-list cols="2" rowHeight="16:9" gutterSize="20">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>

This is the full error:

ERROR in : 'mat-grid-tile' is not a known element:
1. If 'mat-grid-tile' is an Angular component, then verify that it is part of this module.
2. If 'mat-grid-tile' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<mat-grid-list cols="2" rowHeight="16:9" gutterSize="20">
  [ERROR ->]<mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile")
: 'mat-grid-tile' is not a known element:
1. If 'mat-grid-tile' is an Angular component, then verify that it is part of this module.
2. If 'mat-grid-tile' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<mat-grid-list cols="2" rowHeight="16:9" gutterSize="20">
  <mat-grid-tile>1</mat-grid-tile>
  [ERROR ->]<mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile")
: 'mat-grid-tile' is not a known element:
1. If 'mat-grid-tile' is an Angular component, then verify that it is part of this module.
2. If 'mat-grid-tile' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  [ERROR ->]<mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>
")
: 'mat-grid-tile' is not a known element:
1. If 'mat-grid-tile' is an Angular component, then verify that it is part of this module.
2. If 'mat-grid-tile' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  [ERROR ->]<mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>

")
: 'mat-grid-list' is not a known element:
1. If 'mat-grid-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-grid-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</div> -->

[ERROR ->]<mat-grid-list cols="2" rowHeight="16:9" gutterSize="20">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-g")

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular:

    "@angular/animations": "5.2.10",
    "@angular/cdk": "5.2.5",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "^5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/material": "5.2.5",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@angular/platform-server": "^5.2.10",
    "devDependencies": {
        "@angular/cli": "^1.7.4",
        "@angular/compiler-cli": "^5.2.10",
        "typescript": "^2.4.2"
        ....

Using Mac 10.13.4 and chrome

Is there anything else we should know?

[donroyco]

Did you import MatGridListModule inside your app module?

[michaelb-01]

Yes i'm importing all my material modules in a shared module, then importing that into my app.module:

I'm also using feature modules to structure my app. I just did a test, if I try to load a simple mat-checkbox in my main app.component.html it works fine but if I try to add a mat-checkbox to my job-list.component, which is loaded through a feature module (job.module.ts) I get:

ERROR in : 'mat-checkbox' is not a known element:

Do I need to import the material modules into all my feature modules that use them?... I thought I could load them from a shared module which would then be available app wide..?

These are the relevant parts of my shared and app modules:

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';

// shared components import { NavbarTopComponent } from './components/navbar-top/navbar-top.component'; import { NavbarBottomComponent } from './components/navbar-bottom/navbar-bottom.component'; import { HamburgerMenuComponent } from './components/hamburger-menu/hamburger-menu.component'; import { NavbarDetailsComponent } from './components/navbar-details/navbar-details.component'; import { NavbarSearchComponent } from './components/navbar-search/navbar-search.component'; import { NavbarBreadcrumbsComponent } from './components/navbar-breadcrumbs/navbar-breadcrumbs.component'; import { CarouselComponent } from './components/carousel/carousel.component';

import {
  MatInputModule,
  MatFormFieldModule,
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatSelectModule,
  MatListModule,
  MatSidenavModule,
  MatGridListModule,
  MatCheckboxModule
} from '@angular/material';

const materialModules = [  
  MatInputModule,
  MatFormFieldModule,
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatSelectModule,
  MatListModule,
  MatSidenavModule,
  MatGridListModule,
  MatCheckboxModule
]

const components = [
  NavbarTopComponent,
  NavbarBreadcrumbsComponent,
  NavbarDetailsComponent,
  NavbarSearchComponent,
  NavbarBottomComponent,
  HamburgerMenuComponent,
  CarouselComponent
]

@NgModule({
  imports: [
    CommonModule,
    ...materialModules
  ],
  declarations: [
    ...components
  ],
  exports: [
    ...materialModules,
    ...components
  ]
})
export class SharedModule { }

app.module:

import { SharedModule } from './shared/shared.module';

import { JobModule } from './job/job.module';

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

[michaelb-01]

If I import my shared.module into my job.module it works fine. Is that what you have to do when working with feature modules?

[julianobrasil]

Yes, it is.

[michaelb-01]

Ok apologies, I’ll close this

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}