title: Angular 14 Components Aren't Recognizing Imported Modules
body: <p>I have a module in my Angular 14.x project that is structured as such.</p>
  <pre><code>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 {
  }
  
  </code></pre>
  <p>After upgrading to Angular 14.x I get hundreds of compile errors stating <code>&quot;Can't bind to... &quot;</code> stated directive.</p>
  <p>The individual component folders are structured as such.</p>
  <pre><code>component-name
   - component-name.component.html
   - component-name.component.scss
   - component-name.component.ts
   - component-name.component.spec.ts
  </code></pre>
  <p><a href="https://i.stack.imgur.com/FpKlk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FpKlk.png" alt="enter image description here" /></a></p>
  <p>We upgraded from Angular 12 -&gt; Angular 13 -&gt; Angular 14. Everything was working prior to upgrading to Angular 14.</p>
  <p>This is our tsconfig.json file.</p>
  <pre><code>{
    &quot;compileOnSave&quot;: false,
    &quot;compilerOptions&quot;: {
      &quot;baseUrl&quot;: &quot;./&quot;,
      &quot;outDir&quot;: &quot;./dist/out-tsc&quot;,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;noImplicitReturns&quot;: true,
      &quot;noImplicitAny&quot;: false,
      &quot;noFallthroughCasesInSwitch&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;declaration&quot;: false,
      &quot;downlevelIteration&quot;: true,
      &quot;experimentalDecorators&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;importHelpers&quot;: true,
      &quot;target&quot;: &quot;es2020&quot;,
      &quot;module&quot;: &quot;es2020&quot;,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;lib&quot;: [
        &quot;es2018&quot;,
        &quot;dom&quot;
      ],
      &quot;strictPropertyInitialization&quot;: false,
    },
    &quot;angularCompilerOptions&quot;: {
      &quot;enableI18nLegacyMessageIdFormat&quot;: false,
      &quot;strictInjectionParameters&quot;: true,
      &quot;strictInputAccessModifiers&quot;: true,
      &quot;strictTemplates&quot;: true,
      &quot;strictPropertyInitialization&quot;: false,
      &quot;types&quot;: [
        &quot;node&quot;
      ]
    }
  }
  </code></pre>
  <p>Any suggestions on how to resolve the import errors like such would be very much appreciated.</p>
  <pre><code>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   &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; [ngStyle]=&quot;{ 'width': width, 'height': height, 'margin': margin }&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
  </code></pre>