Angular 14 组件不识别进口模块

Question

I have a module in my Angular 14.x project that is structured as such.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatProgressSpinner, MatSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatStep, MatStepper, MatStepperModule } from '@angular/material/stepper';
import { MatDialogModule } from '@angular/material/dialog'
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { ModalComponent } from './modal/modal.component';
import { IconsComponent } from './icons/icons.component';
import { AlertComponent } from './alert/alert.component';
import { PaginatorComponent } from './paginator/paginator.component';
import { LoaderComponent } from './loader/loader.component';
import { GroupSlideComponent } from './group-slide/group-slide.component';
import { VjsPlayerComponent } from './vjs-player/vjs-player.component';
import { FilterPipe } from '@src/app/core/pipes/filter.pipe';
import { ContentTagPipe } from '@src/app/core/pipes/content-tag.pipe';
import { AccessDialogComponent } from './access-dialog/access-dialog.component';
import { BtnSlidenavComponent } from './btns/btn-slidenav/btn-slidenav.component';
import { ArrowLinkComponent } from './btns/arrow-link/arrow-link.component';
import { ContentSlideComponent } from './content-slide/content-slide.component';
import { FilterComponent } from './filter/filter.component';
import { MatExpansionModule } from '@angular/material/expansion';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MobileFilterComponent } from './filter/mobile-filter/mobile-filter.component';
import { BtnBackComponent } from './btns/btn-back/btn-back.component';

@NgModule({
  declarations: [
    ModalComponent,
    IconsComponent,
    AlertComponent,
    PaginatorComponent,
    LoaderComponent,
    GroupSlideComponent,
    VjsPlayerComponent,
    FilterPipe,
    ContentTagPipe,
    AccessDialogComponent,
    BtnSlidenavComponent,
    ArrowLinkComponent,
    ContentSlideComponent,
    FilterComponent,
    MobileFilterComponent,
    BtnBackComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatStepperModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatDatepickerModule,
    MatProgressSpinnerModule,
    MatDialogModule,
    RouterModule,
    MatExpansionModule,
    RouterModule
  ],
  exports: [
    ModalComponent,
    IconsComponent,
    MatProgressSpinner,
    MatSpinner,
    MatStepper,
    MatStep,
    AlertComponent,
    GroupSlideComponent,
    PaginatorComponent,
    LoaderComponent,
    VjsPlayerComponent,
    FilterPipe,
    ContentTagPipe,
    BtnSlidenavComponent,
    BtnBackComponent,
    ArrowLinkComponent,
    ContentSlideComponent,
    FilterComponent,
    MobileFilterComponent
  ]
})
export class UIModule {
}

After upgrading to Angular 14.x I get hundreds of compile errors stating "Can't bind to... " stated directive.

The individual component folders are structured as such.

component-name
 - component-name.component.html
 - component-name.component.scss
 - component-name.component.ts
 - component-name.component.spec.ts

We upgraded from Angular 12 -> Angular 13 -> Angular 14. Everything was working prior to upgrading to Angular 14.

This is our tsconfig.json file.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitAny": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es2018",
      "dom"
    ],
    "strictPropertyInitialization": false,
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "strictPropertyInitialization": false,
    "types": [
      "node"
    ]
  }
}

Any suggestions on how to resolve the import errors like such would be very much appreciated.

Error: src/app/components/ui/icons/icons.component.html:318:43 - error NG8002: Can't bind to 'ngStyle' since it isn't a known property of ':svg:svg'.

318   <svg xmlns="http://www.w3.org/2000/svg" [ngStyle]="{ 'width': width, 'height': height, 'margin': margin }" viewBox="0 0 20 20" fill="currentColor">

Answer 1

Did you make any other modifications apart from upgrading?

This kind of error is usually caused by:

1. not importing CommonModule where it's needed, or
2. your local server getting stuck, in which case try a restart.

Answer 2

I needed to restart VSCode. After restarting the import errors were correctly identified and I was able to resolve them.