Angular + Webpack: Upgrade compiler target from es5

[Christophe HOARAU]

Hello everyone,

I have a project I started with angular2 beta, I've updated it progressively to angular6 and webpack 4 and it's working but I'm still using some old options.

The current compiler target is es5 so I would like to upgrade to es2017 or at least es2015. But when I change the target in my tsconfig, the compilation still works, I have the following error in the browser :

Uncaught Error: Class constructor SysceaElementDefault cannot be invoked without 'new': Error during instantiation of ScStorageRootService!. caused by: Class constructor SysceaElementDefault cannot be invoked without 'new'
    at wrappedError (commons~main~vendor.chunk.js:56082)
    at injectionError (commons~main~vendor.chunk.js:56116)
    at instantiationError (commons~main~vendor.chunk.js:56201)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._instantiate (commons~main~vendor.chunk.js:56858)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._instantiateProvider (commons~main~vendor.chunk.js:56836)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._new (commons~main~vendor.chunk.js:56824)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._getObjByKeyId (commons~main~vendor.chunk.js:56880)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._getByKeyDefault (commons~main~vendor.chunk.js:56912)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._getByKey (commons~main~vendor.chunk.js:56873)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_.get (commons~main~vendor.chunk.js:56796)
    at scBootstrap (main.chunk.js:19432)
    at Module../src/main.browser.ts (main.chunk.js:38645)
    at __webpack_require__ (runtime.bundle.js:79)
    at checkDeferredModules (runtime.bundle.js:46)
    at Array.webpackJsonpCallback [as push] (runtime.bundle.js:33)
    at main.chunk.js:2

I've tried several things with no success till now. Does any one have an idea of what to do ?
Thanks

[Lucas Lacroix]

The error is simple... Before es5, there were no classes and using "new" was just syntactic sugar and you could, instead, just call the function. After, you can define a class using the "class" keyword (like in other languages) and you can no longer treat it like a function.

So, the error indicates the code is trying to treat the class as an invokable function which is not allowed. Just find where the class is being involved as a function and you have your fix.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

Advanced Technology Division, MEDITECH

781-774-2293

                

Subscribe to receive emails from MEDITECH or to change email preferences.

[Christophe HOARAU]

Thanks but the class in question is an injected service class.

[Sander Elias]

Hi Christophe,

Can you show us the code causing the error?

regards

Sander

[Christophe HOARAU]

Hi Elias,

I've been trying to build a minimum reproducible test case for days with no success, I'm currently running into another issue which might or might not be related at all.

before bootstrapping the application :

import { test } from "app/test";

console.log("pre-test");

test();

console.log("post-test");

test.ts:

import {

   Inject,

   Injectable,

   Injector,

   LOCALE_ID,

   ReflectiveInjector,

} from "@angular/core";

import {

   ExternalBaseClass,

} from "./test2";

export abstract class LocalBaseClass {

   protected a: string;

    constructor(@Inject(Injector) protected _injector: Injector) {

       console.log(`${this.constructor.name}[LocalBaseClass] _injector`, _injector);

       console.log(`${this.constructor.name}[LocalBaseClass] this._injector`, this._injector);

       this.a = this._injector.get(LOCALE_ID);

   }

}

@Injectable()

class CustomProvider extends LocalBaseClass {}

@Injectable()

class Custom2Provider extends ExternalBaseClass {}

export function test() {

   console.log("step 1");

   const injector = ReflectiveInjector.resolveAndCreate([

       CustomProvider,

       Custom2Provider,

       { provide: LOCALE_ID, useValue: "fr" }

   ]);

   console.log("step 2");

   let customProvider = injector.get(CustomProvider);

   console.log("step 3");

   let custom2Provider = injector.get(Custom2Provider);

   console.log("step 4");

}

test2.ts:

import {

   Inject,

   Injector,

   LOCALE_ID,

} from "@angular/core";

export abstract class ExternalBaseClass {

   protected a: string;

