Angular 6 - can't resolve all parameters for AppComponent
Solution 1
Make sure you have following import in polyfills:
import 'core-js/es7/reflect';
Solution 2
I also got this issue but setting emitDecoratorMetadata": true in tsconfig solve the issue. Remember to restart the server.
tsconfig.spec.json
"compilerOptions": {
"emitDecoratorMetadata": true,
"outDir": "./out-tsc/spec",
}
Solution 3
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 :)
Solution 4
@Inject did the trick for me
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();
}
}
Solution 5
GET /
or compiler error can't resolve all parameters for ApplicationModule: (?).
Just follow these simple steps :
- Install core-js modeule.
npm i core-js
- In the
polyfills.ts
file add the import statement
import 'core-js/es7/reflect';
- In
main.ts
file add the import statements
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
Mr.wiseguy
Updated on February 12, 2021Comments
-
Mr.wiseguy over 3 years
I am trying to build an application with Angular 6 and I am still setting everything up. 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: (?).
. 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
@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(); } }
The injection of the
TestService
gives the error in this case
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.
I am not using the CLI, but a custom starter. I included all the same polyfills as Angular-CLI does, so I am not missing any.
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
').