我正在尝试使用Angular 6构建一个应用程序,我仍在设置所有内容.但似乎我的应用程序中的依赖注入有问题.
它无法解析任何构造函数参数.它们都导致未捕获错误:无法解析AppComponent的所有参数:(?)..即使自定义服务也会导致相同的错误.
版本(省略了对此不会产生任何影响的依赖项)
"dependencies": { "@angular/common": "6.0.5","@angular/compiler": "6.0.5","@angular/core": "6.0.5","@angular/forms": "6.0.5","@angular/http": "6.0.5","@angular/platform-browser": "6.0.5","@angular/platform-browser-dynamic": "6.0.5","@angular/router": "6.0.5","core-js": "2.5.7","reflect-Metadata": "0.1.12","rxjs": "6.2.1","zone.js": "0.8.26" },"devDependencies": { "@angular/compiler-cli": "6.0.5","@ngtools/webpack": "6.0.8","angular2-template-loader": "0.6.2","awesome-typescript-loader": "5.1.0","typescript": "2.7.2","webpack": "4.12.0","webpack-cli": "3.0.8","webpack-dev-server": "3.1.4",}
app.module.ts
@NgModule({ declarations: [ AppComponent ],imports: [ BrowserModule ],providers: [],bootstrap: [AppComponent] }) export class AppModule { }
TestService.ts
import {Injectable} from "@angular/core"; @Injectable({ providedIn: 'root' }) export class TestService { constructor() { console.warn("It works!"); } public sayHello(): string { return "hello world!"; } }
App.component.ts
import {Component} from '@angular/core'; import {TestService} from "./TestService"; @Component({ selector: 'sh-home',styleUrls: ['./home.scss'],templateUrl: './home.html' }) export class HomeComponent { constructor(testService: TestService) { testService.sayHello(); } }
在这种情况下,TestService的注入给出了错误
Main.ts
import {enableProdMode} from '@angular/core'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {AppModule} from './app/app.module'; import './assets/scss/styles.global.scss'; // Import the global scss files // Polyfills import './Polyfills'; if (process.env.NODE_ENV === 'production') { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);
Polyfills.ts
/** IE9,IE10 and IE11 requires all of the following polyfills. **/ import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ import 'classlist.js'; // Run `npm install --save classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-Metadata in JIT. If you use AOT (and only Angular decorators),you can remove. import 'core-js/es7/reflect'; /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI.
我没有使用CLI,而是使用自定义启动器.我包括所有与Angular-CLI相同的polyfill,所以我没有错过任何.
有谁看到我做错了什么?
更新
我简化了测试用例并注意到它不是翻译模块.即使我创建一个简单的服务,我也不能使用依赖注入.将服务添加到提供者列表也不起作用(也不应该是必需的,因为我使用的是Angular 6’adminIn:root’).
确保在polyfill中进行以下导入
import’core-js / es7 / reflect’;