Generate apps building with babel and @babel/preset-typescript instead of tsc.

[glemiere]

🚀 Feature request

Command (mark with an x)

- [X] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

TypeScript compiler has been great so far, but showed some limitations especially when it comes to transpiling ES6 third party modules to ES5. This can be a pretty big issue when developers have requirements with older browsers, or simply want (or need) their website to pass the Google Crawler without any issue, such as "Unexpected token "=>"". This issue is also showing on older browsers.

Describe the solution you'd like

This is a problem that can be solved by using babel to transpile ES6 module to ES5, and @babel/preset-typescript to transpile TypeScript to ES5 as well.

Thanks!

[mgechev]

We're building angular.io with Angular CLI and we are quite certain that we haven't had problems with Google Search indexing the website.

Would you give more examples what are your concerns with the TypeScript compiler and older browsers?

[glemiere]

Hi @mgechev, thanks for answering! I can indeed give you additional details.

Here is a screenshot of a test result from an Angular app scanned using the google mobile friendly test:

As you can see the arrow function built within the main.*.js file is triggering a syntax error, as the crawler does not support ES6. Now, the tsconfig.json file for this app contains the correct configuration to build the app to ES5 with TypeScript compiler, but since the app uses third party modules written in ES6 in files with .js extension, few arrow functions remain within the final build, triggering the error shown above.

  "compilerOptions": {
    "target": "es5",
    "lib": [
      "es2017",
      "dom"
    ]
  }

There is technically a tweak allowing the TypeScript compiler to look into dependencies in node_modules with JS extension and process them just like ts files by adding the following properties to compilerOptions on the tsconfig file:

    "allowJs": true,
    "maxNodeModuleJsDepth":100

Unfortunately this approach wasn't successful in my case using Angular universal, as it threw an error:
ERROR in node_modules/@nguniversal/express-engine/tokens/tokens.d.ts(8,10): error TS2305: Module '"../../../express"' has no exported member 'Request'.

Considering that many third party packages are released in ES6, I thought that using babel to process dependencies would be a life saver for developers who heavily rely on third party packages released in ES6 only.

You can get more information about this issue here, and here.
You can also find a POC implementing babel instead of the TypeScript compiler, I guess it would be great to use this approach as well for a regular ES6 => ES5 transpilation on dependencies, or directly to the outputed main.js.

By the way, I wrote a quick test to quickly see if my main.js file contains arrow functions, it may be useful, just add this in your package.json scripts:
"check-es5": "number=$(grep -o \"=>\" dist/browser/main*.js | wc -l) && if ((number > 0)); then echo \"false\"; else echo \"true\"; fi"

Thanks again for replying so fast, let me know if you have more questions :)

[glemiere]

@mgechev good morning!

Let me know your thoughts when you have time.

[mgechev]

@glemiere this issue could be related to #13181 - node modules not being transpiled to ES5.

TypeScript can transform ES2015+ syntax to ES5, so we don't have to introduce Babel in to the build process.

[alan-agius4]

@glemiere, can you kindly provide a minimal repo where I can replicate the issue with Universal when using allowJs?

[filipesilva]

To be clear, there are two different and unrelated topics being discussed in this issue:

• should @babel/preset-typescript be used instead of typescript for TS compilation
• should vendor libraries be transpiled

The answer to the first question is, as far as I can tell, no. The Angular AOT compiler is based on typescript, not on babel. @babel/preset-typescript is limited insofar as it doesn't type check (unless that changed). Finally, I don't see what the advantage is of changing our whole build pipeline to use another transpiler, as the transpiler itself is mostly invisible users.

The answer to the second question is "yeah, probably". I discussed this topic in #12975 (comment). The gist of it is that there are no official nor vaguely official guidelines for packaging libraries with different ES formats, and that more and more libraries are ES2015 only.

As far as ES5 consumers are concerned, publishing a library in ES2015+ is similar to publishing a library in TypeScript or CoffeeScript really. For it to be used in ES5 browsers, it must be compiled, and the compilation options must be either provided or guessed. Just because the files have the .js extension doesn't mean they are usable everywhere that .js is usable.

I renamed #12975 to be more search friendly and added it to the FAQ. I think it should be the main issue where third party libs in ES2015 are discussed instead of having a fragmented discussion across multiple issues. Let's continue the discussion there instead.

Given that the second topic is better covered elsewhere, and that the first topic has an answer in this comment, I am closing this issue.

[Bosper]

case is for imported modules, not angular and fancy app itself. Angular cli can't transpile imported modules like Web3js. But everyone here talk about es5 in target... Thing is people was hope that angular cli will build app for them correctly, but like always golden chick has to be paid twice.

[angular-automatic-lock-bot]

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