[英]Angular 6 - can't resolve all parameters for AppComponent
I am trying to build an application with Angular 6 and I am still setting everything up.我正在尝试使用 Angular 6 构建一个应用程序,但我仍在设置所有内容。 But it seems there is something wrong with the dependency injection in my app.但我的应用程序中的依赖注入似乎有问题。
It cannot resolve any constructor parameter.它无法解析任何构造函数参数。 They all result in Uncaught Error: Can't resolve all parameters for AppComponent: (?).
它们都会导致Uncaught Error: Can't resolve all parameters for AppComponent: (?).
. . Even a custom service results in the same error.即使是自定义服务也会导致相同的错误。
Versions (omitted the dependencies that can't have any influence on this)版本(省略不能对此产生任何影响的依赖项)
"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 app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
TestService.ts测试服务.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 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();
}
}
The injection of the TestService
gives the error in this case在这种情况下, 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 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.
I am not using the CLI, but a custom starter.我没有使用 CLI,而是使用自定义启动器。 I included all the same polyfills as Angular-CLI does, so I am not missing any.我包含了与 Angular-CLI 相同的所有 polyfill,所以我没有遗漏任何一个。
Does anyone see what I am doing wrong?有没有人看到我做错了什么?
Update更新
I've simplified the test case and noticed that it is not the translation module.我已经简化了测试用例并注意到它不是翻译模块。 Even if I create a simple service I cannot use dependency injection.即使我创建了一个简单的服务,我也不能使用依赖注入。 Adding the service to the providers
list doesn't work either (and also shouldn't be necessary, since I am using the Angular 6 ' provideIn: root
').将服务添加到providers
列表也不起作用(也不应该是必要的,因为我使用的是 Angular 6 ' provideIn: root
')。
确保在 polyfill 中有以下导入:
import 'core-js/es7/reflect';
I also got this issue but setting emitDecoratorMetadata": true in tsconfig solve the issue. Remember to restart the server.我也遇到了这个问题,但是在 tsconfig 中设置emitDecoratorMetadata": true可以解决这个问题。记得重启服务器。
tsconfig.spec.json tsconfig.spec.json
"compilerOptions": {
"emitDecoratorMetadata": true,
"outDir": "./out-tsc/spec",
}
I resolved this error by just restarting app.我通过重新启动应用程序解决了这个错误。 build it again and run it, it's works fine for me.再次构建并运行它,它对我来说很好用。 Please check and tell me.请检查并告诉我。
Thanks :)谢谢 :)
@Inject did the trick for me @Inject 帮我解决了这个问题
import {Component, Inject} from '@angular/core';
import {TestService} from "./TestService";
@Component({
selector: 'sh-home',
styleUrls: ['./home.scss'],
templateUrl: './home.html'
})
export class HomeComponent {
constructor(@Inject(TestService) testService: TestService) {
testService.sayHello();
}
}
GET /
or compiler error can't resolve all parameters for ApplicationModule: (?).
GET /
或编译器错误can't resolve all parameters for ApplicationModule: (?).
Just follow these simple steps :只需按照以下简单步骤操作:
npm i core-js
polyfills.ts
file add the import statement在polyfills.ts
文件中添加 import 语句import 'core-js/es7/reflect';
main.ts
file add the import statements在main.ts
文件中添加导入语句import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
You could try making the below changes:您可以尝试进行以下更改:
import {Component} from '@angular/core';
import {TestService} from "./TestService";
@Component({
selector: 'sh-home',
styleUrls: ['./home.scss'],
templateUrl: './home.html',
viewProviders: [TestService]
})
export class HomeComponent {
constructor(private testService: TestService) {
this.testService.sayHello();
}
}
viewProviders creates a special injector that resolves dependencies only for this component. viewProviders创建了一个特殊的注入器,它只为这个组件解析依赖项。
I received the same error on Angular 8 app我在 Angular 8 应用程序上收到了同样的错误
Can't resolve all parameters for AppComponent: (?,?,?)无法解析 AppComponent 的所有参数:(?,?,?)
after changing 1 parameter type in the constructor().在构造函数()中更改 1 个参数类型后。
I solved the problem by stop and restarting the app.我通过停止并重新启动应用程序解决了这个问题。
I had the same issue with a component in Angular 8. The constructor had multiple services as parameters.我在 Angular 8 中的一个组件中遇到了同样的问题。构造函数有多个服务作为参数。
eg,例如,
constructor(
private router: Router,
private fooService: FooService,
private barService: BarService,
private fubarService: FoobarService,
private anotherService: AnotherService)
{}
Experimenting with @Inject()
, some parameters will take it, but others will not.尝试使用@Inject()
,一些参数会接受它,但其他参数不会。 They will complain about the parameter type.他们会抱怨参数类型。
The common thing about FooService, BarService and FubarService
was they were physically in the same directory. FooService, BarService and FubarService
是它们在物理上位于同一目录中。 I created some subdirectories and put one service in each sub-directory -- and the compiler error went away.我创建了一些子目录并在每个子目录中放置了一个服务——编译器错误消失了。
A blog post said forwardRef worked for them. 一篇博客文章说forwardRef为他们工作。 It did not work for me.它对我不起作用。 However, their article provided insight into what might be going on.然而,他们的文章提供了对可能发生的事情的洞察。
Edited to add:编辑添加:
In two other cases, the above wouldn't work.在另外两种情况下,上述方法不起作用。 In one case, changing the import of the service from full path ( src/app/...
) to relative path removed the compiler complaint (go figure).在一种情况下,将服务的导入从完整路径( src/app/...
)更改为相对路径消除了编译器投诉(如图)。 In the second case, adding @Inject(ServiceName) public service: ServiceName
resolved the issue.在第二种情况下,添加@Inject(ServiceName) public service: ServiceName
解决了问题。
In all of the above cases, an Ionic 5 project that uses Angular had no compilation complaints.在上述所有情况下,使用 Angular 的 Ionic 5 项目没有编译投诉。 The Ionic project is using Angular 8.2.14. Ionic 项目使用的是 Angular 8.2.14。 The Angular project is using 8.2.0 (defaults of the respective CLIs when I created the projects). Angular 项目使用的是 8.2.0(我创建项目时各个 CLI 的默认值)。
Looks like some bug is lurking somewhere...看起来某个地方潜伏着一些错误......
I also experienced the same issue with Angular 8.2.13 + Typescript.我也遇到了与 Angular 8.2.13 + Typescript 相同的问题。 Finally the trick was to use a @Inject('RefOnlyUsedForTesting')
, even if the type is string
.最后的诀窍是使用@Inject('RefOnlyUsedForTesting')
,即使类型是string
。
export abstract class MyBaseClass {
....
constructor(@Inject(ElementRef) elementRef: ElementRef,
@Optional() @Inject('RefOnlyUsedForTesting') dep1: MyObject,
@Optional() @Inject('RefOnlyUsedForTesting') dep2: string,
@Optional() @Inject('RefOnlyUsedForTesting') dep3: string) {
super();
...
}
}
如果你使用 webpack 和 babel 来构建 Angular,你很可能缺少这个 babel 插件:babel-plugin-transform-typescript-metadata
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.