Compiler: Native ES6 support for JIT and AOT

With v4, angular starts to ship ES6 code as part of its npm packages. However, Angular's compiler has no option to output ES6 code, only TypeScript code (for AOT) or ES5 code (for JIT).

Also, our metadata collection is broken for JIT and native ES6 mode (see #15325).

Add an option to allow to use ES6 in both cases.

It seems this is a show stopper for the migration, from angularjs to angular, of the projects written in ES2015 without transpilation (for instance, Argo).

In these months I upgraded the app from ES5 with script tags to native ES2015 with rollup bundler, adhering to Todd Motto's code style guide, just to be ready to migrate (smoothly) to angular.

A few months ago I implemented an Angular / ES5 JumpStart example, just a proof of concept and a kitchen sink for the migration of Argo, and I track there also the ES2015 attempt: indeed it is there where I noticed the exception described in #15325.

Any workaround? How can I help you?

Edit: I noticed feature label: aot part is a feature, but jit one is a bug (when fesm15 files are available).

@albertosantini

@albertosantini

It seems this is a show stopper for the migration, from angularjs to angular, of the projects written in ES2015 without transpilation (for instance, Argo).

Why do you think this? The output of the compiler is of no consequence to other parts of the application. The problem with JIT is. that it demands a browser with full ES2015 support. While way more common now, there might be edge cases creeping up here.
I know there are some nuances here that I ignored, but AFAIK those are just of influence on angular itself, not on the other stuff you load into your app.

@SanderElias

@SanderElias Thanks for the feedback.

I see your point and I think there is a misunderstanding due to I didn't explain it very well.

I landed on this issue via #15325, because I got the same exception.

The following snippet is the initial step for the migration from angularjs to angular in ES2015 without transpilation and without the compiler (this is the detail I didn't highlight).

import { NgModule, Component } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import "core-js/shim";
import "reflect-metadata";
import "zone.js/dist/zone";

class FooComponent {
    constructor() {
        this.message = "Hello World";
    }
}

FooComponent.annotations = [
    new Component({
        selector: "app",
        template: "<h1>Foo Component - {{ $ctrl.message }}</h1>"
    })
];

class AppModule {

    // ngDoBootstrap() {}
}

AppModule.annotations = [
    new NgModule({
        imports: [BrowserModule],
        declarations: [FooComponent],
        bootstrap: [FooComponent]
    })
];

platformBrowserDynamic().bootstrapModule(AppModule);

// platformBrowserDynamic().bootstrapModule(AppModule.then(platformRef => {
//     const upgrade = platformRef.injector.get(UpgradeModule);

//     upgrade.bootstrap(document.body, ["app"], { strictDi: true });
// });

You may reproduce it cloning [Angular / ES5 JumpStart example],
(https://github.com/albertosantini/angular2-es5-jumpstart), npm start and browsering http://localhost:8000/index-es2015.html.

(Ignore FooComponent, please, I thought the exception was raised because I tried to bootstrap without a root component).

The relevant files:

Do you think my use case is relevant for this issue (focused on Compiler) or should I fill another issue?

@albertosantini

@albertosantini Why do you have the requirement of using ES6 natively, i.e. without a transpiler?

@tbosch

@tbosch Why not? :) ES2015 is cool, it is better than ES5, it is a standard almost two years old, etc. :)

Mainly for two reasons: avoiding the build step (transpiling, compiling, bundling, etc.) and reducing the weight of the vendor lib (via tree-shaking).

I lowered the requirements, accepting the bundling, via rollup, because the import statement is not implemented yet and tree shaking doesn't work with ES5.

@albertosantini

@albertosantini I second your opinion on es2015. When targeting evergreen browsers, it is the way to go. I outlined most of my reasoning on that in #14393

Also, while I'm using typescript, I don't assume everyone is on that bandwagon. For small samples, an ES2015 version like you have posted might be much easier to get going.

I'm one of those people refractory to the TypeScript trend: ES6 suits better my tastes, and I find Dart so much better than TypeScript...

This is not a problem in itself: I can code Angular apps without going through TypeScript. The problem is that it is currently impossible to remove the JIT compiler from the final bundle, and the compiler is really heavy (about 1Mb).

I'm looking for a way to drop the JIT compiler in a ES6 Angular app, so supporting ES6 for AOT would definitely be a good feature.

It's not as trivial as you might think: at my work, we are gradually abandoning AngularJS in favor of Vue.js (and I know a lot of developers who are switching from AngularJS to React). The problems mentioned each time: the weight of the generated code, and the obligation to use TypeScript to get the best of the framework. Supporting ES6 for AOT could improve the adoption of Angular.

@CedX

@CedX I guess you're requesting #11700, these are two different topics.

@trotyl

@trotyl my request is effectively about AOT with JS, and not about generating ES6 code specifically. Thanks for the rectification.

why JIT compiler can't do its job but in nodejs env? As far as I know Angular supports server side rendering, so I don't understand why JIT can't produce the same code at build step...

@stalniy

@stalniy JIT in a node env is the AOT Compiler

So what is the result is this going to be supported?
We are between choosing angular vs vue for our next project and if angular does not support es6 I have bad news

@Toxicable

@Toxicable great!

what makes targetting es2015 a requirement of the framework you're using?
I have the answer:
Main reason: there is some libs outside start using es2015 but they didn't complie to es5. I have to: ask author to complie ( they don't want because it make lib more heavy) or complie myself ( lead me to this topic and finding Uglify error)
secondary reason: it is lighter and faster and es2015 is common 70% ( according to Netflix) device.

