管道“async”未找到 - Angular 11

Question

我正在尝试使用Angular 11作为可观察对象获取数据，但在懒加载的组件/模块中使用async或json pipe时遇到了问题。 我在控制台上收到了错误。

该模块：

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 {}

组件：

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');
  }
}

测试组件的HTML代码：

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

应用程序模块：

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 {}

我的package.json内容如下：

  "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"
  }

我的 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
  }
}

目前我尝试过：

1. 将CommonModule添加到惰性加载的模块和AppModule中（无效）
2. 将Angular更新到Angular 11.2.0版本（无效）

我已检查了core.js中的getPipeDef$1函数，发现registry为null（请参见图片）：

有什么方法可以解决这个问题吗？谢谢。

- Bozhinovski

---

你的惰性加载模块不应该导入与特性模块相关联的路由模块，而是实际的特性模块（即在惰性加载路由的代码中，你应该导入TestModule而不是TestRoutingModule）。你的特性模块是导入路由模块的模块，而不是惰性加载的代码。 - Edric

Answer 1

这是因为您的应用程序路由模块正在懒加载错误的模块。您应该懒加载具有路由模块导入的特性模块：

路由：

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

功能模块:

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

如果想了解如何延迟加载功能模块，请查看文档。

- Edric

---

谢谢 - 刚刚发生在我身上，搞不明白！ - undefined