在Angular 5的帮助下渲染页面时出错
在Angular 5的帮助下渲染页面时出错
提问于 2018-06-08 22:23:37
我在Angular 5的帮助下做了一个项目，我在里面调用了一个API。
我收到以下错误：
Error: StaticInjectorError(AppModule)[Router -> ApplicationRef]:
StaticInjectorError(Platform: core)[Router -> ApplicationRef]:
NullInjectorError: No provider for ApplicationRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:951)
at resolveToken (core.js:1195)
at tryResolveToken (core.js:1140)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1035)
at resolveToken (core.js:1195)
at tryResolveToken (core.js:1140)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1035)
at resolveNgModuleDep (core.js:8071)
at _callFactory (core.js:8143)
at _createProviderInstance$1 (core.js:8091)我的Package.json是：
{
"name": "demo-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.8",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}我的app.module.ts如下所示，其中我给出了一个路由"fetch“并调用相应的控制器。
import { NgModule } from '@angular/core';
import { FetchApiComponent } from './fetch-api/fetch-api.component';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'fetch', component: FetchApiComponent },
];
@NgModule({
declarations: [
FetchApiComponent
],
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
providers: [],
bootstrap: []
})
export class AppModule { }main.ts如下所示
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));它显示错误是由于以下代码而由main.ts文件抛出的。
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));错误的屏幕截图：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-08 23:27:01
要获得预期结果而不出错，请导入BrowserModule
import { NgModule } from '@angular/core';
import { FetchApiComponent } from './fetch-api/fetch-api.component';
import { Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
const routes: Routes = [
{ path: 'fetch', component: FetchApiComponent },
];
@NgModule({
declarations: [
FetchApiComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
providers: [],
bootstrap: []
})
export class AppModule { }可供参考的代码示例- https://stackblitz.com/edit/angular-2xbbzj?file=src/app/app.module.ts
注意：从导入中删除BrowserModule以查看相同的错误
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50762751
复制相关文章
相似问题