Angular Ivy ['aɪvɪ]（常春藤）link

Angular Ivylink

Ivy 是 Angular 下一代編譯和渲染管道的代號。 從 Angular 的版本 9 開始，這個新的編譯器和執行時指令集就代替了老的編譯器和執行時（即檢視引擎 View Engine）成為了預設值。

Ivy is the code name for Angular's next-generation compilation and rendering pipeline. 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.

AOT 和 Ivylink

AOT and Ivylink

使用 Ivy 的 AOT 編譯速度更快，應該預設使用。在 angular.json 工作區配置檔案中，將專案的預設建構選項設定為始終使用 AOT 編譯。在 Ivy 中使用應用程式國際化（i18n）時，翻譯合併還需要使用 AOT 編譯。

AOT compilation with Ivy is faster and should be used by default. In the angular.json workspace configuration file, set the default build options for your project to always use AOT compilation. When using application internationalization (i18n) with Ivy, translation merging also requires the use of AOT compilation.

      
        content_copy
      
      {
  "projects": {
    "my-existing-project": {
      "architect": {
        "build": {
          "options": {
            ...
            "aot": true,
          }
        }
      }
    }
  }
}
    

Ivy 和函式庫link

Ivy and librarieslink

可以使用透過 View Engine 編譯器建立的函式庫來建構 Ivy 應用程式。此相容性由稱為 Angular 相容性編譯器（ ngcc ）的工具提供。CLI 命令在執行 Angular 建構時會根據需要執行 ngcc。

Ivy applications can be built with libraries that were created with the View Engine compiler. This compatibility is provided by a tool known as the Angular compatibility compiler (ngcc). CLI commands run ngcc as needed when performing an Angular build.

要了解關於如何發佈函式庫的知識，參閱發佈函式庫部分。

For more information on how to publish libraries see Publishing your Library.

保持函式庫的相容性link

Maintaining library compatibilitylink

如果你是函式庫作者，則應從版本 9 之後繼續使用 View Engine 編譯器。透過讓所有函式庫繼續使用 View Engine，你將與使用 Ivy 的預設 v9 應用程式以及已選擇的應用程式保持相容性。

If you are a library author, you should keep using the View Engine compiler as of version 9. 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.

關於如何編譯或打包 Angular 函式庫的更多資訊，請參閱建立函式庫指南。當你使用 Angular CLI 或 ng-packagr 整合的工具時，將始終以正確的方式自動建構你的函式庫。

See the Creating Libraries guide for more on how to compile or bundle your Angular library. When you use the tools integrated into the Angular CLI or ng-packagr, your library will always be built the right way automatically.

Ivy 和 Universal / App shelllink

Ivy and Universal/App shelllink

在版本 9 中，用於 App Shell 和 Angular Universal 的伺服器建構器會預設啟用 bundleDependencies 選項。如果你選擇放棄打套件相依項，則需要執行獨立的 Angular 相容性編譯器（ngcc）。這是必要的，否則 Node 將無法解析 Ivy 版本的程式套件。

In version 9, the server builder which is used for App shell and Angular Universal has the bundleDependencies option enabled by default. If you opt-out of bundling dependencies you will need to run the standalone Angular compatibility compiler (ngcc). This is needed because otherwise Node will be unable to resolve the Ivy version of the packages.

你可以在每次安裝 ngcc 後透過新增 postinstall npm 指令碼來執行 ngcc ：

You can run ngcc after each installation of node_modules by adding a postinstall npm script:

      
        content_copy
      
      {
  "scripts": {
    "postinstall": "ngcc"
  }
}
    

選擇性禁用版本 9 中的 Ivylink

Opting out of Ivy in version 9link

在版本 9 中，Ivy 是預設值。為了在更新過程中與當前工作流相容，你可以選擇性禁用 Ivy，繼續使用以前的編譯器 View Engine。

In version 9, Ivy is the default. 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.

要選擇性禁用 Ivy，要在專案的 TypeScript 配置中更改 angularCompilerOptions，它通常位於工作區根目錄的 tsconfig.app.json 中。

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.

從版本 9 開始，預設情況下 enableIvy 標誌的值設定為 true。

The value of the enableIvy flag is set to true by default, as of version 9.

以下範例顯示瞭如何將 enableIvy 選項設定為 false 以便選擇性的禁用 Ivy。

The following example shows how to set the enableIvy option to false in order to opt out of Ivy.

      
        content_copy
      
      {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}
    

如果禁用 Ivy 並且專案使用國際化，則還可以從預設位於 src/polyfills.ts 的專案的Polyfill指令碼檔案中刪除 @angular/localize 執行時元件。

If you disable Ivy and the project uses internationalization, you can also remove the @angular/localize runtime component from the project's polyfills file located be default at src/polyfills.ts.

要移除它，請刪除此Polyfill指令碼檔案中的一行 import '@angular/localize/init';。

To remove, delete the import '@angular/localize/init'; line from the polyfills file.

      
        content_copy
      
      /***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';
    

在沒有 Ivy 的情況下使用 SSRlink

Using SSR without Ivylink

如果選擇性禁用 Ivy，並且你的應用程式使用 Angular Universal 在伺服器上渲染 Angular 應用程式，則還必須更改伺服器執行引導的方式。

If you opt out of Ivy and your application uses Angular Universal to render Angular applications on the server, you must also change the way the server performs bootstrapping.

下面的範例展示了如何修改 server.ts 檔案以將 AppServerModuleNgFactory 提供為引導模組。

The following example shows how you modify the server.ts file to provide the AppServerModuleNgFactory as the bootstrap module.

• 從 app.server.module.ngfactory 虛擬檔案中匯入 AppServerModuleNgFactory。

  Import AppServerModuleNgFactory from the app.server.module.ngfactory virtual file.

• 在 ngExpressEngine 呼叫中設定 bootstrap: AppServerModuleNgFactory。

  Set bootstrap: AppServerModuleNgFactory in the ngExpressEngine call.

      
        content_copy
      
      import 'zone.js/node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { APP_BASE_HREF } from '@angular/common';

import { AppServerModuleNgFactory } from './src/app/app.server.module.ngfactory';

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/ivy-test/browser');

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // app.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run() {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
if (mainModule && mainModule.filename === __filename) {
  run();
}

export * from './src/main.server';