Angular 8.1 es5 build broken when using angular-audio-context

[whyteks]

Apologies if this is not an issue specific to this project, but rather a broader angular issue, and feel free to close, - My angular-foo is somewhat lacking. All the same, this is the only project with which I have this issue.

When using this library, it seems the es2018 code is used, not the es5. The symptom is with the spread operator: "Uncaught SyntaxError: Unexpected token ..." on a non es6 browser. Sure enough in angular's resultant vendor-es5.js, the code from the es2018 build is present.

Might well be a problem with my build system, although I have tried many options and combinations of options in tsconfig and angular config that I can find documented. I've tried disabling differential builds. The weird thing seem that in the end, I can remove (rm -r) the es2018 folider from node_modules/angular-audio-context/build Then I get the es5 code in the resultant vendor,js. (I was expecting some kind of file not found error)

As I said, I really don't know how all that works. Just flagging it here in case there is something out of place that this module should be communicating to some build system. Thanks!

[chrisguttandin]

Hi @whyteks, I think this is an issue which is even unrelated to Angular and more a problem which affects all JavaScript modules/packages.

Unfortunately there is no standard for publishing anything else but es5. Even that is not really standardized. It's just a convention that everyone expects the main property of a package.json to point to something written in es5.

Additionally I use the module property for all my packages published on npm. It points to code which uses the es2015 modules syntax (aka import and export) which enables tree-shaking. Apart from that it uses the latest valid JavaScript syntax. As of now this is es2018 (and it should actually be es2019 already).

I do this to allow every user of the packages to decide which es version should be shipped. Transpiling from es2018 to es2015 is possible but doing it the other way round is very complicated.

I know, that this sounds all like a really long version of me saying: "I won't fix this.". But this is not the case. Hopefully we find a solution that works for you.

Can you configure your build process to transpile third-party modules as well?

[whyteks]

Hi Christoph, many thanks for your time and response!

"Transpiling 3rd party modules" seem to be the keywords here. Searching that comes up with a lot of similar problems, but as yet, I cannot actually answer your final question;

Can I configure ng build to do this? I would imagine I can, if it can be done, but I appear to be struggling to find clear documentation on this.

So, If I get it right then, transpiling backwards is easy.. so you ship the latest and leave it up to the user to decide what they produce. Makes sense. I would have expected when I put target: es5 in the tsconfig.json, that this would be instructing to build process to do just that. But no, something else is missing.

Since I started looking at this, I've realised that it appears I don't really need angular-audio-context in the project. - I can just use native AudioContext. I don't really know why angular-audio-context got in there, IIRC it was when I upgraded from angular 4 to 8, there were compile errors that I solved by adding it. Maybe I followed a guide somewhere...

That said, I've started, so let's finish! :smiley: This may be useful in the future if I discover a reason to put angular-audio-context back, more importantly it may well be useful to others!

[ I'll still a bit lost in all this, I have to lookup what "tree-shaking" is, to find out that it is not what I want to do after a day wondering why I am not working it in some language I already know, where the end results just runs and is not subject to browser versions or about:config flags... :angel: ]

[chrisguttandin]

I created a litte project with the Angular CLI in order to reproduce the problem. I ran npx @angular/cli new my-project and then installed angular-audio-context and modified the AppModule as described in the README. I than ran ng build and examined the dist folder. Everything looks fine. The spread operator is transpiled and not present in the vendor-es5.js file anymore. So I would conclude that the Angular CLI does transpile third-party code by default.

Which version do you use? When I run ng version I get the following result:

Angular CLI: 8.3.8
Node: 12.11.1
OS: darwin x64
Angular: 8.2.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.8
@angular-devkit/build-angular     0.803.8
@angular-devkit/build-optimizer   0.803.8
@angular-devkit/build-webpack     0.803.8
@angular-devkit/core              8.3.8
@angular-devkit/schematics        8.3.8
@angular/cli                      8.3.8
@ngtools/webpack                  8.3.8
@schematics/angular               8.3.8
@schematics/update                0.803.8
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

I do of course not know why you added angular-audio-context. But the main benefit is that it brings cross browser support. If you really need that depends on the number of features of the Web Audio API you use and on the range of browsers you need to support. Safari is probably the most annoying browser when it comes to Web Audio support.

[whyteks]

Angular CLI: 8.3.5
Node: 10.16.3
OS: linux x64
Angular: 8.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.3.5
@angular/cdk                      8.2.1
@angular/cli                      8.3.5
@angular/flex-layout              8.0.0-beta.27
@angular/material                 8.2.1
@schematics/angular               8.3.5
@schematics/update                0.803.5
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.35.3

Slightly earlier version, on linux, not Mac, significantly? older node too, so quite possibly something there is making a difference. I began the same experiment as you, immediately ran into issues. My global angular it seems, installed typescript 3.4.3 - which "Cannot find name 'Omit'." Yes, I could update the package.json, then do so also for the angular components to keep them dependency happy, but rather than persue this more here, I'll assume for the moment there is something wrong with my install. It was some time ago I began trying to build this project which was angular4 at the time, and I remember having problems with globally installing things, something to do with npm install process itself refusing to run as root.. I never did quite get to understand how all that was meant to work. I should probably build a new build VM and start clean.

I would assume this project (which I inherited) is using somewhat basic AudioContext features. - All it does is make DTMF tones, a ring back tone and a busy tone. So there are some AudioBuffers being used as LFO, I'm assuming that's basic. - I will test in Safari next opportunity.

Anyway, I think for the context of this issue, we could close it now. You've shown with your experiment that it is not an angular or angular-audio-context specific problem. At least not with current latest - 8.3.8. I don't know if there's anything else to add.

Thank you so much for your time!

[chrisguttandin]

Thanks for providing more feedback. I also think that we should close this for now as there is not much we can do here. However if you happen to use this package again and run into a similar issue please feel free to reopen it or to open a new one instead.