No provider for Store! angular 2.3.x, 2.4.0 and 2.4.1

[juanlizarazo]

298 is closed but this issue is still occurring on angular 2.3.x, 2.4.0 and 2.4.1.

Error: No provider for Store! with AOT compilation.

When trying angular 2.4 make sure to run a npm cache clean before removing node_modules, then npm install. I didn't get the error until after cleaning the cache with a full fresh dependency install.

[kucharzyk]

It's working fine for me using aot and angular 2.4.2

[juanlizarazo]

@kucharzyk, does it work after you do a clean dependency install with a clean cache?

1. Remove node_modules
2. Run npm cache clean
3. npm install
4. Compile (AOT) and run app.

I did try 2.4.2 as well without success. Other people are experiencing the same issue :dizzy_face:

[kucharzyk]

@juanlizarazo I've tried the following

1. Run yarn cache clean
2. Remove node_modules
3. Run yarn install
4. Build with aot and run app

This works well for me (maybe using yarn is crutial here?)

My package.json is here https://github.com/shardis/shardis/blob/master/package.json

[juanlizarazo]

@kucharzyk I'd believe so, regarding yarn. You do have a lock file.

As we are in dev (app hasn't made it to prod just yet), we haven't used any lock mechanism (like npm shrinkwrap or yarn) to lock the versions.

I just updated my package.json to match yours (all the common deps we have, @angular, core-js, @ngrx, typescript, reselect, rxjs, zone, etc). Removed node_modules, cleaned cache, install. Still got the same error.

---

Issue #78 is related

[juanlizarazo]

@kucharzyk are you using platformBrowser() or platformBrowserDynamic()

The issue is occurring when using platformBrowser() (AOT) The issue is NOT occurring when usingplatformBrowserDynamic() (JIT)

I looked at your repo, your angular-cli config points to main.ts but it is not tracked there, so I can't tell.

Update: I found your main.ts, you are using PlatformBrowserDynamic() there, reason why you are not experiencing the issue.

The issue is with AOT compilation and bootstrapping with platformBrowser().

[bradseefeld]

@juanlizarazo, I am fairly sure (but not certain): if you are using the ng-cli, it will dynamically swap out platformBrowserDynamic for platformBrowswer when compiling for AOT (ng build --prod --aot). We have the same setup (we get the same error as you though), and from what we can tell this swapping is occurring. When the final build is loaded in the browser, platformBrowser is called.

I also cant be certain that @kucharzyk is building using ng-cli, but its in his package.json at least.

[kucharzyk]

@bradseefeld I'm using angular-cli 1.0.0-beta.24.

@juanlizarazo It automagically changes platformBrowserDynamic to platformBrowswer just like @bradseefeld wrote

[juanlizarazo]

Thanks @bradseefeld @kucharzyk I did see the cli switches it here

I can run your project too just fine in AOT mode with ng serve --prod. Now I am really confused why some of us have this issue :dizzy_face: :dizzy_face:

[kucharzyk]

I've tried to use npm instead of yarn.

Using node 7.4.0 and npm 4.0.5 I've built working aot application. After npm cache clean and removing node_modules I've tried to install and build again It still works...

What am I doing wrong?

[bradseefeld]

ng serve --prod --aot or ng build --aot --prod. Not specifying --aot will not actually use AOT :) AFAIK the --prod just does some mangling and gzipping.

Likewise you can drop the --prod from both to continue using dev environment variables if that is easier. Just make sure --aot remains.

@kucharzyk, are you saying its working now?

[bradseefeld]

@kucharzyk, can you confirm exactly which command you are using to build and/or serve?

[juanlizarazo]

@bradseefeld my bad To clarify, for @kucharzyk, it has always worked. His project doesn't present this issue (No provider for Store!) when using ng serve --aot --prod. I cloned it, just run it, all good.

Mine presents the issue with AOT, since upgrading to angular 2.3.x 2.4.x I don't use angular cli.

[kucharzyk]

@bradseefeld That's my scripts

  "scripts": {
    "clean:dist": "rimraf src/main/resources/static/*",
    "prebuild:prod": "yarn run clean:dist",
    "build:prod": "ng build -prod --aot --sourcemap=false --progress=false",

    "server:prod": "ng serve --p 4200 -pc proxy.json --watcher=events -prod --aot --open --progress=false",
  },

