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

Dogface

Your lazy-loaded module should not be importing the routing module associated with the feature module, but the actual feature module (i.e. you should be importing TestModule instead of TestRoutingModule in your routing code which lazy-loads the route). Your feature module is the module where the routing module is imported, not the lazy-loaded code. – Evertor

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.

Evertor

thanks - just happened to me, could not figure it out! – Postmaster