Angular-cli: "Unhandled Promise rejection: No provider for ApplicationRef!", While upgrading to angular-cli

[ManishKrShukla]

OS?

Windows 10

Versions.

angular-cli: 1.0.0-beta.24
node: 6.7.0
os: win32 x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/platform-browser: 2.
@angular/platform-browser-dyn
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2

package.json.

{
"name": "manish",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve --proxy-config proxy.conf.json",
"lint": "tslint \"src/*/.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.4.0",
"@angular/compiler": "^2.4.0",
"@angular/core": "^2.4.0",
"@angular/forms": "^2.4.0",
"@angular/http": "^2.4.0",
"@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0",
"@angular/router": "~3.4.0",
"bootstrap": "^4.0.0-alpha.3",
"bourbon": "^4.2.7",
"core-js": "^2.4.1",
"d3": "^3.5.13",
"d3-tip": "^0.7.1",
"draggable": "^4.1.1",
"es6-module-loader": "^0.17.8",
"es6-promise": "^3.1.2",
"es6-shim": "0.35.0",
"font-awesome": "^4.7.0",
"jquery": "^2.2.0",
"jquery-ui-dist": "^1.12.1",
"jstree": "^3.2.1",
"lodash": "^4.5.1",
"moment": "^2.13.0",
"ng2-bootstrap": "^1.1.16",
"ng2-pipes": "^0.4.16",
"ng2-select": "^1.1.2",
"ng2-slim-loading-bar": "^2.0.4",
"ng2-translate": "^1.4.1",
"redux": "^3.3.1",
"reflect-metadata": "0.1.2",
"rxjs": "^5.0.1",
"select2": "^4.0.3",
"systemjs": "0.19.26",
"tether": "^1.3.8",
"toastr": "^2.1.2",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5",
"redux": "^3.3.1",
"serve-static": "^1.10.2",
"sidr": "^2.2.1",
"slash": "~1.0.0",
"socket.io": "^1.4.8",
"stream-series": "^0.1.1",
"stylelint": "^6.3.3",
"stylelint-config-standard": "^6.0.0",
"systemjs-builder": "^0.15.14",
"tildify": "^1.2.0",
"tiny-lr": "^0.2.1",
"traceur": "^0.0.91",
"tslint-stylish": "2.1.0-beta",
"typedoc": "^0.3.12",
"typings": "^0.7.12",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"walk": "^2.3.9",
"yargs": "^4.2.0"
}
}

Repro steps.

This app was originally created using angular-seed project. Then, as i tried using angular-cli, i was able to resolve all the errors thrown. However, the final error in the developer console shows, Unhandled Promise rejection: No provider for ApplicationRef!, Although ApplicationRef is not being used anywhere through the app.

The log given by the failure.

