Nondescript compilation error message when Ivy enabled #30885

mark-akturatech · 2019-06-06T04:52:31Z

🐞 bug report

When compiling an upgraded Angular 8.0.0 project with Ivy enabled, the compiler generates an ERROR in Value [object Object] is not literal and cannot be used in this context. error with no further information to help identify the cause.

Is this a regression?

No. I have not tried to compile with Ivy enabled before. The project does compile fine with AoT without Ivy enabled though.

Description

I have a reasonably large application that was recently upgraded from Angular 7 to Angular 8.0.0. The application compiles without issue however when Ivy is enabled the compiler produces the following error:


Date: 2019-06-06T04:11:25.373Z
Hash: 087b7b5fb4b324ff6aca
Time: 49369ms
chunk {0} runtime-es5.b13fe75f2187557b33a6.js, runtime-es5.b13fe75f2187557b33a6.js.map (runtime) 1.49 kB [entry] [rendered]
chunk {1} main-es5.4af9b61479361f268d39.js, main-es5.4af9b61479361f268d39.js.map (main) 186 bytes [initial] [rendered]
chunk {2} polyfills-es5.cc41145fc3ff39238270.js, polyfills-es5.cc41145fc3ff39238270.js.map (polyfills) 68.1 kB [initial] [rendered]
chunk {3} styles.1a689b634a36680c47f4.css, styles.1a689b634a36680c47f4.css.map (styles) 3.66 kB [initial] [rendered]
chunk {scripts} scripts.403d9d57243d96fb1784.js, scripts.403d9d57243d96fb1784.js.map (scripts) 1.18 kB [entry] [rendered]

ERROR in Value [object Object] is not literal and cannot be used in this context.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! content-snare-client@1.2.0 build:ngx: `ng build --configuration=${NG_ENV:-prod} --deploy-url=${NG_DEPLOY_URL:-https://app.contentsnare.com/}`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the content-snare-client@1.2.0 build:ngx script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mark/.npm/_logs/2019-06-06T04_11_25_582Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! content-snare-client@1.2.0 build:aot: `npm run build:ngx`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the content-snare-client@1.2.0 build:aot script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

I reviewed the referenced log files and they provide no additional information.

The only error information that is produced is:

ERROR in Value [object Object] is not literal and cannot be used in this context.

Not sure if relevant, but the normal AoT non-ivy enabled compilation creates 28 separate chunks, with scripts being one of the last chunks created. In the above, it creates only 5 chunks.

🔬 Minimal Reproduction

I tried compiling an empty Angular 8 project and this compiles with Ivy enabled without issue.

It is very hard to provide a minimum project as my project is quite large and without any additional error information it would take me weeks to gradually remove code until the error goes away.

Although the project does comprise a dozen or so modules, the number of 3rd party NPM packages is quite small and I receive no NPM compatibility warnings when I run npm clean-install.

Below is a list of installed project NPM packages if this helps:


"dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/forms": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "@fullcalendar/core": "^4.2.0",
    "@fullcalendar/daygrid": "^4.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.1.2",
    "file-saver": "^2.0.1",
    "moment": "^2.24.0",
    "ng2-dragula": "^2.1.1",
    "ngx-clipboard": "^12.0.1",
    "ngx-filesaver": "^2.2.1",
    "rollbar": "^2.7.1",
    "rxjs": "^6.5.2",
    "ts-md5": "^1.2.4",
    "tslib": "^1.9.3",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.0",
    "@angular/cli": "^8.0.0",
    "@angular/compiler-cli": "^8.0.0",
    "@angular/language-service": "^8.0.0",
    "@biesbjerg/ngx-translate-extract": "^2.3.4",
    "@compodoc/compodoc": "^1.1.9",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "^3.3.12",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "~8.9.3",
    "codelyzer": "^5.1.0",
    "cspell": "^3.2.17",
    "gzipper": "^2.6.0",
    "jasmine-core": "^3.4.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "prettier": "^1.17.1",
    "protractor": "^5.4.2",
    "ts-node": "~7.0.0",
    "tslint": "~5.16.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "~3.4.5",
    "webpack-bundle-analyzer": "^3.3.2"
  }

🔥 Exception or Error


ERROR in Value [object Object] is not literal and cannot be used in this context.

🌍 Your Environment

Angular Version:


Angular CLI: 8.0.1
Node: 11.8.0
OS: linux x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cli                      8.0.1
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

The text was updated successfully, but these errors were encountered:

santoshyadavdev · 2019-06-06T10:00:34Z

Ivy is still experimental and should not be used for production. But you provide the minimum reproduction for checking the issue.

cyr-x · 2019-06-06T11:41:11Z

I had the same error and after some digging and debugging by loggin some additional information in interpreter.ts, the issue was due to using string concatenation inside my routes configuration.

For example:

{ path: '**', redirectTo: '/' + errorPath + '/404' } // this will throw the "... is not literal" error

And errors like: ERROR in ../../../../__ng_typecheck__.ts(335,30): error TS2532: Object is possibly 'undefined', are caused by the template type check feature of angular ivy, so disabling it until #30181 lands to make it easier to debug.

alxhub · 2019-06-06T22:05:14Z

This is a known issue with the static analysis that the Ivy compiler does. We will need to support such constructions as 'foo' + 'bar' as well as objA || objB. Today you get that error.

Additionally, we still have some work to do in producing useful error messages for these cases instead of crashing out. Specifically, the error messages need to show where the static analyzer was unable to understand the code.

mark-akturatech · 2019-06-07T00:13:46Z

Thank you for the feedback guys. I do use 'foo' + 'bar' and objA || objB within my code, so that would definitely be the problem. Appreciate your work. Thank you.

alessiostalla · 2019-06-27T05:55:42Z

