Commit graph

263 commits

Author SHA1 Message Date
Paul Gschwendtner
c241f63e8d refactor(compiler-cli): remove unused class decorator downlevel code (#49351)
The decorator downlevel transform is never used for actual class
decorators because Angular class decorators rely on immediate execution
for JIT. Initially we also supported downleveling of class decorators
for View Engine library output, but libraries are shipped using partial
compilation output and are not using this transform anymore.

The transform is exclusively used for JIT processing, commonly for
test files to help ease temporal dead-zone/forward-ref issues. We can
remove the class decorator downlevel logic to remove technical debt.

PR Close #49351
2023-03-08 17:59:12 +00:00
Kristiyan Kostadinov
99d874fe3b feat(core): add support for TypeScript 5.0 (#49126)
Updates the project to support TypeScript 5.0 and to resolve any errors that came up as a result of the update.

PR Close #49126
2023-02-28 08:24:47 -08:00
Kristiyan Kostadinov
79cdfeb392 feat(compiler): drop support for TypeScript 4.8 (#49155)
Drops support for TypeScript 4.8 from the compiler and removes all of the compatibility code we had for it.

BREAKING CHANGE:
* TypeScript 4.8 is no longer supported.

PR Close #49155
2023-02-23 10:39:43 -08:00
Andrew Kushnir
83a6e203e3 refactor(compiler): drop obsolete NgFactory and NgSummary config options (#48268)
The options to generate NgFactory and NgSummary files were added to Ivy for backwards compatibility with ViewEngine. Since ViewEngine was deprecated and removed, the NgFactory and NgSummary files are no longer used as well.

This commit drops obsolete options to generate NgFactory and NgSummary files. Also, the logic that generates those files is also removed.

PR Close #48268
2023-02-21 13:03:59 -08:00
Kristiyan Kostadinov
f3f139942c refactor(compiler): remove remaining usage of getMutableClone (#49070)
Uses an alternate approach of preserving default imports that doesn't involve the `getMutableClone` function that is being removed in TypeScript 5.0.

The alternate approach was already used in the downlevel transform and it works by patching the EmitResolver of the current transformation context to tell TypeScript to preserve the import.

PR Close #49070
2023-02-16 15:30:52 -08:00
Kristiyan Kostadinov
33f35b04ef fix(compiler): type-only symbols incorrectly retained when downlevelling custom decorators (#48638)
In #47167 an `updateClassDeclaration` call was swapped out with a `createClassDeclaration` which caused a regression where interface references were being retained when using a custom decorator in a project that has `emitDecoratorMetadata` enabled.

These changes switch back to use `updateClassDeclaration`.

Fixes #48448.

PR Close #48638
2023-01-04 12:29:16 -08:00
Kristiyan Kostadinov
50f95f831e refactor(compiler): remove TypeScript 4.7 compatibility code (#48470)
We dropped support for TypeScript 4.7 in version 15, but we had to keep around the runtime code, because of g3. Now that g3 is on 4.8, we can remove the additional code.

PR Close #48470
2023-01-02 13:47:22 +00:00
Paul Gschwendtner
39b898d0cd refactor(compiler-cli): update emit signature to support for strongly typed emitCallback (#47893)
Currently `ngc-wrapped` mostly relies on any casts/or disabled
strictness checks to be able to use `tsickle`'s emit callback and
emit result merging for ngtsc. We should change this so that supertypes
of `ts.EmitResult` can be used in these optional callbacks- allowing us
to enable strictness checks in `packages/bazel/...` too.

PR Close #47893
2022-11-01 04:44:28 -07:00
Alan Agius
16f96eeabf refactor(compiler-cli): remove enableIvy options (#47346)
This option has no longer any effect as Ivy is the only rendering engine.

BREAKING CHANGE: Angular compiler option `enableIvy` has been removed as Ivy is the only rendering engine.

PR Close #47346
2022-09-06 11:33:48 -07:00
Kristiyan Kostadinov
ddb95c5184 refactor(compiler): replace most usages of getMutableClone (#47167)
Replaces (almost) all of the usages of the deprecated `getMutableClone` function from TypeScript which has started to log deprecation warnings in version 4.8 and will likely be removed in version 5.0. The one place we have left is in the default import handling of ngtsc which will be more difficult to remove.

PR Close #47167
2022-08-22 10:40:50 -07:00
Kristiyan Kostadinov
31429eaccc feat(core): support TypeScript 4.8 (#47038)
Adds support for TypeScript 4.8 and resolves some issues that came up as a result of the update.

Most of the issues came from some changes in TypeScript where the `decorators` and `modifiers` properties were removed from most node types, and were combined into a single `modifiers` array. Since we need to continue supporting TS 4.6 and 4.7 until v15, I ended up creating a new `ngtsc/ts_compatibility` directory to make it easier to reuse the new backwards-compatible code.

PR Close #47038
2022-08-16 16:02:47 +00:00
John Vandenberg
c14c701775 docs: fix spelling (#46713)
PR Close #46713
2022-07-08 20:54:52 +00:00
Alex Rickabaugh
714183d430 refactor(compiler-cli): add forceEmit flag to performCompilation (#46355)
In Bazel worker-land, workers which use incremental compilation must still
emit all declared outputs and cannot rely on these outputs persisting from
previous builds.

This commit adds a flag to `performCompilation` which can be used by the
worker infrastructure to instruct the compiler to always emit all possible
output files, regardless of any incremental build optimizations.

PR Close #46355
2022-06-14 15:56:32 +00:00
dario-piotrowicz
8629f2d0af refactor(compiler-cli): fix "for to" typo in code comment (#46113)
fix the typo/extra for in a code comment saying
"this is used for to determine" so that it only says
"this is used to determine"

PR Close #46113
2022-05-24 10:52:17 -07:00
Kristiyan Kostadinov
ff6be32c1a refactor(compiler): remove usages of deprecated AST creation functions (#45134)
Proactively replaces our usages of the deprecated `ts.create*` methods in favor of using `ts.factory.create*` so that we're not surprised when the TS removes them in the future. Also accounts for some cases where the signature had changed.

PR Close #45134
2022-02-22 10:22:47 -08:00
Alex Rickabaugh
43db24302c refactor(compiler): delete View Engine components of @angular/compiler (#44368)
This commit finishes the removal of View Engine from the codebase, deleting
those pieces of @angular/compiler which were only used for VE.

Co-Authored-By: JoostK <joost.koehoorn@gmail.com>

PR Close #44368
2021-12-06 13:12:36 -05:00
JoostK
1922032786 refactor(compiler-cli): dismantle View Engine implementation of ngc (#44269)
This commit does a first-pass removal of the View Engine infrastructure
in compiler-cli. A more in-depth cleanup is necessary and large parts
of the View Engine compiler infrastructure remain within
`@angular/compiler`, this is just a first cleanup step.

PR Close #44269
2021-12-01 10:36:30 -08:00
Kristiyan Kostadinov
d56e3f43a1 feat(core): support TypeScript 4.5 (#44164)
Adds support for TypeScript 4.5. Includes the following changes:
* Bumping the package versions.
* Fixing a few calls to `createExportSpecifier` and `createImportSpecifier` that require an extra parameter.
* Adding some missing methods to the TS compiler hosts.
* Fixing an issue in the TS mocks for the ngcc tests where a regex was too agressive and was trying to match a path like `/node_modules/@typescript/lib-es5`.
* Accounting for type-only import specifiers when reporting DI errors (see #43620).

Fixes #43620.

PR Close #44164
2021-11-30 11:59:02 -05:00
Paul Gschwendtner
6c1573bc08 fix(compiler-cli): downlevel transform incorrectly extracting constructor parameters for nested classes (#44281)
The downlevel decorator transform (commonly used in the CLI and other
tooling of the ecosystem for enabling JIT ES2015+), is currently
incorrectly dealing with nested classes.

The transform will accidentally visit nested classes (in a constructor)
multiple times and generate duplicated instances of the `ctorParameters`
fields. This does not sound like an issue at first, but the duplicated
`ctorParameters` fields will miss significant type information that has
been elided by the first visit, resulting in generated code like the
following:

```js
      let MyClass = /* @__PURE__ */ __name(class MyClass extends UpgradeNg1ComponentAdapter {
        constructor(scope, injector3, elementRef) {
        }
      }, "MyClass");
      MyClass.ctorParameters = () => [
        { type: void 0, decorators: [{ type: Inject, args: [$SCOPE] }] },
        { type: Injector },
        { type: ElementRef }
      ];
      MyClass.ctorParameters = () => [
        { type: void 0 }, // <---- NOTE!
        { type: Injector },
        { type: ElementRef }
      ];
```

PR Close #44281
2021-11-30 11:56:05 -05:00
Doug Parker
737f71e3aa refactor(compiler-cli): throw an error when compiling with View Engine. (#43862)
The View Engine compiler now throws when constructed and will be removed shortly. Direct users should switch to `NgtscProgram` to build with [Ivy](https://angular.io/guide/ivy). The View Engine compiler is being removed, so this makes it throw an error to ensure no one accidentally depends on code being removed.

PR Close #43862
2021-10-19 10:06:55 -07:00
Paul Gschwendtner
fe2a8de1b5 refactor(compiler-cli): expose tooling code through private entry-point (#43431)
Similar to the other private entry-points we have added for localize,
bazel or the migrations, we should expose the tooling code through
a dedicated private export. This will make the compiler-cli exports
more consistent and it will become easier for the CLI to export
necessary code.

PR Close #43431
2021-10-01 18:28:46 +00:00
Paul Gschwendtner
b46b3cf43e refactor: remove remaining dynamic require usages in package output (#43431)
Removes the remaining usages of dynamic require statements in the
package output. Since we declare all shipped packages as strict ESM,
we cannot use dynamic require statements anymore. This commit switches
these usages to actual `import` statements.

Note: Tsickle continues to remain an optional dependency since bundling
does not work with its UMD package output. Also tsickle is rarely used by
consumers, if at all, so bundling does not really provide any significant
value. To continue keeping tsickle optional (since it's still needed by the
`annotateForClosureCompiler` option which is also respected in ngtsc), we
pass-through a tsickle instance as a parameter to `main`. This allows us to
keep the compile functions synchronous without having to refactor the majority
of the watch compilation code, and majority of tests for ngc, ngtsc.

Consumers (like the `ngc` bin entry-point) can then load tsickle based on their
module format. e.g. tsickle can be imported through `require` to keep everything
sync, but in ESM, the dynamic import can be used beforehand to pass `tsickle` to
the `main` function. We can revisit this in the future but for now this does the
trick without exceeding the scope of this commit..

PR Close #43431
2021-10-01 18:28:45 +00:00
Paul Gschwendtner
8d7f1098d8 refactor: make all imports compatible with ESM/CJS output. (#43431)
As outlined in the previous commit which enabled the `esModuleInterop`
TypeScript compiler option, we need to update all namespace imports
for `typescript` to default imports. This is needed to allow for
TypeScript to be imported at runtime from an ES module.

Similar changes are needed for modules like `semver` where the types incorrectly
suggest named exports that will not exist at runtime when imported from ESM.

This commit refactors all imports to match with the lint rule we have
configured in the previous commit. See the previous commit for more
details on why certain imports have been changed.

A special case are the imports to `@babel/core` and `@babel/types`. For
these a special interop is needed as both default imports, or named
imports break the other module format. e.g default imports would work
well for ESM, but it breaks for CJS. For CJS, the named imports would
only work, but in ESM, only the default export exist. We work around
this for now until the devmode is using ESM as well (which would be
consistent with prodmode and gives us more valuable test results). More
details on the interop can be found in the `babel_core.ts` files (two
interops are needed for both localize/or the compiler-cli).

PR Close #43431
2021-10-01 18:28:45 +00:00
JoostK
94c6dee708 refactor(compiler-cli): remove listLazyRoutes operation (#43591)
Now that `Route.loadChildren` no longer accepts a string, there is no
need for tooling to find all string-based `loadChildren` to setup lazy
imports for them. As a result, the `listLazyRoutes` operation that
enumerates all string-based `loadChildren` occurrences is no longer
needed and is therefore removed from the compiler.

The `listLazyRoutes` API remains on the `Program` interface to avoid
breaking external tools that may be using this method, but those tools
should ultimately move away from using this API.

PR Close #43591
2021-09-29 14:45:18 -07:00
Kristiyan Kostadinov
ea61ec2562 feat(core): support TypeScript 4.4 (#43281)
Adds support for TypeScript 4.4. High-level overview of the changes made in this PR:

* Bumps the various packages to `typescript@4.4.2` and `tslib@2.3.0`.
* The `useUnknownInCatchVariables` compiler option has been disabled so that we don't have to cast error objects explicitly everywhere.
* TS now passes in a third argument to the `__spreadArray` call inside child class constructors. I had to update a couple of places in the runtime and ngcc to be able to pick up the calls correctly.
* TS now generates code like `(0, foo)(arg1, arg2)` for imported function calls. I had to update a few of our tests to account for it. See https://github.com/microsoft/TypeScript/pull/44624.
* Our `ngtsc` test setup calls the private `matchFiles` function from TS. I had to update our usage, because a new parameter was added.
* There was one place where we were setting the readonly `hasTrailingComma` property. I updated the usage to pass in the value when constructing the object instead.
* Some browser types were updated which meant that I had to resolve some trivial type errors.
* The downlevel decorators tranform was running into an issue where the Closure synthetic comments were being emitted twice. I've worked around it by recreating the class declaration node instead of cloning it.

PR Close #43281
2021-09-23 14:49:19 -07:00
Kristiyan Kostadinov
2028c3933f refactor(compiler): combine call ASTs (#42882)
Currently the compiler has three different classes to represent a "call to something":
1. `MethodCall` - `foo.bar()`
2. `SafeMethodCall` - `foo?.bar()`.
3. `FunctionCall` - Any calls that don't fit into the first two classes. E.g. `foo.bar()()`.

There are a few problems with this approach:
1. It is inconistent with the TypeScript AST which only has one node: `CallExpression`.
2. It means that we have to maintain more code, because the various parts of the compiler need to know about three node types.
3. It doesn't allow us to easily implement some new JS features like safe calls (e.g. `foo.bar?.())`).

These changes rework the compiler so that it produces only one node: `Call`. The new node behaves  similarly to the TypeScript `CallExpression` whose `receiver` can be any expression.

There was a similar situation in the output AST where we had an `InvokeMethodExpression` and `InvokeFunctionExpression`. I've combined both of them into `InvokeFunctionExpression`.

PR Close #42882
2021-09-21 20:55:29 +00:00
nickreid
4341a5f4cb fix(compiler-cli): Emit type annotations for synthesized decorator fields (#43021)
Previously, the decorator transformer was annotating the synthesized properties with TS type annotations. However, because it ran after the JSDoc transformer, the TS types were just dropped from the emitted JS. Attempting to move the decorator transformer before the JSDoc transformer causes tsickle crashes because synthetic AST fragments are not attached to a SourceFile node.

PR Close #43021
2021-08-25 15:05:28 -07:00
Alex Rickabaugh
e83d7cb2d3 refactor(compiler-cli): support xi18n in ngtsc (#42485)
xi18n is the operation of extracting i18n messages from templates in the
compilation. Previously, only View Engine was able to perform xi18n. This
commit implements xi18n in the Ivy compiler, and a copy of the View Engine
test for Ivy verifies that the results are identical.

PR Close #42485
2021-06-21 16:50:28 +00:00
Alex Rickabaugh
4538bd6c96 refactor(compiler-cli): extract xi18n utility functions to a separate file (#42485)
This commit moves some xi18n-related functions in the View Engine
ng.Program into a new file. This is necessary in order to depend on them
from the Ivy ng.Program while avoiding a cycle.

PR Close #42485
2021-06-21 16:50:28 +00:00
Paul Gschwendtner
2d0ff0a5d3 ci: add lint error for files with missing trailing new-line (#42478)
For quite a while it is an unspoken convention to add a trailing
new-line files within the Angular repository. This was never enforced
automatically, but has been frequently raised in pull requests through
manual review. This commit sets up a lint rule so that this is
"officially" enforced and doesn't require manual review.

PR Close #42478
2021-06-04 13:31:03 -07:00
Alex Rickabaugh
c9aa87cec0 fix(compiler-cli): show a more specific error for Ivy NgModules (#41534)
When an Ivy NgModule is imported into a View Engine build, it doesn't have
metadata.json files that describe it as an NgModule, so it appears to VE
builds as a plain, undecorated class. The error message shown in this
situation generic and confusing, since it recommends adding an @NgModule
annotation to a class from a library.

This commit adds special detection into the View Engine compiler to give a
more specific error message when an Ivy NgModule is imported.

PR Close #41534
2021-04-13 07:34:45 -07:00
Kristiyan Kostadinov
ec27bd4ed1 feat(compiler): support nullish coalescing in templates (#41437)
Adds support for nullish coalescing expressions inside of Angular templates (e.g. `{{ a ?? b ?? c}}`).

Fixes #36528.

PR Close #41437
2021-04-07 12:04:28 -07:00
Alan Agius
dc655262be refactor(compiler): remove TypeScript 4.0 program reuse check (#41406)
We no longer support TS 4.0, hence this check is redundant.

PR Close #41406
2021-04-02 15:47:54 -07:00
Andrew Scott
54b088967a refactor(compiler): remove unreachable code (#40984)
1. The error function throws, so no code after it is reachable.
2. Some switch statements are exhaustive, so no code after them are reachable.

PR Close #40984
2021-03-01 15:29:20 -08:00
Joey Perrott
b75d7cb11f fix(compiler-cli): update type castings for JSON.parse usage (#40710)
Update usages of JSON.parse to be cast as specific types.

PR Close #40710
2021-02-09 10:48:43 -08:00
Alexey Elin
cf02cf1e18 docs: remove duplicated the (#40434)
PR Close #40434
2021-01-14 11:33:57 -08:00
JoostK
27d0e54705 fix(compiler-cli): prevent stack overflow in decorator transform for large number of files (#40374)
The decorator downleveling transform patches `ts.EmitResolver.isReferencedAliasDeclaration`
to prevent elision of value imports that occur only in a type-position, which would
inadvertently install the patch repeatedly for each source file in the program.
This could potentially result in a stack overflow when a very large number of files is
present in the program.

This commit fixes the issue by ensuring that the patch is only applied once.
This is also a slight performance improvement, as `isReferencedAliasDeclaration`
is no longer repeatedly calling into all prior installed patch functions.

Fixes #40276

PR Close #40374
2021-01-11 10:39:10 -08:00
Bjarki
ef892743ec feat(compiler): support tagged template literals in code generator (#39122)
Add a TaggedTemplateExpr to represent tagged template literals in
Angular's syntax tree (more specifically Expression in output_ast.ts).
Also update classes that implement ExpressionVisitor to add support for
tagged template literals in different contexts, such as JIT compilation
and conversion to JS.

Partial support for tagged template literals had already been
implemented to support the $localize tag used by Angular's i18n
framework. Where applicable, this code was refactored to support
arbitrary tags, although completely replacing the i18n-specific support
for the $localize tag with the new generic support for tagged template
literals may not be completely trivial, and is left as future work.

PR Close #39122
2020-12-07 16:20:04 -08:00
Charles Lyding
318255a5f8 build: support building with TypeScript 4.1 (#39571)
TypeScript 4.1 is now used to build and test within the repository.

PR Close #39571
2020-11-25 11:10:01 -08:00
Charles Lyding
a7e7c211b5 feat(compiler-cli): add support for using TypeScript 4.1 (#39571)
This change enables projects to be built with TypeScript 4.1.  Support for TypeScript 4.0 is also retained.

PR Close #39571
2020-11-25 11:10:00 -08:00
Marcono1234
3e1e5a15ba docs: update links to use HTTPS as protocol (#39718)
PR Close #39718
2020-11-20 12:52:16 -08:00
Alan Agius
0929099e41 refactor(compiler-cli): remove TypeScript 3.9 workarounds (#39586)
With this change we remove code which was used to support both TypeScript 3.9 and TypeScript 4.0

This code is now no longer needed because G3 is on TypeScript 4.0

PR Close #39586
2020-11-06 15:26:51 -08:00
Pete Bacon Darwin
b9b9178458 fix(compiler-cli): do not drop non-Angular decorators when downleveling (#39577)
There is a compiler transform that downlevels Angular class decorators
to static properties so that metadata is available for JIT compilation.
The transform was supposed to ignore non-Angular decorators but it was
actually completely dropping decorators that did not conform to a very
specific syntactic shape (i.e. the decorator was a simple identifier, or
a namespaced identifier).

This commit ensures that all non-Angular decorators are kepts as-is
even if they are built using a syntax that the Angular compiler does not
understand.

Fixes #39574

PR Close #39577
2020-11-06 09:21:51 -08:00
Pete Bacon Darwin
05672ab136 refactor(compiler-cli): attachComments() now expects a defined leadingComments array (#39076)
Previously the value passed to `AstFactory.attachComments()` could be
`undefined` which is counterintuitive, since why attach something that
doesn't exist? Now it expects there to be a defined array. Further it no
longer returns a statement. Both these aspects of the interface were designed
to make the usage simpler but has the result of complicating the implemenation.

The `ExpressionTranslatorVisitor` now has a helper function (`attachComments()`)
to handle `leadingComments` being undefined and also returning the statement.
This keeps the usage in the translator simple, while ensuring that the `AstFactory`
API is not influenced by how it is used.

PR Close #39076
2020-10-06 11:33:55 -07:00
Pete Bacon Darwin
d795a00137 refactor(compiler): replace Comment nodes with leadingComments property (#38811)
Common AST formats such as TS and Babel do not use a separate
node for comments, but instead attach comments to other AST nodes.
Previously this was worked around in TS by creating a `NotEmittedStatement`
AST node to attach the comment to. But Babel does not have this facility,
so it will not be a viable approach for the linker.

This commit refactors the output AST, to remove the `CommentStmt` and
`JSDocCommentStmt` nodes. Instead statements have a collection of
`leadingComments` that are rendered/attached to the final AST nodes
when being translated or printed.

PR Close #38811
2020-09-18 08:01:25 -07:00
Alan Agius
0fc44e0436 feat(compiler-cli): add support for TypeScript 4.0 (#38076)
With this change we add support for TypeScript 4.0

PR Close #38076
2020-08-24 13:06:59 -07:00
JoostK
874792dc43 feat(compiler): support unary operators for more accurate type checking (#37918)
Prior to this change, the unary + and - operators would be parsed as `x - 0`
and `0 - x` respectively. The runtime semantics of these expressions are
equivalent, however they may introduce inaccurate template type checking
errors as the literal type is lost, for example:

```ts
@Component({
  template: `<button [disabled]="isAdjacent(-1)"></button>`
})
export class Example {
  isAdjacent(direction: -1 | 1): boolean { return false; }
}
```

would incorrectly report a type-check error:

> error TS2345: Argument of type 'number' is not assignable to parameter
  of type '-1 | 1'.

Additionally, the translated expression for the unary + operator would be
considered as arithmetic expression with an incompatible left-hand side:

> error TS2362: The left-hand side of an arithmetic operation must be of
  type 'any', 'number', 'bigint' or an enum type.

To resolve this issues, the implicit transformation should be avoided.
This commit adds a new unary AST node to represent these expressions,
allowing for more accurate type-checking.

Fixes #20845
Fixes #36178

PR Close #37918
2020-08-21 12:25:53 -07:00
crisbeto
e7da4040d6 fix(compiler-cli): adding references to const enums in runtime code (#38542)
We had a couple of places where we were assuming that if a particular
symbol has a value, then it will exist at runtime. This is true in most cases,
but it breaks down for `const` enums.

Fixes #38513.

PR Close #38542
2020-08-21 12:23:21 -07:00
Paul Gschwendtner
66e6b932d8 refactor(compiler-cli): skip class decorators in tooling constructor parameters transform (#37545)
We recently added a transformer to NGC that is responsible for downleveling Angular
decorators and constructor parameter types. The primary goal was to mitigate a
TypeScript limitation/issue that surfaces in Angular projects due to the heavy
reliance on type metadata being captured for DI. Additionally this is a pre-requisite
of making `tsickle` optional in the Angular bazel toolchain.

See: 401ef71ae5 for more context on this.

Another (less important) goal was to make sure that the CLI can re-use
this transformer for its JIT mode compilation. The CLI (as outlined in
the commit mentioned above), already has a transformer for downleveling
constructor parameters. We want to avoid this duplication and exported
the transform through the tooling-private compiler entry-point.

Early experiments in using this transformer over the current one, highlighted
that in JIT, class decorators cannot be downleveled. Angular relies on those
to be invoked immediately for JIT (so that factories etc. are generated upon loading)

The transformer we exposed, always downlevels such class decorators
though, so that would break CLI's JIT mode. We can address the CLI's
needs by adding another flag to skip class decorators. This will allow
us to continue with the goal of de-duplication.

PR Close #37545
2020-06-15 12:47:57 -07:00
Paul Gschwendtner
401ef71ae5 fix(compiler-cli): downlevel angular decorators to static properties (#37382)
In v7 of Angular we removed `tsickle` from the default `ngc` pipeline.
This had the negative potential of breaking ES2015 output and SSR due
to a limitation in TypeScript.

TypeScript by default preserves type information for decorated constructor
parameters when `emitDecoratorMetadata` is enabled. For example,
consider this snippet below:

```
@Directive()
export class MyDirective {
  constructor(button: MyButton) {}
}

export class MyButton {}
```

TypeScript would generate metadata for the `MyDirective` class it has
a decorator applied. This metadata would be needed in JIT mode, or
for libraries that provide `MyDirective` through NPM. The metadata would
look as followed:

```
let MyDirective = class MyDir {}

MyDirective = __decorate([
  Directive(),
  __metadata("design:paramtypes", [MyButton]),
], MyDirective);

let MyButton = class MyButton {}
```

Notice that TypeScript generated calls to `__decorate` and
`__metadata`. These calls are needed so that the Angular compiler
is able to determine whether `MyDirective` is actually an directive,
and what types are needed for dependency injection.

The limitation surfaces in this concrete example because `MyButton`
is declared after the `__metadata(..)` call, while `__metadata`
actually directly references `MyButton`. This is illegal though because
`MyButton` has not been declared at this point. This is due to the
so-called temporal dead zone in JavaScript. Errors like followed will
be reported at runtime when such file/code evaluates:

```
Uncaught ReferenceError: Cannot access 'MyButton' before initialization
```

As noted, this is a TypeScript limitation because ideally TypeScript
shouldn't evaluate `__metadata`/reference `MyButton` immediately.
Instead, it should defer the reference until `MyButton` is actually
declared. This limitation will not be fixed by the TypeScript team
though because it's a limitation as per current design and they will
only revisit this once the tc39 decorator proposal is finalized
(currently stage-2 at time of writing).

Given this wontfix on the TypeScript side, and our heavy reliance on
this metadata in libraries (and for JIT mode), we intend to fix this
from within the Angular compiler by downleveling decorators to static
properties that don't need to evaluate directly. For example:

```
MyDirective.ctorParameters = () => [MyButton];
```

With this snippet above, `MyButton` is not referenced directly. Only
lazily when the Angular runtime needs it. This mitigates the temporal
dead zone issue caused by a limitation in TypeScript's decorator
metadata output. See: https://github.com/microsoft/TypeScript/issues/27519.

In the past (as noted; before version 7), the Angular compiler by
default used tsickle that already performed this transformation. We
moved the transformation to the CLI for JIT and `ng-packager`, but now
we realize that we can move this all to a single place in the compiler
so that standalone ngc consumers can benefit too, and that we can
disable tsickle in our Bazel `ngc-wrapped` pipeline (that currently
still relies on tsickle to perform this decorator processing).

This transformation also has another positive side-effect of making
Angular application/library code more compatible with server-side
rendering. In principle, TypeScript would also preserve type information
for decorated class members (similar to how it did that for constructor
parameters) at runtime. This becomes an issue when your application
relies on native DOM globals for decorated class member types. e.g.

```
@Input() panelElement: HTMLElement;
```

Your application code would then reference `HTMLElement` directly
whenever the source file is loaded in NodeJS for SSR. `HTMLElement`
does not exist on the server though, so that will become an invalid
reference. One could work around this by providing global mocks for
these DOM symbols, but that doesn't match up with other places where
dependency injection is used for mocking DOM/browser specific symbols.

More context in this issue: #30586. The TL;DR here is that the Angular
compiler does not care about types for these class members, so it won't
ever reference `HTMLElement` at runtime.

Fixes #30106. Fixes #30586. Fixes #30141.
Resolves FW-2196. Resolves FW-2199.

PR Close #37382
2020-06-10 09:24:11 -07:00