找不到管道“异步”-Angular 11

Question

我正在尝试使用 Angular 11 作为 observable 获取数据，但在延迟加载的组件/模块中使用异步或 json 管道时遇到问题。我在控制台中收到错误消息。

模块：

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 函数，并且注册表为空（请看图片）：

知道如何解决这个问题吗？谢谢

Answer 1

这是因为您应用的路由模块延迟加载了错误的模块。您应该延迟加载将路由模块作为导入的 feature 模块：

路由：

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

有关如何延迟加载功能模块的更多信息，请考虑查看documentation。