我正在尝试使用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
}
}
目前我尝试过:
- 将CommonModule添加到惰性加载的模块和AppModule中(无效)
- 将Angular更新到Angular 11.2.0版本(无效)
我已检查了core.js中的getPipeDef$1函数,发现registry为null(请参见图片):
有什么方法可以解决这个问题吗?谢谢。
TestModule
而不是TestRoutingModule
)。你的特性模块是导入路由模块的模块,而不是惰性加载的代码。 - Edric