Angular 9 *ngIf is not a known property of div even with CommonModule imported

Viewed 944

Ever since we upgrade to angular 9 we keep getting this error that we can't use *ngIf.
It only complains on run time. no build errors.
We have about 10 lazy loaded modules.
The main module has the import for BrowserModule.
All the child modules have the import for CommonModule.
It works if we run it with ng serve --prod. but just plain ng serve it refuses.
This is making development a huge hassle as it takes way longer to compile after every change.
The error we are getting is: Can't bind to '*ngIf' since it isn't a known property of 'div'.

<div class="m-grid__item m-grid__item--fluid  m-grid__item--order-tablet-and-mobile-1 m-login__wrapper" *ngIf="dataLoaded">

that is what its complaining about. We are on Angular 9.0.5 with all our other libraries on latest aswell.

We are lazy loading the modules via routes.

path: 'login',
loadChildren: () => import('./unauthenticated/auth.module').then(m => m.AuthModule),

please don't mark this as a duplicate as i have tried every single thing on the internet i can find but nothing seems to work.

here is the tsconfig incase its a setting.

{
   "compileOnSave": false,
   "compilerOptions": {
   "outDir": "./dist/out-tsc",
   "sourceMap": true,
   "declaration": false,
   "module": "esnext",
   "moduleResolution": "node",
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

App module imports

imports: [
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    OverlayModule,
    AppRoutingModule,
    LayoutModule,
    TranslateModule.forRoot(),
    NotificationModule
],

This is the auth module which is one of the affected modules.
The current scenario is for the AuthComponent.
The problem are on all modules.

imports: [
    CommonModule,
    NotificationModule,
    TranslateModule.forChild(),
    RouterModule.forChild([
        {
            path: '',
            component: AuthComponent
        }
    ]),
    SharedModule,
    CoreModule
],
providers: [AuthClient, GlobalClient, NotificationHelperService, DealerClient, UserClient, AuthenticationService, SignalRService],
declarations: [
    AuthComponent,
    LoginComponent,
    ForgotPasswordComponent,
    AuthNoticeComponent,
    EulaComponent,
    ActivateAccountComponent,
    ResetPasswordComponent,
    LoginTwoFactorAuthenticationComponent,
    BaseAuthComponent,
    ChangeEmailComponent,
    DealersNotFoundComponent,
    SystemOfflineComponent,
    DealersSuspendedComponent
]
1 Answers

Your main module should have import { CommonModule } from '@angular/common';

Related