我正在尝试使用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’;