From ee7c5ed6204c3bfa7e290aaadad801d080fc0f56 Mon Sep 17 00:00:00 2001
From: Filipe Silva <filipematossilva@gmail.com>
Date: Mon, 25 Mar 2019 16:19:17 +0000
Subject: [PATCH] docs: add Ivy lazy load opt-in (#29506)

PR Close #29506
---
 aio/content/guide/ivy.md | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/aio/content/guide/ivy.md b/aio/content/guide/ivy.md
index f8557f7316..34f0de4645 100644
--- a/aio/content/guide/ivy.md
+++ b/aio/content/guide/ivy.md
@@ -12,7 +12,7 @@ ng new shiny-ivy-app --enable-ivy
 ```
 
 The new project is automatically configured for Ivy.
-- The `enableIvy` option is set to `true` in `src/tsconfig.app.json`.
+- The `enableIvy` option is set to `true` in `tsconfig.app.json`.
 - The `"aot": true` option is added to your default build options.
 - A `postinstall` script is provided for the [Angular Compatibility Compiler](#ngcc).
 
@@ -21,17 +21,34 @@ The new project is automatically configured for Ivy.
 
 You can update an existing project to use Ivy by making the following configuration changes.
 
-- Add the `enableIvy` option in the `angularCompilerOptions` in your project's `src/tsconfig.app.json`.
-To use Ivy before version 8 is final, add the `allowEmptyCodegenFiles`as well.
+- Add the `enableIvy` option in the `angularCompilerOptions` in your project's `tsconfig.app.json`.
 ```json
 {
   "compilerOptions": { ... },
   "angularCompilerOptions": {
-    "enableIvy": true,
-    "allowEmptyCodegenFiles": true,
+    "enableIvy": true
   }
 }
 ```
+- Set `"module": "esnext"` inside `compilerOptions` in your `tsconfig.json` to support the [ES `import()` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).
+```json
+{
+  "compilerOptions": {
+    ...
+    "module": "esnext",
+  }
+}
+```
+- Update your lazy routes to use the `import()` statement. You can use [angular-lazy-routes-fix](https://github.com/phenomnomnominal/angular-lazy-routes-fix) to automatically transform them.
+```typescript
+const routes: Routes = [{
+  path: 'lazy',
+  // The string syntax for loadChildren is not supported in Ivy:
+  //   loadChildren: './lazy/lazy.module#LazyModule'
+  // Instead use the import statement:
+  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
+}];
+```
 - In the `angular.json` workspace configuration file, set the default build options for your project to always use AOT compilation.
 ```json
 {
@@ -67,7 +84,8 @@ npm install
 ## Switching back to the current compiler
 
 To stop using the Ivy compiler you need to undo the steps taken when [updating to use Ivy](#updating).
-- Set `enableIvy` to false in `src/tsconfig.app.json`, or remove it completely.
+- Set `enableIvy` to false in `tsconfig.app.json`, or remove it completely.
+- Add `"experimentalImportFactories": true` to your default build options in `angular.json` to support the import statement in `loadChildren` outside Ivy.
 - Remove `"aot": true` from your default build options if you didn't have it there before.
 - Remove the `postinstall` script.
 - Delete and reinstall your node modules.