Template strings in generated package "dist-web/index.js"
smilix opened this issue · comments
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report
[ ] Feature request
[ ] Documentation issue or request
The version I got from npm (2.0.5) contains a template string in the dist-web/index.js
:
console.log(`Call to ${propertyKey} took ${(end - start).toFixed(2)} milliseconds.`);
I assume that is not correct, because the target in the tsconfig is "es5".
If I checkout the current master and build the package myself and the file dist-web/index.js
contains
console.log("Call to ".concat(propertyKey, " took ").concat((end - start).toFixed(2), " milliseconds."));
Did I miss something? Or is the npm version too old?
Environment
helpful-decorators version: 2.0.5
For Tooling issues:
- Node version: 10.16.0
- Platform: Linux
Try 2.0.6
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).
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.
Hope it helps :)
Hi @yuchaosydney,
thanks for the reply. But I've already switched back to es5 for the IE11.
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 ;)
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.
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 thenot
to enable IE support. (Just to be sure)
Edittsconfig.json
and change thetarget
fromes2015
toes5
.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:
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 ;)