Angular 5.0.2 confusing Promise class definitions in PhpStorm + ERROR on --prod

Question

I have an Angular app and using PhpStorm. After Updating to Angular 5 (via npm etc..) I have some confusing problems.

All Promise<MyClass> are marked as error cause "Promise is not generic"

On checking the Promise class I got the choice between an interface and a class inside an "index.d.ts". (in node_modules of Promises_es6 and @jquery) How ever both are generic.

I have obviously an error in my config. Can someone help me finding it?

Here are the configs:

package.json:

{
  "name": "my-site",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.1",
    "@angular/animations": "^5.0.1",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^5.0.1",
    "@angular/compiler": "^5.0.1",
    "@angular/core": "^5.0.1",
    "@angular/forms": "^5.0.1",
    "@angular/http": "^5.0.1",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^5.0.1",
    "@angular/platform-browser-dynamic": "^5.0.1",
    "@angular/router": "^5.0.1",
    "@types/es6-promise": "0.0.33",
    "ap-angular2-fullcalendar": "^1.3.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "material-design-icons": "^3.0.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.2",
    "@angular/compiler-cli": "^5.0.1",
    "@angular/language-service": "^5.0.1",
    "@types/jasmine": "~2.6.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~8.0.51",
    "codelyzer": "~4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.2.0",
    "ts-node": "~3.3.0",
    "tslint": "~5.8.0",
    "typescript": "^2.4.2",
    "uglifyjs-webpack-plugin": "^1.0.1"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ESNext", 
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

EDIT: Promise cause error on --prod build (dev build works)

After buildin --prod mode. Everything runs well. On accessing the site, the screen stays blank and this error appears in console:

main.3933c1a670523b7e59b4.bundle.js:1 ERROR TypeError: Cannot read property '_moduleDoBootstrap' of undefined
    at e.donePromise.then (main.3933c1a670523b7e59b4.bundle.js:1)
    at e.invoke (polyfills.20052382fb9ecf29cee5.bundle.js:1)
    at Object.onInvoke (main.3933c1a670523b7e59b4.bundle.js:1)
    at e.invoke (polyfills.20052382fb9ecf29cee5.bundle.js:1)
    at r.run (polyfills.20052382fb9ecf29cee5.bundle.js:1)
    at polyfills.20052382fb9ecf29cee5.bundle.js:1
    at e.invokeTask (polyfills.20052382fb9ecf29cee5.bundle.js:1)
    at Object.onInvokeTask (main.3933c1a670523b7e59b4.bundle.js:1)
    at e.invokeTask (polyfills.20052382fb9ecf29cee5.bundle.js:1)
    at r.runTask (polyfills.20052382fb9ecf29cee5.bundle.js:1)
(anonymous) @ main.3933c1a670523b7e59b4.bundle.js:1
handleError @ main.3933c1a670523b7e59b4.bundle.js:1
t.runOutsideAngular @ main.3933c1a670523b7e59b4.bundle.js:1
e.invoke @ polyfills.20052382fb9ecf29cee5.bundle.js:1
r.run @ polyfills.20052382fb9ecf29cee5.bundle.js:1
runOutsideAngular @ main.3933c1a670523b7e59b4.bundle.js:1
n.catch.n @ main.3933c1a670523b7e59b4.bundle.js:1
e.invoke @ polyfills.20052382fb9ecf29cee5.bundle.js:1
onInvoke @ main.3933c1a670523b7e59b4.bundle.js:1
e.invoke @ polyfills.20052382fb9ecf29cee5.bundle.js:1
r.run @ polyfills.20052382fb9ecf29cee5.bundle.js:1
(anonymous) @ polyfills.20052382fb9ecf29cee5.bundle.js:1
e.invokeTask @ polyfills.20052382fb9ecf29cee5.bundle.js:1
onInvokeTask @ main.3933c1a670523b7e59b4.bundle.js:1
e.invokeTask @ polyfills.20052382fb9ecf29cee5.bundle.js:1
r.runTask @ polyfills.20052382fb9ecf29cee5.bundle.js:1
o @ polyfills.20052382fb9ecf29cee5.bundle.js:1
Promise resolved (async)
r @ polyfills.20052382fb9ecf29cee5.bundle.js:1
e.scheduleTask @ polyfills.20052382fb9ecf29cee5.bundle.js:1
onScheduleTask @ polyfills.20052382fb9ecf29cee5.bundle.js:1
e.scheduleTask @ polyfills.20052382fb9ecf29cee5.bundle.js:1
r.scheduleTask @ polyfills.20052382fb9ecf29cee5.bundle.js:1
r.scheduleMicroTask @ polyfills.20052382fb9ecf29cee5.bundle.js:1
c @ polyfills.20052382fb9ecf29cee5.bundle.js:1
e.then @ polyfills.20052382fb9ecf29cee5.bundle.js:1
appInitializer @ main.3933c1a670523b7e59b4.bundle.js:1
runInitializers @ main.3933c1a670523b7e59b4.bundle.js:1
n @ main.3933c1a670523b7e59b4.bundle.js:1
(anonymous) @ main.3933c1a670523b7e59b4.bundle.js:1
n.run @ main.3933c1a670523b7e59b4.bundle.js:1
e.invoke @ polyfills.20052382fb9ecf29cee5.bundle.js:1
onInvoke @ main.3933c1a670523b7e59b4.bundle.js:1
e.invoke @ polyfills.20052382fb9ecf29cee5.bundle.js:1
r.run @ polyfills.20052382fb9ecf29cee5.bundle.js:1
run @ main.3933c1a670523b7e59b4.bundle.js:1
bootstrapModuleFactory @ main.3933c1a670523b7e59b4.bundle.js:1
cDNt @ main.3933c1a670523b7e59b4.bundle.js:1
n @ inline.81a18cab7f77e5e3b05a.bundle.js:1
0 @ main.3933c1a670523b7e59b4.bundle.js:1
n @ inline.81a18cab7f77e5e3b05a.bundle.js:1
window.webpackJsonp @ inline.81a18cab7f77e5e3b05a.bundle.js:1
(anonymous) @ main.3933c1a670523b7e59b4.bundle.js:1
main.3933c1a670523b7e59b4.bundle.js:1 ERROR Error: Uncaught (in promise): TypeError: Cannot read property '_moduleDoBootstrap' of undefined
TypeError: Cannot read property '_moduleDoBootstrap' of undefined
    at e.donePromise.then (main.3933c1a670523b7e59b4.bundle.js:1)
...

@msanford I've added `webstorm` tag as this is TypeScript question and WebStorm as more JS-oriented IDE (PhpStorm = WebStorm + PHP + DB). It can bring attention of other users who may otherwise miss this question. — LazyOne, Nov 17 '17 at 19:55
Does it compile with ng build, or does that give you a similar error? — Martin, Nov 17 '17 at 20:05
@LazyOne Ok. I had removed it because WebStorm !== PhpStorm differing specifically in what you mentioned, so I have no idea if a WebStorm-appropriate fix will work for PhpStorm. JetBrains tends to differentiate their IDEs _specifically_ on which plugins you can install (example: no JBoss on IDEA Community). But this is more a caveat to OP. Thanks for pinging me. Good luck :) — msanford, Nov 17 '17 at 20:15
please can you provide a screenshot of the error message + code snippet that shows it up? — lena, Nov 17 '17 at 20:44
`ng serve --prod` compiles (after removing "es6-promise" from node_modules). There is no nice error message. Its just red marked **Promise is not generic** in the editor and code hinting. — Gregor Sklorz, Nov 18 '17 at 12:47
@LazyOne PHPStorm is updated less frequently then webstorm is. So an answer that might work for webstorm doesn't mean it works for PHPstorm as well — malifa, Nov 21 '17 at 16:10
@lexith What **exactly** do you mean by "less often". Since 2016 they all follow "year.release.xx" numbering ... so they all use more-or-less identical code base. The difference might be only in "xx" part which may be released more often in some IDE. — LazyOne, Nov 21 '17 at 16:20
@LazyOne I mean, if the problem might have something to do with the IDE, a possible fix in webstorm won't necessarily be in the latest phpstorm version. That's what i read on a jetbrains blog some time ago at least (and this might have changed). I understood your comment in that way that there might be a flaw in webstorm / phpstorm which could cause this behaviour in the question and you wanted to make sure that the webstorm users see this to inform about a possible fix. Probably misunderstood you. — malifa, Nov 21 '17 at 16:31
@LazyOne seeing the answer you provided to this topic, i think my information is more than a 1 year old probably ;) — malifa, Nov 21 '17 at 16:33
I guess there is no much difference between phpstorm and webstorm since they both based on "IDEA" and handle packages and configs equaly. Aren`t they? — Gregor Sklorz, Nov 21 '17 at 16:34
@lexith What I mean is: if it works in WebStorm 2017.2.xx then it must also work in similar PhpStorm version (2017.2.xx) -- both IDEs are on the same branch so it should work the same in both of them (considering the same plugins, of course). But yes -- back 2 years ago when each product has own release cycle... it was different story (see https://stackoverflow.com/a/25647482/783119 ) — LazyOne, Nov 21 '17 at 16:36
@LazyOne yes i just read that. That's what i meant be "seeing the answer you provided to this topic". My bad then ;) — malifa, Nov 21 '17 at 16:38

score 0 · Answer 1 · answered Nov 21 '17 at 19:21

0

Since there seems no good idea to that problem and angular 5 still makes many problems, I reset to version 4.4.4 and everything runs smooth again.

answered Nov 21 '17 at 19:21

Gregor Sklorz

1,645
2
19
27

Angular 5.0.2 confusing Promise class definitions in PhpStorm + ERROR on --prod

1 Answers1