I use yarn run build:prod to build and for test just http-server for serving

I've tried also yarn run server:prod to serving in aot mode

[bradseefeld]

Gotcha, thanks!

@juanlizarazo, can we share our dependency lists to see if its perhaps something being caused there?

Ours:

"dependencies": {
    "@angular/common": "2.3.1",
    "@angular/compiler": "2.3.1",
    "@angular/core": "2.3.1",
    "@angular/forms": "2.3.1",
    "@angular/http": "2.3.1",
    "@angular/platform-browser": "2.3.1",
    "@angular/platform-browser-dynamic": "2.3.1",
    "@angular/router": "3.3.1",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "2.0.0",
    "@ngrx/router-store": "1.2.5",
    "@ngrx/store-devtools": "3.2.2",
    "@ngrx/store-log-monitor": "3.0.2",
    "@ngrx/store": "2.2.1",
    "angular2-cookie": "1.2.6",
    "angular2-modal": "2.0.2",
    "awesome-bootstrap-checkbox": "0.3.7",
    "bootstrap-sass": "3.3.7",
    "chart.js": "2.4.0",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "log4ts": "0.4.2",
    "ng2-bootstrap": "1.1.16-7",
    "ng2-charts": "1.4.4",
    "ng2-popover": "0.0.13",
    "ng2-select": "1.1.2",
    "ng2-translate": "4.0.0",
    "primeng": "1.1.3",
    "raven-js": "3.9.1",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.1",
    "ts-helpers": "1.1.2",
    "zone.js": "0.7.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.52",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "2.0.0-beta.3",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage": "1.0.0",
    "karma-jasmine": "1.1.0",
    "karma-phantomjs-launcher": "1.0.0",
    "karma-remap-istanbul": "0.4.0",
    "karma-mocha-reporter": "2.0.3",
    "phantomjs-prebuilt": "2.1.7",
    "protractor": "4.0.13",
    "ts-node": "1.2.1",
    "tslint": "4.1.1",
    "tslint-loader": "3.3.0",
    "typescript": "2.0.0",
    "webdriver-manager": "10.2.10"
  }

[juanlizarazo]

Yep! Here @bradseefeld:

 "dependencies": {
    "@angular/common": "2.4.2",
    "@angular/core": "2.4.2",
    "@angular/http": "2.4.2",
    "@angular/platform-browser": "2.4.2",
    "@angular/platform-server": "2.4.2",
    "@angular/router": "3.4.2",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "2.0.0",
    "@ngrx/store": "2.2.1",
    "core-js": "2.4.1",
    "lodash": "~4.16.6",
    "ngrx-store-freeze": "^0.1.6",
    "reflect-metadata": "~0.1.8",
    "reselect": "2.5.4",
    "rxjs": "5.0.3"
  },
  "devDependencies": {
    "@angular/compiler": "2.4.2",
    "@angular/compiler-cli": "2.4.2",
    "@angular/platform-browser-dynamic": "2.4.2",
    "@ngrx/store-devtools": "3.2.2",
    "@types/electron": "~1.4.24",
    "@types/jasmine": "~2.2.34",
    "@types/karma": "~0.13.33",
    "@types/lodash": "~4.14.38",
    "@types/node": "~6.0.45",
    "@types/reselect": "~2.0.27",
    "@types/zone.js": "0.0.27",
    "asar": "~0.12.3",
    "babel-polyfill": "~6.16.0",
    "babel-preset-es2015": "~6.18.0",
    "babel-preset-stage-0": "~6.16.0",
    "babili": "0.0.8",
    "codelyzer": "2.0.0-beta.2",
    "concurrently": "2.2.0",
    "gulp": "~3.9.1",
    "gulp-babel": "~6.1.2",
    "gulp-clean": "~0.3.2",
    "gulp-clean-css": "~2.0.13",
    "gulp-concat": "~2.6.1",
    "gulp-date-rev": "0.0.5",
    "gulp-file": "~0.3.0",
    "gulp-htmlmin": "~3.0.0",
    "gulp-merge-json": "~0.6.0",
    "gulp-rename": "~1.2.2",
    "gulp-rollup": "~2.5.1",
    "gulp-run": "~1.7.1",
    "gulp-sass": "~2.3.2",
    "gulp-uglify": "~2.0.0",
    "gulp-util": "~3.0.7",
    "gulp-zip": "~3.2.0",
    "jasmine-core": "~2.2.0",
    "karma": "~1.3.0",
    "karma-chrome-launcher": "~2.0.0",
    "karma-coverage": "~1.1.1",
    "karma-html-reporter": "~0.2.7",
    "karma-jasmine": "~1.0.2",
    "karma-mocha-reporter": "~2.1.0",
    "karma-typescript-preprocessor": "~0.2.1",
    "merge-stream": "~1.0.0",
    "node-sass": "~3.8.0",
    "normalize-scss": "~5.0.3",
    "pump": "~1.0.1",
    "remap-istanbul": "~0.6.4",
    "rollup": "~0.36.4",
    "rollup-plugin-alias": "~1.2.0",
    "rollup-plugin-commonjs": "~5.0.5",
    "rollup-plugin-node-resolve": "~2.0.0",
    "rollup-plugin-replace": "~1.1.1",
    "rollup-plugin-typescript": "~0.8.1",
    "rollup-plugin-uglify": "~1.0.1",
    "rollup-watch": "~2.5.0",
    "run-sequence": "~1.2.2",
    "source-map-explorer": "~1.3.2",
    "stylelint": "~7.2.0",
    "stylelint-config-standard": "~13.0.0",
    "tassign": "~1.0.0",
    "tslint": "4.0.2",
    "typescript": "2.1.4",
    "zone.js": "0.7.2"
  }