temporary dirty fix

index.html

<script>
	(function() {
		// Angular + ES6 version - tmp fix
		var getPrototypeOf = Object.getPrototypeOf;
		Object.getPrototypeOf = function(obj) {
			if(!obj) {
				return null;
			}
			return getPrototypeOf.apply(Object, [obj]);
		}
	})();
</script>

@jinder

@jinder I don't see how this is more of a problem with this. AOT is likely going to be the default in v5, so you wouldn't ever be using JIT anymore anyway.

It's still used for tests, isn't it? Won't that be a problem?

@mgol

@mgol JIT is still being used for tests for the time being, mainly for overriding templates easily. There are plans to drop it out for AOT aswell
As seen here: #19996

Right, so this issue is still a problem as going full-AOT is not an option yet.

fix: 'cannot convert undefined or null to object' error

@tbosch

I gave another try to the latest versions and it seems it works correctly now, at least the JIT part.

import "core-js/shim";
import "zone.js/dist/zone";

import { NgModule, Component } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

class FooComponent {
    constructor() {
        this.message = "Hello World";
    }
}

FooComponent.annotations = [
    new Component({
        selector: "my-app",
        template: "<h1>Foo Component - {{ message }}</h1>"
    })
];

class AppModule {}

AppModule.annotations = [
    new NgModule({
        imports: [BrowserModule],
        declarations: [FooComponent],
        bootstrap: [FooComponent]
    })
];

platformBrowserDynamic().bootstrapModule(AppModule);

No more exception (Cannot convert undefined or null to object) described in #15325.

Live example with Angular 4.4.6: https://stackblitz.com/edit/angularjs-irc-starter-wgxjzm?file=main.ts
Live example with Angular 5.0.4: https://stackblitz.com/edit/angularjs-irc-starter-mtx1xe?file=main.ts

Minor note for the examples - It is main.ts and not main.js because we need to create the automatic bundling machinery in stackblitz. Indeed the code would be the same. The main diff between the two examples is not the app code, but the presence of reflect-metadata dep (in 4.x example).

You may give a look to the reference project where there is only the bundling step, but not the transpilation one: Angular JumpStart with ES5 (and ES2015).

@tbosch At this point, you may consider to close or to update this issue, because the JIT part seems working; also the comments in this issue were a direct follow-up of the #15325 and #14816.

AOT part is addressed, I think, in a few other ones.

Webpack 4.26.0 moved minification from Uglify to Terser, maybe just maybe, upgrading it would fix this issue. https://github.com/webpack/webpack/releases/tag/v4.26.0 . Currently angular-cli seems to be at webpack@4.23.1

I believe that this is implemented already.

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

Navigation Menu

Repository navigation

Compiler: Native ES6 support for JIT and AOT #15127

7 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Compiler: Native ES6 support for JIT and AOT #15127

Description

Activity

albertosantini commented on Apr 6, 2017

SanderElias commented on Apr 11, 2017

albertosantini commented on Apr 11, 2017

tbosch commented on Apr 11, 2017

albertosantini commented on Apr 11, 2017

SanderElias commented on Apr 12, 2017

CedX commented on Aug 23, 2017

trotyl commented on Aug 24, 2017

CedX commented on Aug 24, 2017

stalniy commented on Sep 10, 2017

Toxicable commented on Sep 10, 2017

jimmykane commented on Sep 13, 2017

7 remaining items

jinder commented on Sep 14, 2017

hiepxanh commented on Oct 13, 2017

BzenkoSergey commented on Oct 23, 2017

mgol commented on Oct 30, 2017

Toxicable commented on Oct 30, 2017

mgol commented on Oct 30, 2017

albertosantini commented on Dec 1, 2017

MattiJarvinen commented on Jan 14, 2019

pkozlowski-opensource commented on Feb 21, 2020

angular-automatic-lock-bot commented on Mar 23, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions