Angular-cli: Calling function 'OpaqueToken', function calls are not supported.

Created on 12 Apr 2017  路  10Comments  路  Source: angular/angular-cli

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.


@angular/cli: 1.0.0
node: 7.5.0
os: linux x64
@angular/animations: 4.0.0
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/core: 4.0.0
@angular/forms: 4.0.0
@angular/http: 4.0.0
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 4.0.0
@angular/platform-browser-dynamic: 4.0.0
@angular/platform-server: 4.0.0
@angular/router: 4.0.0
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.0

Repro steps.


It is hard to reproduce as other team members do not have these issues. We are using the same OS, node and angular cli version

The log given by the failure.


On ng serve i get the following error message

ERROR in Error encountered resolving symbol values statically. Calling function 'OpaqueToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol INITIAL_REDUCER in /opt/lampp/htdocs/frontend/node_modules/@ngrx/store/src/ng2.d.ts, resolving symbol provideStore in /opt/lampp/htdocs/frontend/node_modules/@ngrx/store/src/ng2.d.ts, resolving symbol StoreModule.provideStore in /opt/lampp/htdocs/frontend/node_modules/@ngrx/store/src/ng2.d.ts, resolving symbol AppModule in /opt/lampp/htdocs/frontend/src/app/app.module.ts, resolving symbol AppModule in /opt/lampp/htdocs/frontend/src/app/app.module.ts

Desired functionality.

Mention any other details that might be useful.


The weirdest thing is that once I make a dummy change (add a space to any file) project compiles successfully.

Also, I use Yarn v0.22.0 if that is relevant

picture kirba

Most helpful comment

Getting the same error, "dummy change" allows the project to compile. Also using Yarn, but 0.23.2

picture st-clair-clarke on 15 Apr 2017
👍4 😄1

All 10 comments

Getting the same error, "dummy change" allows the project to compile. Also using Yarn, but 0.23.2

markgoho picture markgoho on 15 Apr 2017

Getting the same error, "dummy change" allows the project to compile. Also using Yarn, but 0.23.2

st-clair-clarke picture st-clair-clarke on 15 Apr 2017
👍4 😄1

Same issue here. Not using yarn though.

Here's my version list:

@angular/cli: 1.0.0
node: 6.9.5
os: darwin x64
@angular/animations: 4.0.2
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/compiler-cli: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0

The problem appeared all of a sudden after upgrading to angular 4.0.0 and has been present ever since. The strange thing is that when I touch main.ts (or any other random source file), the project compiles succesfully. The ngrx sample application, using the same libaries and the same structure compiles without a single problem.

I tried deleting the node_modules folder, npm cache clean , followed by npm install, as well as npm install -D && npm install -S; all to no avail.

Compiling with AOT (-prod -aot) also fails with the infamous "makeDecorator" error, but that might be unrelated.

amplexor-kv picture amplexor-kv on 18 Apr 2017

@markgoho - Do your colleagues also start experiencing the same problem when they rm -rf node_modules && npm cache clean && npm install or rm -rf node_modules && yarn ?

amplexor-kv picture amplexor-kv on 18 Apr 2017

I've downgraded my packages back to Angular 2.4.10, which was the version we've developed the project with and never had any issues with, until the angular-cli 1.0.0 upgrade.

Now building the project fails with error ERROR in AppModule is not an NgModule. But again, the same issue disappears when touching a random file (or making a dummy change to any file). When doing so, while ng is watching the project, the project then compiles and runs without an issue.

This is occurring when doing ng serve, but also when doing ng build --watch.

