javascript - AOT (Ahead-Of-Time) Compilation with ES5 - Stack Overflow

admin管理员组

文章数量:1326447

Is it possible to do AOT pilation in Angular using only ES5?

More to the point, can I use the NGTools Webpack plugin with ES5?

I know TypeScript is the preferable language of choice for Angular, however my place of employment did not approve using TypeScript for our Angular project. My hands are a bit tied, and I don't want performance to suffer on the client due to this.

Some relevant info on my project:

• Webpack 2 for build/packaging
• Written in ES2015 transpiled to ES5 using Babel

I have looked all over and have not been able to find a clear answer on this, I would really appreciate any info anyone can provide.

Thanks in advance!

Is it possible to do AOT pilation in Angular using only ES5?

More to the point, can I use the NGTools Webpack plugin with ES5?

I know TypeScript is the preferable language of choice for Angular, however my place of employment did not approve using TypeScript for our Angular project. My hands are a bit tied, and I don't want performance to suffer on the client due to this.

Some relevant info on my project:

• Webpack 2 for build/packaging
• Written in ES2015 transpiled to ES5 using Babel

I have looked all over and have not been able to find a clear answer on this, I would really appreciate any info anyone can provide.

Thanks in advance!

• javascript
• angular
• webpack
• babeljs
• ecmascript-5

Share Improve this question Follow asked Jun 8, 2017 at 16:19 Matt DempseyMatt Dempsey 20111 silver badge33 bronze badges 1

• The question is incorrect per se. 'Written in ES2015 transpiled to ES5 using Babel' is not equal to 'ES5'. Still,currently not possible any way. – Estus Flask Commented Oct 11, 2017 at 6:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

In you tsconfig.json file set the target to es5.

    "target": "es5",

Angular is supposed to be fully ES5 patible.

The AOT piling process uses the metadata attached to ponents. This is how it finds the templates and styles that need piling.

TypeScript is the preferred method for writing ponents. As it allows you to use the @Component annotation function to attach metadata .

ES6 is secondary method and Angular supports ES6 decorators to attach metadata to ponents.

ES5 is more basic. There isn't any automatic way to attach metadata, but the AOT piler will look for a annotations array attached to the object's prototype.

This is how you would do it using ES5

HeroComponent.annotations = [
     new ng.core.Component({
        selector: 'hero-view',
        template: '<h1>{{title}}: {{getName()}}</h1>'
     })
];

So to answer your question. Yes, you can still use AOT with ES5.

Since your original code is ES2015 what you can do is to use the AOT piler directly on your ES2015 JavaScript code. Where you have used decorators on the classes. You can pile to ES5 directly from the AOT piler without using Babel first. Most angular libraries have also the ES5 target to be patible also with older browsers. To do this you set the already mentioned setting in tsconfig.json

"target": "es5",

Check also the official article about AOT. AOT Compiler

The AOT piler is essentially a typescript piler with additional features it will work also with JavaScript. JavaScript code is also valid in TypeScript. Look at the first example on the TypeScript tutorial. TypeScript in 5 minutes

I have experimented a bit with this and for me it works if I change the .js files to .ts without changing the code. The TypeScript piler has also an option to support .js files.

"allowJs": true,

From my tests it looks like the AOT piler ignores that because i got errors if i used .js files so i think you need to rename the files to .ts as i mentioned before. I was testing with the NGTools webpack plugin.

If you still want to use Babel for the ES5 conversion you can set the target of the typescript/AOT piler to ES2015 so the output will still be ES2015 code and then feed it to Babel after the AOT pilation.

本文标签： javascriptAOT (AheadOfTime) Compilation with ES5Stack Overflow