AOT (Ahead-Of-Time) Compilation with ES5

Question

Is it possible to do AOT compilation 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!

Answer 1

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

    "target": "es5",

Answer 2

Angular is supposed to be fully ES5 compatible.

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

TypeScript is the preferred method for writing components. 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 components.

ES5 is more basic. There isn't any automatic way to attach metadata, but the AOT compiler 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.