I use { onSameUrlNavigation: "reload", ...config } and I have the same problem.
With angular.next, things get worse as third-party modules such as ngx-translate exhibit the same issue.

alessiostalla · 2019-07-05T17:28:30Z

I also tried to remove the object splice operator, but no luck. This is my forRoot declaration:

public static withRoutes(routes: Routes, config: ExtraOptions = {}): (ModuleWithProviders|Type<PortofinoModule>)[] {
    return [RouterModule.forRoot(
      [...routes,
              { path: "**", component: ContentComponent}],
      { onSameUrlNavigation: "reload", ...config }),
      PortofinoModule];
  }

veben · 2019-10-17T06:54:42Z

I had the same error and after some digging and debugging by loggin some additional information in interpreter.ts, the issue was due to using string concatenation inside my routes configuration.

For example:
{ path: '**', redirectTo: '/' + errorPath + '/404' } // this will throw the "... is not literal" error
And errors like: ERROR in ../../../../__ng_typecheck__.ts(335,30): error TS2532: Object is possibly 'undefined', are caused by the template type check feature of angular ivy, so disabling it until #30181 lands to make it easier to debug.

Same here. I add to replace:
path: RoutePathEnum.ERROR_PATH + '/:code'
by:
path: [RoutePathEnum.ERROR_PATH, '/:code'].join('')

j-martinez-dev · 2019-10-20T09:55:57Z

I had the same error and after some digging and debugging by loggin some additional information in interpreter.ts, the issue was due to using string concatenation inside my routes configuration.
For example:
{ path: '**', redirectTo: '/' + errorPath + '/404' } // this will throw the "... is not literal" error
And errors like: ERROR in ../../../../__ng_typecheck__.ts(335,30): error TS2532: Object is possibly 'undefined', are caused by the template type check feature of angular ivy, so disabling it until #30181 lands to make it easier to debug.
Same here. I add to replace:
path: RoutePathEnum.ERROR_PATH + '/:code'
by:
path: [RoutePathEnum.ERROR_PATH, '/:code'].join('')

It works also with

{ path: `${RoutePathEnum.ERROR_PATH}/:code` }

JoostK · 2019-11-01T09:37:21Z

Since #33453 went in this should become better, it will become available in the next RC release. I don't know exactly why regular string concatenation wouldn't work, that should be working just fine as far as my testing went.

Btw, the error message may still be cryptic even with #33453, as we don't produce a very detailed diagnostic just yet.

cocolink021195 · 2019-11-18T03:59:30Z

I have the same error "ERROR in Value [object Object] is not literal and cannot be used in this context".
Although, I have fixed 'foo' + 'bar' and objA | | objB in my code but the error still exists.
I expect the error messages will be more useful in the future. Thank you.

JoostK · 2019-11-18T04:56:41Z

I have the same error "ERROR in Value [object Object] is not literal and cannot be used in this context".
Although, I have fixed 'foo' + 'bar' and objA | | objB in my code but the error still exists.
I expect the error messages will be more useful in the future. Thank you.

This error is no longer produced, are you on the latest 9.0 RC release?

mark-akturatech · 2020-01-21T01:59:58Z

Good morning.

This error is no longer produced, are you on the latest 9.0 RC release?

I can confirm that my entire application compiles and runs with Ivy enabled using 9.0.0-rc.9. The issue has been resolved.

Thank you all. I am in awe that our project - which is not small by any means - compiles and runs seamlessly in Ivy now. The implementation of Ivy must have been a huge undertaking for you. You are all absolute legends.

angular-automatic-lock-bot · 2020-02-21T16:08:06Z

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

mhevery added the comp: ivy label Jun 6, 2019

ngbot bot added this to the needsTriage milestone Jun 6, 2019

kara added severity3: broken type: bug/fix freq2: medium labels Jun 13, 2019

ngbot bot modified the milestones: needsTriage, Backlog Jun 13, 2019

JoostK closed this as completed Jan 21, 2020

angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nondescript compilation error message when Ivy enabled #30885

Nondescript compilation error message when Ivy enabled #30885

mark-akturatech commented Jun 6, 2019

santoshyadavdev commented Jun 6, 2019 •

edited

cyr-x commented Jun 6, 2019 •

edited

alxhub commented Jun 6, 2019

mark-akturatech commented Jun 7, 2019

alessiostalla commented Jun 27, 2019

alessiostalla commented Jul 5, 2019

veben commented Oct 17, 2019

j-martinez-dev commented Oct 20, 2019

JoostK commented Nov 1, 2019

cocolink021195 commented Nov 18, 2019

JoostK commented Nov 18, 2019 •

edited

mark-akturatech commented Jan 21, 2020

angular-automatic-lock-bot bot commented Feb 21, 2020

Nondescript compilation error message when Ivy enabled #30885

Nondescript compilation error message when Ivy enabled #30885

Comments

mark-akturatech commented Jun 6, 2019

🐞 bug report

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

santoshyadavdev commented Jun 6, 2019 • edited

cyr-x commented Jun 6, 2019 • edited

alxhub commented Jun 6, 2019

mark-akturatech commented Jun 7, 2019

alessiostalla commented Jun 27, 2019

alessiostalla commented Jul 5, 2019

veben commented Oct 17, 2019

j-martinez-dev commented Oct 20, 2019

JoostK commented Nov 1, 2019

cocolink021195 commented Nov 18, 2019

JoostK commented Nov 18, 2019 • edited

mark-akturatech commented Jan 21, 2020

angular-automatic-lock-bot bot commented Feb 21, 2020

santoshyadavdev commented Jun 6, 2019 •

edited

cyr-x commented Jun 6, 2019 •

edited

JoostK commented Nov 18, 2019 •

edited