You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aio/content/guide/aot-compiler.md
+15Lines changed: 15 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -564,10 +564,25 @@ It does not, however, rewrite the `.d.ts` file, so TypeScript doesn't recognize
564
564
{@a binding-expression-validation}
565
565
## Phase 3: Template type checking
566
566
567
+
One of the Angular compiler's most helpful features is the ability to type-check expressions within templates, and catch any errors before they cause crashes at runtime.
567
568
In the template type-checking phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates.
569
+
568
570
Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json`
569
571
(see [Angular Compiler Options](guide/angular-compiler-options)).
570
572
573
+
<div class="alert is-helpful>
574
+
575
+
In [Angular Ivy](guide/ivy), the template type checker has been completely rewritten to be more capable as well as stricter, meaning it can catch a variety of new errors that the previous type checker would not detect.
576
+
577
+
As a result, templates that previously compiled under View Engine can fail type checking under Ivy. This can happen because Ivy's stricter checking catches genuine errors, or because application code is not typed correctly, or because the application uses libraries in which typings are inaccurate or not specific enough.
578
+
579
+
This stricter type checking is not enabled by default in version 9, but can be enabled by setting the `strictTemplates` configuration option.
580
+
We do expect to make strict type checking the default in the future.
581
+
582
+
<!-- For more information about type-checking options, and about improvements to template type checking in version 9 and above, see [Template type checking](guide/template-type-checking). -->
583
+
584
+
</div>
585
+
571
586
Template validation produces error messages when a type error is detected in a template binding
572
587
expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts`
Copy file name to clipboardExpand all lines: aio/content/guide/ivy-compatibility.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,29 +1,29 @@
1
1
# Ivy Compatibility Guide
2
2
3
-
The Angular team has worked hard to ensure Ivy is as backwards-compatible with the previous rendering engine ("View Engine") as possible.
3
+
The Angular team has worked hard to ensure Ivy is as backwards-compatible with the previous rendering engine ("View Engine") as possible.
4
4
However, in rare cases, minor changes were necessary to ensure that the Angular's behavior was predictable and consistent, correcting issues in the View Engine implementation.
5
5
In order to smooth the transition, we have provided automated migrations wherever possible so your application and library code is migrated automatically by the CLI.
6
6
That said, some applications will likely need to apply some manual updates.
7
7
8
8
{@a debugging}
9
9
## How to Debug Errors with Ivy
10
10
11
-
In version 9, [a few deprecated APIs have been removed](guide/updating-to-version-9#removals) and there are a [few breaking changes](guide/updating-to-version-9#breaking-changes) unrelated to Ivy.
12
-
If you're seeing errors after updating to version 9, you'll first want to rule those changes out.
11
+
In version 9, [a few deprecated APIs have been removed](guide/updating-to-version-9#removals) and there are a [few breaking changes](guide/updating-to-version-9#breaking-changes) unrelated to Ivy.
12
+
If you're seeing errors after updating to version 9, you'll first want to rule those changes out.
13
13
14
14
To do so, temporarily [turn off Ivy in your `tsconfig.json`](guide/ivy#opting-out-of-angular-ivy) and re-start your app.
15
15
16
16
If you're still seeing the errors, they are not specific to Ivy. In this case, you may want to consult the [general version 9 guide](guide/updating-to-version-9).
17
-
18
-
If the errors are gone, switch back to Ivy by removing the changes to the `tsconfig.json` and review the list of expected changes below.
17
+
18
+
If the errors are gone, switch back to Ivy by removing the changes to the `tsconfig.json` and review the list of expected changes below.
19
19
20
20
21
21
{@a common-changes}
22
22
## Changes You May See
23
23
24
-
Below are a few breaking changes that are more likely than others to be visible as applications are transitioning to Ivy.
24
+
Below are a few breaking changes that are more likely than others to be visible as applications are transitioning to Ivy.
25
25
26
-
- By default, `@ContentChildren` queries will only search direct child nodes in the DOM hierarchy (previously, they would search any nesting level in the DOM as long as another directive wasn't matched above it).
26
+
- By default, `@ContentChildren` queries will only search direct child nodes in the DOM hierarchy (previously, they would search any nesting level in the DOM as long as another directive wasn't matched above it).
27
27
28
28
- All classes that use Angular DI must have an Angular decorator like `@Directive()` or `@Injectable` (previously, undecorated classes were allowed if an ancestor class or subclass had a decorator).
29
29
@@ -33,17 +33,17 @@ Below are a few breaking changes that are more likely than others to be visible
33
33
{@a less-common-changes}
34
34
## Less Common Changes
35
35
36
-
The following changes will be visible more rarely, as they mostly deal in edge cases or unspecified behavior that is not part of our public API.
36
+
The following changes will be visible more rarely, as they mostly deal in edge cases or unspecified behavior that is not part of our public API.
37
37
38
38
- Properties like `host` inside `@Component` and `@Directive` decorators can be inherited (previously, only properties with explicit field decorators like `@HostBinding` would be inherited).
39
39
40
40
- HammerJS support is opt-in through importing the `HammerModule` (previously, it was always included in production bundles regardless of whether the app used HammerJS).
41
41
42
42
-`@ContentChild` and `@ContentChildren` queries will no longer be able to match their directive's own host node (previously, these queries would match the host node in addition to its content children).
43
43
44
-
- If a token is injected with the `@Host` or `@Self` flag, the module injector is not searched for that token (previously, tokens marked with these flags would still search at the module level).
44
+
- If a token is injected with the `@Host` or `@Self` flag, the module injector is not searched for that token (previously, tokens marked with these flags would still search at the module level).
45
45
46
-
- If a template is declared in one view but inserted into a different view, change detection will occur for that template only when its insertion point is checked (previously, change detection would also run when its declaration point was checked).
46
+
- If a template is declared in one view but inserted into a different view, change detection will occur for that template only when its insertion point is checked (previously, change detection would also run when its declaration point was checked).
47
47
48
48
- When accessing multiple local refs with the same name in template bindings, the first is matched (previously, the last instance was matched).
49
49
@@ -57,7 +57,7 @@ The following changes will be visible more rarely, as they mostly deal in edge c
57
57
58
58
- It is now an error to assign values to template-only variables like `item` in `ngFor="let item of items"` (previously, the compiler would ignore these assignments).
59
59
60
-
- It's no longer possible to overwrite lifecycle hooks with mocks on directive instances for testing (instead, modify the lifecycle hook on the directive type itself).
60
+
- It's no longer possible to overwrite lifecycle hooks with mocks on directive instances for testing (instead, modify the lifecycle hook on the directive type itself).
61
61
62
62
- Special injection tokens (e.g. `TemplateRef` or `ViewContainerRef`) return a new instance whenever they are requested (previously, instances of special tokens were shared if requested on the same node). This primarily affects tests that do identity comparison of these objects.
Ivy is the code name for Angular's [next-generation compilation and rendering pipeline](https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7).
4
-
Starting with Angular version 9, Ivy compilation and rendering pipeline is enabled by default.
5
-
The previous compilation and rendering pipeline, View Engine, is deprecated in version 9, and will be removed at a later date.
6
-
You can choose to opt out of Ivy and continue using View Engine while making the transition.
3
+
Ivy is the code name for Angular's [next-generation compilation and rendering pipeline](https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7).
4
+
With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine.
5
+
6
+
<divclass="alert is-helpful">
7
+
8
+
Learn more about the [Compiler](https://www.youtube.com/watch?v=anphffaCZrQ) and [Runtime](https://www.youtube.com/watch?v=S0o-4yc2n-8) in these videos from our team.
7
9
8
-
To opt out of Ivy and continue using View Engine for an existing project, set the `enableIvy` option in the `angularCompilerOptions` in your project's `tsconfig.json` to `false`.
@@ -43,13 +34,53 @@ set to `false` and it's only set to `true` in the `production` configuration.
43
34
}
44
35
</code-example>
45
36
46
-
Ivy projects usually contain a `postinstall` script in the `scripts` section of `package.json` that converts packages in `node_modules` to use Ivy as well.
47
-
When you opt out of Ivy, remove this script. Remove the following line in package.json.
37
+
## Ivy and libraries
38
+
39
+
Ivy applications can be built with libraries that were created with the View Engine compiler.
40
+
This compatibility is provided by a tool known as the Angular compatibility compiler (`ngcc`).
41
+
CLI commands run `ngcc` as needed, either after npm installation of dependencies or when performing an Angular build.
42
+
43
+
If you are a library author, you should keep using the View Engine compiler as of version 9.
44
+
By having all libraries continue to use View Engine, you will maintain compatibility with default v9 applications that use Ivy, as well as with applications that have opted to continue using View Engine.
See the [Creating Libraries](guide/creating-libraries) guide for more on how to compile or bundle your Angular library.
47
+
When you use the tools integrated into the Angular CLI or `ng-packagr`, your library will always be built the right way automatically.
48
+
49
+
{@a opting-out-of-angular-ivy}
50
+
## Opting out of Ivy in version 9
51
+
52
+
In version 9, Ivy is the default.
53
+
For compatibility with current workflows during the update process, you can choose to opt out of Ivy and continue using the previous compiler, View Engine.
54
+
55
+
<divclass="alertis-helpful>
56
+
57
+
Before disabling Ivy, check out the debugging recommendations in the [Ivy Compatibility Guide](guide/ivy-compatibility#debugging).
58
+
59
+
</div>
60
+
61
+
To opt out of Ivy, change the `angularCompilerOptions` in your project's TypeScript configuration, most commonly located at `tsconfig.app.json` at the root of the workspace.
62
+
63
+
The value of the `enableIvy` flag is set to `true` by default, as of version 9.
64
+
The following example shows how to set the `enableIvy` option to `false` in order to opt out of Ivy.
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
53
-
}
68
+
"extends": "./tsconfig.json",
69
+
"compilerOptions": {
70
+
"outDir": "./out-tsc/app",
71
+
"types": []
72
+
},
73
+
"include": [
74
+
"src/**/*.ts"
75
+
],
76
+
"exclude": [
77
+
"src/test.ts",
78
+
"src/**/*.spec.ts"
79
+
],
80
+
"angularCompilerOptions": {
81
+
"enableIvy": false
82
+
}
54
83
}
55
84
</code-example>
85
+
86
+
If you disable Ivy, you might also want to reconsider whether to make AOT compilation the default for your application development, as described [above](#aot-and-ivy). To revert the compiler default, set the build option `aot: false` in the `angular.json` configuration file.
0 commit comments