I'm trying to create a component for a list of tags that I should be able to import everywhere.

The component is called tag-list-component.ts and is imported in my shared module :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatNativeDateModule } from '@angular/material/core';

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatChipsModule } from '@angular/material/chips';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';

import { FilesizePipe } from './pipes/filesize.pipe';
import { LocaleDatePipe } from './pipes/locale-date.pipe';
import { TruncatePipe } from './pipes/truncate.pipe';

import { DisabledControlDirective } from 'src/app/shared/disabled-control.directive';

import { QRCodeModule } from 'angularx-qrcode';
import { NgxFileDropModule } from 'ngx-file-drop';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { TagListComponent } from './components/tag-list/tag-list.component';

@NgModule({
    declarations: [
        FilesizePipe,
        LocaleDatePipe,
        TruncatePipe,
        DisabledControlDirective,
        TagListComponent,
    ],
    exports: [
        CommonModule,
        RouterModule,
        FormsModule,
        ReactiveFormsModule,
        MatNativeDateModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatPaginatorModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatSelectModule,
        MatSidenavModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        FilesizePipe,
        LocaleDatePipe,
        TruncatePipe,
        QRCodeModule,
        NgxFileDropModule,
        ClipboardModule,
        DisabledControlDirective,
        TagListComponent
    ],
    providers: [
        MatDatepickerModule,
    ],
})
export class SharedModule { }

Which itself is imported in the SharedChildModule (used for testing)

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

import { TranslateModule } from '@ngx-translate/core';

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

@NgModule({
    imports: [ TranslateModule.forChild() ],
    exports: [
        TranslateModule,
        SharedModule,
    ],
})
export class SharedChildModule { }

I'm trying to use the component in a file called project-list.component.html :

...
<app-tag-list></app-tag-list>
...

Which is part of the projects.module.ts and this uses the SharedChildModule (so by extension imports SharedChild which then should technically import TagListComponent)

import { NgModule } from '@angular/core';
...
import { SharedChildModule } from '../../shared/shared-child.module';
...
@NgModule({
    declarations: [
        ...
    ],
    imports: [SharedChildModule, StatsModule],
})
export class ProjectsModule {}

This is the current content of the TagListComponent :

<mat-form-field>
    <mat-label translate>project.list.searchByTags</mat-label>
    <input />
</mat-form-field>

But I'm encountering this error : 'mat-form-field' is not a known element.

CodePudding user response：

You need to import MatFormFieldModule in the module where the TagListComponent is declared (ie - SharedModule)

import {MatFormFieldModule} from '@angular/material/form-field';

@NgModule({
    declarations: [
        ...
        TagListComponent,
    ],
    imports: [
       ...
       MatFormFieldModule
    ],
    exports: [
        ...
        TagListComponent
    ],
    providers: [
        ...
    ],
})
export class SharedModule { }