[juanlizarazo]

@bradseefeld try with angular 2.4.2

The issue was known on 2.3.x, supposedly fixed on 2.4.x Could you please try 2.4.2 and then post the results?

[bradseefeld]

I've tried on 2.4.0 and 2.4.1, same result. Im trying on 2.4.2 now but getting some build errors unrelated to ngrx. May take me a while to resolve... I'll let you know.

[bradseefeld]

2.4.2 works! We had some errors with other packages, but after fixing those, ng serve --aot is working.

"dependencies": {
    "@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.4.2",
    "@angular/platform-browser-dynamic": "2.4.2",
    "@angular/router": "3.4.2",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "2.0.0",
    "@ngrx/router-store": "1.2.5",
    "@ngrx/store-devtools": "3.2.2",
    "@ngrx/store-log-monitor": "3.0.2",
    "@ngrx/store": "2.2.1",
    "angular2-cookie": "1.2.6",
    "angular2-modal": "https://github.com/davidloiret/angular2-modal/tarball/release",
    "awesome-bootstrap-checkbox": "0.3.7",
    "bootstrap-sass": "3.3.7",
    "chart.js": "2.4.0",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "log4ts": "0.4.2",
    "ng2-bootstrap": "1.1.16-7",
    "ng2-charts": "1.4.4",
    "ng2-popover": "0.0.13",
    "ng2-select": "1.1.2",
    "ng2-translate": "4.0.0",
    "primeng": "1.1.3",
    "raven-js": "3.9.1",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.1",
    "ts-helpers": "1.1.2",
    "zone.js": "0.7.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.2",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.52",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "2.0.0-beta.3",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage": "1.0.0",
    "karma-jasmine": "1.1.0",
    "karma-phantomjs-launcher": "1.0.0",
    "karma-remap-istanbul": "0.4.0",
    "karma-mocha-reporter": "2.0.3",
    "phantomjs-prebuilt": "2.1.7",
    "protractor": "4.0.13",
    "ts-node": "1.2.1",
    "tslint": "4.1.1",
    "tslint-loader": "3.3.0",
    "typescript": "2.0.0",
    "webdriver-manager": "10.2.10"
  }

[juanlizarazo]

That's great news @bradseefeld!

So in that case, it seems it is isolated now to my project. I will stick with 2.4.2 and debug until I figure out what's happening with my project. Knowing that 2.4.2 should work is great help!

I'll close the issue and in the future post whatever fix applies to my project in case anyone else runs into it.

[juanlizarazo]

Thanks @kucharzyk @bradseefeld for looking into it.

[bradseefeld]

np, @juanlizarazo. This helped us get it resolved too. Best of luck!