$ ng serve
Hash: 79b88e6347aa2ae19009
Time: 20459ms
chunk {0} main.bundle.js, main.bundle.js.map (main) 925 kB {3} [initial] [rendered]
chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 96.1 kB {4} [initial] [rendered]
chunk {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 5.83 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.76 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in AppModule is not an NgModule
webpack: Failed to compile.

webpack: Compiling...
Hash: 79b88e6347aa2ae19009
Time: 3493ms
chunk {0} main.bundle.js, main.bundle.js.map (main) 925 kB {3} [initial]
chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 96.1 kB {4} [initial]
chunk {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 5.83 kB {4} [initial]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.76 MB [initial]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]

webpack: Compiled with warnings.

$ ng --version
@angular/cli: 1.0.0
node: 6.9.5
os: darwin x64
@angular/common: 2.4.10
@angular/compiler-cli: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0

Any feedback whatsoever would be most welcome!

amplexor-kv picture amplexor-kv on 18 Apr 2017

Same thing here:

  > ng build -prod

  Hash: 3be99d8ef63d60905528
  Time: 6218ms
  chunk    {0} polyfills.b97870b3f31532b482b4.bundle.js (polyfills) 231 kB {4} [initial] [rendered]
  chunk    {1} main.d0f7cf133099fd104540.bundle.js (main) 1.33 kB {3} [initial] [rendered]
  chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
  chunk    {3} vendor.40faa2eb2fb04975346a.bundle.js (vendor) 1.04 MB [initial] [rendered]
  chunk    {4} inline.5881ea70a05f86b01ba4.bundle.js (inline) 0 bytes [entry] [rendered]

  ERROR in Error encountered resolving symbol values statically. Calling function 'makeParamDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/daniel/Developer/github/KaplanTestPrep/Atom.Tooling.Dashboard/node_modules/@ngrx/store/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in /Users/daniel/Developer/github/KaplanTestPrep/Atom.Tooling.Dashboard/node_modules/@ngrx/store/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in /Users/daniel/Developer/github/KaplanTestPrep/Atom.Tooling.Dashboard/node_modules/@ngrx/store/node_modules/@angular/core/src/di/opaque_token.d.ts

  ERROR in ./src/main.ts
  Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/daniel/Developer/github/KaplanTestPrep/Atom.Tooling.Dashboard/src'
  @ ./src/main.ts 5:0-74
  @ multi ./src/main.ts

[package.json]

"dependencies": {
    "@abot/atom-node-api-health": "^3.1.0",
    "@abot/atom-web-higgs": "^0.2.0",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.1",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.1",
    "@angular/platform-browser": "^4.0.1",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/router": "^4.0.1",
    "@angular/tsc-wrapped": "^4.0.1",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.2",
    "@ngrx/store": "^2.2.1",
    "body-parser": "^1.16.0",
    "bourbon": "^4.2.7",
    "bourbon-neat": "^1.8.0",
    "cookie-parser": "^1.4.3",
    "core-js": "^2.4.1",
    "debug": "^2.6.3",
    "everyconfig": "^1.0.2",
    "express": "^4.14.1",
    "hammerjs": "^2.0.8",
    "hogan-express": "^0.5.2",
    "karma-phantomjs-launcher": "^1.0.4",
    "morgan": "^1.8.0",
    "ngrx-store-freeze": "^0.1.9",
    "normalize.css": "^5.0.0",
    "reselect": "^2.5.4",
    "rxjs": "^5.1.0",
    "serve-favicon": "^2.3.2",
    "ts-helpers": "^1.1.1",
    "tsc": "^1.20150623.0",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@abot/typedoc-to-md": "^1.2.3",
    "@angular/cli": "^1.0.0",
    "@angular/compiler-cli": "^4.0.1",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "karma-teamcity-reporter": "^1.0.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typedoc": "^0.5.1",
    "typescript": "~2.2.2",
    "webdriver-manager": "10.2.5",
    "yarn": "^0.19.1"
  }
danielnegri picture danielnegri on 18 Apr 2017

So I found a solution after lots and lots of searching.

The problem with my setup was:

  • a duplicate node_modules folder in the src/ folder and parent project folder, left there after an unsuccesful npm install executed from the wrong folder.
  • After removing the duplicate node_modules, I was left with 'AppModule is not an ngModule' error.
  • I then upgraded typescript to ~2.2.2 in package.json
  • rm -rf node_modules && rm yarn.lock
  • yarn

    • This, however, caused ng build to fail with a slew of weird and unrelated errors. *

  • rm -rf node_modules && rm yarn.lock once again
  • npm install
  • And that was it, the project now compiles.
  • I then re-created the yarn.lock file for future installs using yarn

I searched for at least 5 full working days, trying to get my setup back working after an initial failed upgrade. There are many, many issues and bugs logged in various projects with different solutions, so hopefully my solution will help somebody as well.

So in short what worked for me:

  1. make sure Typescript is the correct version (2.2.2 here) (both globally as well as in your package);
  2. install your dependencies with npm instead of yarn if you don't already have a yarn.lock file in place. If you do, make sure it contains the right versions! If unsure, delete yarn.lock and npm install. Re-create the file later with yarn.
  3. Doublecheck for duplicate dependencies/remains of previous installations
amplexor-kv picture amplexor-kv on 20 Apr 2017

That's right @amplexor-kv. To get it working, I had to wipe out my node_modules and upgrade angular-cli globally.

Note: One thing super weird, before reinstalling it globally I was trying to use ng from ./node_modules/.bin. That didn't work as well.

danielnegri picture danielnegri on 21 Apr 2017

It seems like this was a dependency problem. thanks to @amplexor-kv for the nice write-up!

filipesilva picture filipesilva on 5 May 2017

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._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 7 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rajjejosefsson picture rajjejosefsson  路  3Comments
brtnshrdr picture brtnshrdr  路  3Comments
JanStureNielsen picture JanStureNielsen  路  3Comments
MateenKadwaikar picture MateenKadwaikar  路  3Comments
IngvarKofoed picture IngvarKofoed  路  3Comments