Angular 9.0.4, Async Pipe not found in sub module (git repo)

Question

Started a new project using Angular 9.0.4, and in my sub module, I get AsyncPipe not found when I try to use it in an *ngIf. The only thing I found on Google is to disable Ivy, or closed defects with no resolution. Seems such a basic thing and this worked in Angular 6, 7, 8, but not 9.

Here is a github repository with just enough to reproduce the issue. AppModule has a component, Test1Component which uses AsyncPipe with no problem. There is "AnotherModule" with Test2Component that uses the exact same code and has error "Async Pipe not found."

I've also read that you have to import CommonModule, and it is included by default in the new module. I'm left scratching my head. Thankfully it's a personal project and not the end of the world (yet!)

https://github.com/jamisonroberts/Angular9Test.git

Thanks.

Answer 1

You are not importing the correct modules in your AppModule file.

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    Test1Component
  ],
  imports: [
    BrowserModule,
    // AnotherModuleRoutingModule,
    AnotherModuleModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You should not import the routing files of other modules. Instead, import the required module itself. After correcting the module imports, the async pipe should work fine.

For more information on Feature modules, refer Angular official docs.