Angular 管道'；异步'；找不到-11

我正在尝试以Angular 11作为可观察对象获取数据，并且在延迟加载的组件/模块中使用异步或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');
  }
}

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

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

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

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

组件：

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

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

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

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

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

应用程序路由.module.ts

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

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

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

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

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

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

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

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

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

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

目前，我已尝试：

将CommonModule添加到延迟加载的模块和AppModule中（不工作）

将Angular更新为Angular 11.2.0版本（不工作）

我已经检查了core.js中的getPipeDef$1函数，注册表为空（请参见图片）：

---

你知道怎么解决这个问题吗？谢谢

这是因为你的应用程序的路由模块延迟加载错误的模块。您应该延迟加载将路由模块作为导入的功能模块：

路由：

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

功能模块：

---

<> P>关于懒惰加载特征模块的更多信息，请考虑查看.< /p>您的懒惰加载模块不应导入与特征模块相关联的路由模块，而应导入实际特征模块。（即，您应该导入路由代码中的

TestModule

，而不是延迟加载路由的

TestRoutingModule

）。功能模块是导入路由模块的模块，而不是延迟加载的代码。