Ошибка Uncaught: Ошибки синтаксического анализа шаблона: '$' не является известным элементом:

#angular #typescript

Вопрос:

Я использую Angular Material версии 7.2.2, и я продолжаю получать следующую ошибку в Chrome при запуске моего компонента.

Библиотеки должным образом импортированы как таковые в мой shared.module.ts заключается в следующей сути.

Код затронутого HTML-файла выглядит следующим образом.

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

Это модуль, импортирующий компонент 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 {
}

1. Возможно, глупый вопрос, но является ли ваш компонент частью общего модуля? Или этот модуль импортирует ваш общий модуль?

2. ДА. Компонент находится в этом каталоге src app sharedlayoutsmain-layout side-nav, а общий модуль — по этому пути srcapp sharedshared.module.ts

3. Как ваш общий модуль импортируется в тот компонент, который содержит шаблон?

4. Ваш компонент боковой навигации (компонент, выдающий ошибку) должен быть объявлен в модуле где-нибудь правильно? Пожалуйста, обновите свой пример, чтобы включить модуль, частью которого является компонент side-nav, и, пожалуйста, убедитесь, что этот модуль импортирует SharedModule

5. Привет. Я обновил пример. Путь к модулю — srcapp sharedlayouts main-layout

Ответ №1:

Причина этого в том, что вы объявляете свой SideNavComponent в этом модуле, который отображается в массиве declarations. Ваш компонент использует, mat-nav-list который объявлен в MatListModule . В настоящее время MainLayoutModule не импортируется MatListModule , поэтому элемент неизвестен.

Вам просто нужно добавить MatListModule в качестве импорта в ваш MainLayoutModule

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

1. Я сделал это, но теперь я получаю следующую ошибку; Обнаружена циклическая зависимость: src app shared layoutsmain-layoutmain-layout.module.ts -> src app shared shared.module.ts

2. Имеет ли ваш src app shared shared.module. ts вообще изменился по сравнению с примером, который вы предоставили в своем вопросе?

3. Я ничего не менял, но я исключил модули без проблем. Позвольте мне обновить весь код.

4. Хорошо, я вижу проблему. Ваш SharedModule импорт MainLayoutModule . У меня создалось впечатление, что он содержит только модули Material. Это объясняет циклическую зависимость. Я обновил свой ответ для импорта MatListModule в MainLayoutModule

5. Спасибо, что уделили мне время. Это решило проблему. Давайте попробуем использовать то же самое для решения других ошибок.