Error after upgrade to Angular 5

[bencameron00]

After upgrading to Ng5 my application throws an error when loading in the browser.

My setup worked fine on the 4.x version of Angular.

The error text is...

compiler.umd.js?9df7:509 Uncaught Error: Can't resolve all parameters for CoolLocalStorage: (?).
    at syntaxError (eval at <anonymous> (app.js:99), <anonymous>:509:34)
    at CompileMetadataResolver._getDependenciesMetadata (eval at <anonymous> (app.js:99), <anonymous>:15587:35)
    at CompileMetadataResolver._getTypeMetadata (eval at <anonymous> (app.js:99), <anonymous>:15422:26)
    at CompileMetadataResolver._getInjectableMetadata (eval at <anonymous> (app.js:99), <anonymous>:15402:21)
    at CompileMetadataResolver.getProviderMetadata (eval at <anonymous> (app.js:99), <anonymous>:15762:40)
    at eval (eval at <anonymous> (app.js:99), <anonymous>:15673:49)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (eval at <anonymous> (app.js:99), <anonymous>:15633:19)
    at CompileMetadataResolver.getNgModuleMetadata (eval at <anonymous> (app.js:99), <anonymous>:15203:50)
    at JitCompiler._loadModules (eval at <anonymous> (app.js:99), <anonymous>:33527:87)
    at JitCompiler._compileModuleAndComponents (eval at <anonymous> (app.js:99), <anonymous>:33488:36)
    at JitCompiler.compileModuleAsync (eval at <anonymous> (app.js:99), <anonymous>:33404:37)
    at CompilerImpl.compileModuleAsync (eval at <anonymous> (app.js:93), <anonymous>:261:49)
    at PlatformRef.bootstrapModule (eval at <anonymous> (app.js:105), <anonymous>:5482:25)
    at Object.eval (eval at <anonymous> (app.js:87), <anonymous>:20:53)
    at eval (eval at <anonymous> (app.js:87), <anonymous>:22:30)
    at Object.<anonymous> (app.js:87)
    at __webpack_require__ (polyfills.js:53)
    at Object.<anonymous> (app.js:6)
    at __webpack_require__ (polyfills.js:53)
    at webpackJsonpCallback (polyfills.js:24)
    at app.js:1

[Hacklone]

The latest version: 3.1.2 should fix this. Let me know if it fixed for u :)

[bencameron00]

Hi Hacklone. I am using 3.1.2 and still see the error. Here is a copy of my dependencies...

 "dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/platform-server": "5.0.0",
    "@angular/router": "5.0.0",
    "angular2-cool-storage": "3.1.2",
    "angular2-highcharts": "^0.5.5",
    "bootstrap": "^3.3.6",
    "dragula": "^3.7.2",
    "file-saver": "^1.3.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.0",
    "lodash": "^4.17.4",
    "moment": "^2.19.1",
    "ng2-dragula": "^1.5.0",
    "ng2-page-scroll": "^4.0.0-beta.9",
    "ng2-sticky-kit": "4.1.3",
    "ngx-bootstrap": "^1.9.1",
    "primeng": "^4.2.2",
    "rxjs": "^5.5.0",
    "signalr": "^2.2.2",
    "wijmo": "./NpmImages/wijmo-amd-min",
    "zone.js": "^0.8.18"
  },

Did I need to make any code changes when upgrading to 3.1.2?

[Hacklone]

Hmm, no 3.1.2 should work fine with angular 5... Can you debug which parameter angular is missing? (Can’t resolve all parameters for CoolLocalStorage)

[bencameron00]

Would it be something to do with how I'm setting up the module?

In my app.module.ts I'm doing this...

import { CoolLocalStorage } from 'angular2-cool-storage';

// services

providers: [appRoutingProviders,
...
CoolLocalStorage
]
})

Then in my component...

import { CoolLocalStorage } from 'angular2-cool-storage';

constructor(... private localStorage: CoolLocalStorage, ...) { }

Does that look correct to you? It used to work like this.

Thanks Ben

[anvial]

Hi, All

I also have the error on angular 5 with angular2-cool-storage 3.1.2

Unexpected value 'CoolStorageModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:466)
    at compiler.js:15088
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/esm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15071)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._loadModules (compiler.js:33484)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:33445)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:33361)
    at CompilerImpl.webpackJsonp.../../../platform-browser-dynamic/esm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230)
    at PlatformRef.webpackJsonp.../../../core/esm5/core.js.PlatformRef.bootstrapModule (core.js:5443)
    at Object.../../../../../src/main.ts (main.ts:11)

Do you find the solution?

[petterhoel]

I'm having the same issue as @anvial, any suggestions?

[MvS-IT]

apparently we need something like this: @NgModule({ .... }) export class CoolStorageModule{ } But in what file? index.d.ts? Hopefully Hacklone provides an updated version.

[nelsonBlack]

any solution please , bumped into the same problem

[petterhoel]

@nelsonBlack Sorry to say I haven't worked out the solution yet. @Hacklone : any suggestions, please?

[nelsonBlack]

@petterhoel i got a work around to use while waiting for the fix by downgrading to coolstorage version 3.1.0 , delete the version of coolstorage you have -->npm uninstall angular2-cool-storage then in package.json dependencies add --->"angular2-cool-storage": "3.1.0", then npm install

[Hacklone]

I reverted the typescript version to 2.4.2 in the latest version: 3.1.3. Did that fix the problem for you?

[petterhoel]

@Hacklone Works on my machine 👍 :) Thanks!!!