    constructor(@Inject(Injector) protected _injector: Injector) {

       console.log(`${this.constructor.name}[ExternalBaseClass] _injector`, _injector);

       console.log(`${this.constructor.name}[ExternalBaseClass] this._injector`, this._injector);

       this.a = this._injector.get(LOCALE_ID);

   }

}

Console output :

pre-test
12:22:55.568 test.ts:31 step 1
12:22:55.571 test.ts:37 step 2
12:22:55.573 test.ts:19 CustomProvider[LocalBaseClass] _injector ReflectiveInjector_ {_constructionCounter: 1, _providers: Array(3), parent: null, keyIds: Array(3), objs: Array(3)}
12:22:55.575 test.ts:20 CustomProvider[LocalBaseClass] this._injector ReflectiveInjector_ {_constructionCounter: 1, _providers: Array(3), parent: null, keyIds: Array(3), objs: Array(3)}
12:22:55.577 test.ts:39 step 3
12:22:55.581 test2.ts:11 Custom2Provider[ExternalBaseClass] _injector undefined
12:22:55.583 test2.ts:12 Custom2Provider[ExternalBaseClass] this._injector undefined
12:22:55.584 core.js:1747 Uncaught Error: Cannot read property 'get' of undefined: Error during instantiation of Custom2Provider!. caused by: Cannot read property 'get' of undefined
    at wrappedError (core.js:1747)
    at injectionError (core.js:1781)
    at instantiationError (core.js:1866)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._instantiate (core.js:2523)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._instantiateProvider (core.js:2501)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._new (core.js:2489)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._getObjByKeyId (core.js:2545)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._getByKeyDefault (core.js:2577)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_._getByKey (core.js:2538)
    at ReflectiveInjector_.push.../../../../node_modules/@angular/core/fesm5/core.js.ReflectiveInjector_.get (core.js:2461)
    at test (test.ts:40)
    at Module../src/main.browser.ts (main.browser.ts:10)
    at __webpack_require__ (bootstrap:78)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:2

The only difference between the two class is that the parent class is in another file.

I don't understand how this could have any impact on the resulting code.

Please note I'm using webpack to build with "ts-loader".

Thanks.

[Christophe HOARAU]

In case it could be useful my tsconfig.

Switching target from es2017 to es5 magically solve the issue (only es5, not es6 or es2015).

{

"compilerOptions": {

"target": "es2017",

"module": "es2015",

"moduleResolution": "node",

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"allowSyntheticDefaultImports": true,

"sourceMap": true,

"noEmitHelpers": false,

"strictNullChecks": false,

"baseUrl": "./src",

"declaration": false,

"paths": {},

"lib": ["es6", "es2015", "dom"],

"types": [

"hammerjs",

"jasmine",

"node",

"selenium-webdriver",

"source-map",

"uglify-js",

"webpack",

"localforage"

    ]

},

"exclude": [

"node_modules",

"dist",

"typings",

"docs"

],

"awesomeTypescriptLoaderOptions": {

"forkChecker": true,

"useWebpackText": true

},

"compileOnSave": false,

"buildOnSave": false,

"atom": {

"rewriteTsconfig": false

},

"angularCompilerOptions": {

"genDir": "compiled"

}

}

[Sander Elias]

Hi Christophe, 

I don't have a real answer. My gut feeling is telling me it has to do with the fact that the injector needs to be able to statically analyze source. 

It would help if you would create something I can play with.

Regards

Sander

[Christophe HOARAU]

I've uploaded a test case earlier but it seems it has been removed I don't know why.

Maybe 7z files are not allowed ?

I'll try a new upload.

In order to reproduce this second error (not the first one), I created a new project using ng cli, then I added the two above files and add a call to the test function.

If target is set to es5 it works just fine, if set to es2015 or es2017 it generate the above error.

I'm using ng serve to build. Please note with --aot it generates another error.

[Christophe HOARAU]

[Christophe HOARAU]

File upload does not seems to work,

Here are two download links (same file but just two links)

https://wsi.li/c5HfdM88Iha2

https://www.justbeamit.com/9secy

Thanks for you help.

[Christophe HOARAU]

Did you manage to reproduce the error ?

Just to be sure it's not specific to my environment.

Thanks