Unhandled Promise rejection: No provider for ApplicationRef! ; Zone: ; Task: Promise.then ; Value: NoProviderError {_nativeError: Error: No provider for ApplicationRef!
at NoProviderError.BaseError [as constructor] (http://loc…, keys: Array[1], injectors: Array[1]} Error: DI Error
at NoProviderError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:7096:27) [angular]
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor.bundle.js:60355:16) [angular]
at new NoProviderError (http://localhost:4200/vendor.bundle.js:60404:16) [angular]
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:83158:19) [angular]
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:83195:25) [angular]
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:83145:25) [angular]
at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:82907:21) [angular]
at AppModuleInjector.get (/AppModule/module.ngfactory.js:401:88) [angular]
at AppModuleInjector.createInternal (/AppModule/module.ngfactory.js:454:61) [angular]
at AppModuleInjector.NgModuleInjector.create (http://localhost:4200/vendor.bundle.js:61241:76) [angular]
at NgModuleFactory.create (http://localhost:4200/vendor.bundle.js:61209:18) [angular]
at http://localhost:4200/vendor.bundle.js:42032:61 [angular]
at Object.onInvoke (http://localhost:4200/vendor.bundle.js:32208:37) [angular]
consoleError @ VM1990:405
_loop_1 @ VM1990:434
drainMicroTaskQueue @ VM1990:438
F @ VM1988:4
H @ VM1988:4
q.when @ VM1988:4
T.run @ VM1988:4
t._drain @ VM1988:4
drain @ VM1988:4
e @ VM1988:4
VM1990:407 Error: Uncaught (in promise): Error: No provider for ApplicationRef!
Error: DI Error
at NoProviderError.BaseError [as constructor] (vendor.bundle.js:7096) [angular]
at NoProviderError.AbstractProviderError [as constructor] (vendor.bundle.js:60355) [angular]
at new NoProviderError (vendor.bundle.js:60404) [angular]
at ReflectiveInjector_._throwOrNull (vendor.bundle.js:83158) [angular]
at ReflectiveInjector_._getByKeyDefault (vendor.bundle.js:83195) [angular]
at ReflectiveInjector_._getByKey (vendor.bundle.js:83145) [angular]
at ReflectiveInjector_.get (vendor.bundle.js:82907) [angular]
at AppModuleInjector.get (module.ngfactory.js:401) [angular]
at AppModuleInjector.createInternal (module.ngfactory.js:454) [angular]
at AppModuleInjector.NgModuleInjector.create (vendor.bundle.js:61241) [angular]
at NgModuleFactory.create (vendor.bundle.js:61209) [angular]
at :4200/vendor.bundle.js:42032:61 [angular]
at Object.onInvoke (vendor.bundle.js:32208) [angular]
at NoProviderError.BaseError [as constructor] (vendor.bundle.js:7096) [angular]
at NoProviderError.AbstractProviderError [as constructor] (vendor.bundle.js:60355) [angular]
at new NoProviderError (vendor.bundle.js:60404) [angular]
at ReflectiveInjector_._throwOrNull (vendor.bundle.js:83158) [angular]
at ReflectiveInjector_._getByKeyDefault (vendor.bundle.js:83195) [angular]
at ReflectiveInjector_._getByKey (vendor.bundle.js:83145) [angular]
at ReflectiveInjector_.get (vendor.bundle.js:82907) [angular]
at AppModuleInjector.get (module.ngfactory.js:401) [angular]
at AppModuleInjector.createInternal (module.ngfactory.js:454) [angular]
at AppModuleInjector.NgModuleInjector.create (vendor.bundle.js:61241) [angular]
at NgModuleFactory.create (vendor.bundle.js:61209) [angular]
at :4200/vendor.bundle.js:42032:61 [angular]
at Object.onInvoke (vendor.bundle.js:32208) [angular]
at resolvePromise (eval at module.exports (addScript.js:9), :486:31) []
at eval (eval at module.exports (addScript.js:9), :523:17) []
at Zone.runTask (eval at module.exports (addScript.js:9), :151:47) [ => ]
at drainMicroTaskQueue (eval at module.exports (addScript.js:9), :418:35) []
at F (eval at module.exports (addScript.js:9), :4:7484) []
at H (eval at module.exports (addScript.js:9), :4:7116) []
at q.when (eval at module.exports (addScript.js:9), :4:10790) []
at T.run (eval at module.exports (addScript.js:9), :4:11899) []
at t._drain (eval at module.exports (addScript.js:9), :4:1744) []
at drain (eval at module.exports (addScript.js:9), :4:1398) []
at MutationObserver.e (eval at module.exports (addScript.js:9), :4:3319) []

Mention any other details that might be useful.

This defines just the structure, actual imports are stripped off.

app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { HttpModule } from '@angular/http';
import { Http, XHRBackend, RequestOptions } from '@angular/http';

import { DatepickerModule } from 'ng2-bootstrap/components/datepicker';

import { ROUTES_MAIN } from './utils/constants/router-config.constants';
//import "rxjs/Rx";

@NgModule({
imports: [CommonModule, FormsModule, ReactiveFormsModule, HttpModule,
RouterModule.forRoot(ROUTES_MAIN),
SelectModule, DatepickerModule, SlimLoadingBarModule.forRoot()
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [],

providers: [

],

entryComponents: [
],
bootstrap: [AppComponent]
})

export class AppModule {}

// bootstrap our app
// platformBrowserDynamic().bootstrapModule(AppModule)
// .catch((err: any) => console.error(err));

[Meligy]

This is more of a StackOverflow question than a Github issue.

My guess for errores like these in general would be that some module requires calling .forRoot() or some specific provider syntax and it's not used.

For your specific code, I can see your AppModule is adding CommonModule to its @NgModule() imports instead of BrowserModule. This might be the problem.

Generally speaking, it might be much easier to create a new CLI app, and move your stuff into it, instead of using ng init in your existing app.

[filipesilva]

I agree with @Meligy that this is more of a SO question than an issue. I'm sorry but I will have to close it.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}