The pipe 'async' could not be found - Angular 11

Question

I am trying to fetch data with with Angular 11 as observable and I am having issues using async or json pipe in a lazy loaded component/module. I get the error in the console.

The module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TestRoutingModule } from './test-routing.module';
import { TestComponent } from './test.component';

@NgModule({
  declarations: [TestComponent],
  imports: [CommonModule, TestRoutingModule],
})
export class TestModule {}

The component:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
  user$: Observable<any>;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.user$ = this.http.get('https://jsonplaceholder.typicode.com/users/1');
  }
}

The Test component html:

<pre>{{ user$ | async }}</pre>

The App Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app-routing.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './features/index/index.component';

const routes: Routes = [
  { path: 'index', component: IndexComponent },
  {
    path: 'test',
    loadChildren: () =>
      (
        import(
          './features/test/test-routing.module'
        )
      ).then(p => p.TestRoutingModule),
  }
  { path: '', redirectTo: '/index', pathMatch: 'full' },
  { path: '**', redirectTo: '/index' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

My package.json is:

  "dependencies": {
    "@angular/animations": "~11.0.9",
    "@angular/cdk": "^11.1.2",
    "@angular/common": "~11.0.9",
    "@angular/compiler": "~11.0.9",
    "@angular/core": "~11.0.9",
    "@angular/forms": "~11.0.9",
    "@angular/material": "^11.1.2",
    "@angular/platform-browser": "~11.0.9",
    "@angular/platform-browser-dynamic": "~11.0.9",
    "@angular/router": "~11.0.9",
    "eslint": "^7.19.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.7",
    "@angular/cli": "~11.0.7",
    "@angular/compiler-cli": "~11.0.9",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }

My tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"],
      "@src/*": ["*"]
    },
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "module": "es2020",
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

For now I have tried:

1. Adding CommonModule into the lazy loaded module and into the AppModule (not working)
2. Updating Angular to Angular 11.2.0 version (not working)

I have checked the getPipeDef$1 function from core.js and registry is null (please see the picture):

Any idea how to fix this? Thanks

Answer 1

This is because your app's routing module is lazy-loading the wrong module. You should be lazy-loading the feature module which has the routing module as an import:

Routing:

const routes: Route[] = [
  { path: 'your-path-here', loadChildren: () => import('./path/to/feature.module')
    .then(m => m.FeatureModule) }, // Not FeatureRoutingModule!
  // ...
]

Feature module:

@NgModule({
  imports: [
    // ...
    // Your routing module for the feature module should be imported here:
    FeatureRoutingModule
  ]
})
export class FeatureModule {}

For more info about how to lazy-load feature modules, consider taking a look at the documentation.