CODEWITHSUNDEEP
angulartypescript
Christopher Kinyua
Christopher Kinyua

Reputation: 170

Uncaught Error: Template parse errors: '$' is not a known element:

I am using Angular Material version 7.2.2 and I keep getting the following error on Chrome when I run my component.

enter image description here

The libraries are properly imported as such on my shared.module.ts is in the following gist.

The affected HTML file's code is as follows.

<div fxLayout="column">
    <mat-nav-list fxFlex fxLayout="column">
        <mat-list-item *ngFor="let item of menuItems"
                      [routerLink]="item.route"
                      routerLinkActive="side-nav__item--active"
                      class="side-nav__item">
            <a mat-line>{{ item.name }}</a>
        </mat-list-item>
    </mat-nav-list>
</div>

This is the module importing the SideNaveComponent:

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

import {MainLayoutComponent} from './main-layout.component';
import {CommonModule} from '@angular/common';
import {FlexLayoutModule} from '@angular/flex-layout';
import {NavBarComponent} from './nav-bar/nav-bar.component';
import {MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule} from '@angular/material';
import {RouterModule} from '@angular/router';
import {SideNavComponent} from './side-nav/side-nav.component';

@NgModule({
    imports: [
        CommonModule,
        RouterModule,
        FlexLayoutModule,
        MatMenuModule,
        MatButtonModule,
        MatIconModule,
        MatToolbarModule
    ],
    exports: [
        MainLayoutComponent,
        NavBarComponent,
        SideNavComponent],
    declarations: [
        MainLayoutComponent,
        NavBarComponent,
        SideNavComponent
    ],
    providers: [],
})
export class MainLayoutModule {
}

Upvotes: 1

Views: 1698

Answers (1)

Darren Lamb
Darren Lamb

Reputation: 1563

The reason for this is because you're declaring your SideNavComponent in this module seen in the declarations array. Your component makes use of mat-nav-list which is declared in MatListModule. Currently, MainLayoutModule does not import MatListModule so the element is unknown.

You simply need to add MatListModule as an import to your MainLayoutModule

@NgModule({
imports: [
    CommonModule,
    RouterModule,
    FlexLayoutModule,
    MatMenuModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatListModule
],
exports: [
    MainLayoutComponent,
    NavBarComponent,
    SideNavComponent],
declarations: [
    MainLayoutComponent,
    NavBarComponent,
    SideNavComponent
],
providers: [],
})
export class MainLayoutModule { }

Upvotes: 1

Related Questions