angular - Angular 6 - 无法解析 AppComponent 的所有参数
问题描述
我正在尝试使用 Angular 6 构建一个应用程序,但我仍在设置所有内容。但是我的应用程序中的依赖注入似乎有问题。
它无法解析任何构造函数参数。它们都导致Uncaught Error: Can't resolve all parameters for 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 {
}
测试服务.ts
import {Injectable} from "@angular/core";
@Injectable({
providedIn: 'root'
})
export class TestService {
constructor() {
console.warn("It works!");
}
public sayHello(): string {
return "hello world!";
}
}
应用组件.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,所以我没有遗漏任何内容。
有谁看到我做错了什么?
更新
我已经简化了测试用例,并注意到它不是翻译模块。即使我创建了一个简单的服务,我也不能使用依赖注入。将服务添加到providers
列表中也不起作用(而且也不应该是必要的,因为我使用的是 Angular 6 ' provideIn: root
')。
解决方案
确保您在 polyfills 中有以下导入:
import 'core-js/es7/reflect';
推荐阅读
- jenkins - Jenkins“构建错误”对于同时构建“成功构建”的相同构建命令
- windows - 如何以编程方式缩短 Windows 文件名 - “Bitly for filenames”?
- firebase - Firebase Cloud Functions - 发送电子邮件时出错
- php - 选择字符串内特定部分中的数字
- dart - 仅在特定值上通知动画侦听器
- css - Bootstrap-无法更改导航栏徽标大小
- android - 如何将按钮放置在图像视图中的特定坐标处
- ios - 无法使用 .xib 文件将子视图加载到情节提要
- android-studio - 在 Android Studio 中运行应用程序的签名配置.json 错误(访问被拒绝)
- javascript - 如何在第二次出现特定字符后删除everyting?