With an Angular Monorepo Can't bind to 'ngIf' since it isn't a known property of 'div' and 'my-selector' is not a known element

Question

I've seen other posts like this one on Stack Overflow but I don't think this is a duplicate.

I have built up an Angular 11 monorepo with three private libraries and an application. Everything seems to build without significant complaints in the terminal, and the application even launches to its home page without complaint.

One of my libraries has a combination of components and pages, and both the components and the pages are included in the library module exports (and entryComponents for good measure). But VSCode is telling me components declared in the library module are not visible to pages in the same module. It's not just a VSCode issue either because when my page loads, sure enough, the component that VSCode flags doesn't appear in the page.

Then when I navigate to my login page (also in that same library module) it renders the page but the devTools console indicates that: Can't bind to 'ngIf' since it isn't a known property of 'div'. I've checked similar posts on Stack Overflow and they all come down to making sure CommonModule is imported everywhere, and it sure looks to me like I've done that, but I'm still getting this error.

I'm going to go try and create a minimal reproducible example, but in the meantime, can anyone think of what bone-headed thing I might be doing wrong here?

UPDATE #1

I've created a "minimal" reproducible example (which is still fairly complex, but as basic as I could conceive of it). You can clone it here: https://github.com/vicatcu/monorepo-example-error. You should be able to do:

npm install
npm run application

Then in your browser you will see a blank page with the text "Nav Links are Below this" displayed. However, the intent is that you should see that, plus below that the text "Navigate Using This Component" courtesy of the NavLinks component, and below that randomly you should see "Some Random text". The LoginComponent is the default route.

What's going wrong here?

UPDATE #2

I've updated the minimal reproducible example to not include any dependencies on ionic nor any requirements for rsync in the npm run application script, on this branch: https://github.com/vicatcu/monorepo-example-error/tree/remove-ionic-deps

Same problem.

user_15155602 · Answer

Are you using the correct syntax?

Content to render when condition is true.

Also verify that your component is declared in the same module where you import the CommonModule, make a test with ngFor and check if the same happen. If the problem continues try to test your component without any directive to check if the component was set up correctly. Please tell me what happens and send me your stacktrace.

UPDATE:

@NgModule({
   declarations: [AppComponent],
   entryComponents: [],
   imports: [
     BrowserModule, //REPLACE WITH CommonModule
     IonicModule.forRoot(),
     AppRoutingModule,
     LibComponentsModule,
     BrowserAnimationsModule
 ],
 providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
      Geolocation,
      Diagnostic
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

With an Angular Monorepo Can't bind to 'ngIf' since it isn't a known property of 'div' and 'my-selector' is not a known element

1 Answers