AOT compilation for JS

I'm submitting a ...

[ ] bug report => search github for a similar issue or PR before submitting
[ x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Because ngc wraps tsc, it can only generate ngFactories for typescript files.

Expected behavior
Ideally, typescript transpiling and ngFactory generation would be decoupled, so plain js (or languages other than ts that target js) can be used.

What is the motivation / use case for changing the behavior?
AOT compilation and treeshaking are important tools for production deployment, and should work with all languages supported by angular.

Angular version: 2.0.0
Language: all

My apologies if this has been discussed before. I have been able to find no reference to this issue on SO, the google group, or in the issues (although github's search does not scale well with 1000+ open issues).

Hi @kantianethics

correct me if I'm wrong, but isn't the problem with plain js that it can't be statically analyzed?
Afaik there is now way the AoT compiler can do it's work without the metadata provided by Typescript?

What metadata are you specifically referring to?

My understanding is that the NgFactories generated in-memory by the JIT are equivalent to those of the AOT.

Thus if

import { Component } from '@angular/core';
@Component({
  selector: 'hero-view',
  template:
    '<h1>Hero: {{getName()}}</h1>'
})
export class HeroComponent {
  title = 'Hero Detail';
  getName() {return 'Windstorm'; }
}

and

 function HeroComponent() {
    this.title = "Hero Detail";
  }

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

generate the same ngFactories in-memory, the AOT should be able to replicate this process.

I haven't read through the AOT compiler's source, though.

If AOT for JS is feasible (and doesn't require huge changes), I'd be interested in helping with this.

I'm new to the compiler codebase though, and would need some direction.

AoT requires typescript, but you can at least do the Tree shaking part since it targets es2015 JS modules and not TypeScript.
Rollup is a Tree Shaker that will work for plain JS as long as you give it es2015 JS.

The Tree shaking section in the docs: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#tree-shaking
should work for a plain JS project as well. Notice how the input to Rollup is JS and not TS.

Obviously this is not as nice as being able to do both AoT and Tree shaking, but it's at least better than nothing :-)

What makes AOT require TS? Just curious.

My understanding is that the ngc compiler is a wrapper/enhancement of the regular tsc compiler and therefore assumes TypeScript.

I still think it should be possible support AoT with JS though. It doesn't seem like the concept of AoT is tied to TypeScript for other reasons than current tooling.

We will have to wait for feedback from the Angular team about how feasible this is though.

If decoupling ngc from tsc requires a huge effort/rewrite, my use-case definitely doesn't merit it :)

I have a use case for this. I'd like to make a Kotlin wrapper for Angular that uses AOT. Kotlin compiles down to ES5 so it would have to use an AOT compiler for JS. Is this in the works or is it something that won't be added?

Any update on this? Is it possible to use AOT with JavaScript/Angular 4?

I would also be interested if there is any update on this ticket.

Kotlin is a much better language compared to TypeScript.

It's my current understanding that the ng compiler is tied to TypeScript.
I would love for the Angular team to provide the support that the community needs to come up with an Angular-Kotlin integration.

@cristian-mocanu-mob

@cristian-mocanu-mob What's the meaning for Angular compiler to generate non-TypeScript/JavaScript codes? Angular itself is written in TypeScript (and Dart for some folks), and the template cannot work without Angular runtime part.

@trotyl

@trotyl: I think you missed my point. Of course the output should be JavaScript (with or without a TypeScript intermediate step) because that's what the browsers run.
My point was about the input: using Kotlin as an input to the Angular compiler, instead of TypeScript.

@cristian-mocanu-mob

@cristian-mocanu-mob Angular compiler do support plain JavaScript as source code, but require companion .d.ts for signatures and .metadata.json for annotations.

All Angular libraries are shipped in JavaScript without TypeScript source code, clearly they're also supported.

So if you can generate .d.ts and .metadata.json from your own source code (no need for entire compiler, but still require a parser-like stuff), it will be possible to use it with Angular compiler.

Created a ticket on Kotlin issue tracker to see what the Kotlin team thinks about this: Support Angular 2+

@trotyl

@trotyl do I understand correctly that .metadata.json is kind of replacement of supporting decorators and if we generate it we should not generate code for decorators in the js code?

@bashor

@bashor Only true if you're genrating AOT-only library. You should keep the decorator (or change it to static properties) if you want to support JIT usage.

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

One week left to get 12 more 👍s for this or it will be closed.

👍

The usage of TypeScript as source language as its decorators and type annotations are a natural way to express Angular's features, which would not be available in JS. Supporting a different language would therefore affect the syntax of how to write Angular applications, which moves it away from what Angular is today. Additionally, Angular is about providing a consistent developer experience: we wouldn't want to split the ecosystem with a different source language.

The JS examples I have seen in this thread are also not as recognizable, making it far more difficult to analyze statically for AOT compilations.

As a side note: although Angular's current tooling is built on top of the TypeScript compiler, that doesn't have to be the case. There are proposals like #43165 to achieve compilation with other tooling, but the source language and syntax would remain the same.

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

AOT compilation for JS #11700

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

AOT compilation for JS #11700

Description

Activity

spock123 commented on Sep 20, 2016

deontologic commented on Sep 20, 2016

AugustNagro commented on Oct 17, 2016

thelgevold commented on Oct 17, 2016

AugustNagro commented on Oct 17, 2016

thelgevold commented on Oct 18, 2016

AugustNagro commented on Oct 18, 2016

gbaldeck commented on Jul 5, 2017

iFadey commented on Jul 21, 2017

cristian-mocanu-mob commented on Nov 29, 2017

trotyl commented on Nov 30, 2017

cristian-mocanu-mob commented on Nov 30, 2017

4 remaining items

trotyl commented on Dec 1, 2017

cristian-mocanu-mob commented on Dec 1, 2017

bashor commented on Dec 1, 2017

trotyl commented on Dec 1, 2017

angular-robot commented on Jun 4, 2021

dmellstrom commented on Jun 17, 2021

gumdrop commented on Jun 17, 2021

JoostK commented on Sep 26, 2021

angular-automatic-lock-bot commented on Oct 27, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions