Template strings in generated package "dist-web/index.js" about helpful-decorators HOT 7 CLOSED

Try 2.0.6

from helpful-decorators.

This fixes the templates string.
But the next error for me is the arrow function operator:

setTimeout(() => {

This is also not es5.

I think the plugin-build-web plugin doesn't care for the tsconfig. The plugin ( https://github.com/pikapkg/builders/tree/master/packages/plugin-build-web/ ) says:

Adds a web distribution to your built package: dist-web/index.js Targets Modern (ES2019) syntax optimized for bundlers & web tooling.

I use this library in an Angular cli (8.2) project. It works fine on the IE if I build the project, meaning all non es5 features in libraries are converted. But it breaks the IE for ng serve. Maybe this is an Angular CLI bug, because now the js libraries are not converted (even if I select es5 as target).

from helpful-decorators.

This fixes the templates string.
But the next error for me is the arrow function operator:

setTimeout(() => {

This is also not es5.

I think the plugin-build-web plugin doesn't care for the tsconfig. The plugin ( https://github.com/pikapkg/builders/tree/master/packages/plugin-build-web/ ) says:

Adds a web distribution to your built package: dist-web/index.js Targets Modern (ES2019) syntax optimized for bundlers & web tooling.

I use this library in an Angular cli (8.2) project. It works fine on the IE if I build the project, meaning all non es5 features in libraries are converted. But it breaks the IE for ng serve. Maybe this is an Angular CLI bug, because now the js libraries are not converted (even if I select es5 as target).

Hi @smilix , I guess it is caused by differential Loading which is a new feature in Angular 8.

By default, ng serve will only compile your project into es6, which is very likely why it does not work on IE but work on other browsers, while ng build will compile your poject into both es5 & es6 versions and es5 version will be loaded into lagency browsers like IE.

In order to enable compiling to es5 from ng serve, you could check out this link - the section of Differential Loading of Polyfills.

https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920

Hope it helps :)

from helpful-decorators.

Hi @yuchaosydney,

thanks for the reply. But I've already switched back to es5 for the IE11.

from helpful-decorators.

Hi @yuchaosydney,

thanks for the reply. But I've already switched back to es5 for the IE11.

Probably worth to set up and share a dummy simple project that simulates your issue, so I can replicate and easy to debug ;)

from helpful-decorators.

Probably worth to set up and share a dummy simple project that simulates your issue, so I can replicate and easy to debug ;)

That's easy done:

ng new --skip-git --skip-tests --inline-template --inline-style --minimal --defaults demo
cd demo
npm install helpful-decorators --save

Edit src/app/app.component.ts

import { delay } from 'helpful-decorators';
// ...
@delay(1000)
method() {
}

Edit browserslist and remove the not to enable IE support. (Just to be sure)
Edit tsconfig.json and change the target from es2015 to es5.

ng serve --host=0.0.0.0

and test it with your IE11 machine. I get an error in vendor.js.

from helpful-decorators.

Probably worth to set up and share a dummy simple project that simulates your issue, so I can replicate and easy to debug ;)

That's easy done:

ng new --skip-git --skip-tests --inline-template --inline-style --minimal --defaults demo
cd demo
npm install helpful-decorators --save

Edit src/app/app.component.ts

import { delay } from 'helpful-decorators';
// ...
@delay(1000)
method() {
}

Edit browserslist and remove the not to enable IE support. (Just to be sure)
Edit tsconfig.json and change the target from es2015 to es5.

ng serve --host=0.0.0.0

and test it with your IE11 machine. I get an error in vendor.js.

Hi @smilix ,

Thanks for you message.

I got the same issue. And just checked the source code, the project is using @pika/plugin-standard-pkg to compile typescript files and the output does not look like it is respecting "target": "es5" in its tsconfig.json. And according the link - https://github.com/pikapkg/builders:

@pika/plugin-standard-pkg: Compiles JavaScript/TypeScript to ES2018. Supports personalized, top-level .babelrc plugins/config.

In addition, according to an issue link in Angular cli:

angular/angular-cli#11892

The CLI does not transpile Javascript code. Third-party code is expected to be in the appropriate format.

Therefore, probably this issue should be resolved by finding a way to compile this whole project into es5 version by using pika, though current build version is still in es6+.

Hopefully it helps.

Greetings from Yuchao ;)

from helpful-decorators.