Angular Ivy ['aɪvɪ](常春藤)
Angular Ivy
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 和 Ivy
AOT and Ivy
使用 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.
{
"projects": {
"my-existing-project": {
"architect": {
"build": {
"options": {
...
"aot": true,
}
}
}
}
}
}
Ivy 和函式庫
Ivy and libraries
可以使用透過 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.
保持函式庫的相容性
Maintaining library compatibility
如果你是函式庫作者,則應從版本 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 shell
Ivy and Universal/App shell
在版本 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:
{
"scripts": {
"postinstall": "ngcc"
}
}
不要使用
--create-ivy-entry-points
因為這將導致 Node 無法正確解析軟體套件的 Ivy 版本。The
postinstall
script will run on every installation ofnode_modules
, including those performed byng update
andng add
. *Don't use--create-ivy-entry-points
as this will cause Node not to resolve the Ivy version of the packages correctly.
選擇性禁用版本 9 中的 Ivy
Opting out of Ivy in version 9
在版本 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 之前,請檢視 Ivy 相容性指南中的除錯建議。
Before disabling Ivy, check out the debugging recommendations in the Ivy Compatibility Guide.
要選擇性禁用 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.
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
],
"angularCompilerOptions": {
"enableIvy": false
}
}
如果禁用 Ivy,則可能還需要重新評估是否將 AOT 編譯設定為應用程式開發的預設設定,如上所述。
If you disable Ivy, you might also want to reconsider whether to make AOT compilation the default for your application development, as described above.
要恢復編譯器的預設設定,請在 angular.json
配置檔案中設定建構選項 aot: false
。
To revert the compiler default, set the build option aot: false
in the angular.json
configuration file.
如果禁用 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.
/***************************************************************************************************
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
*/
import '@angular/localize/init';
在沒有 Ivy 的情況下使用 SSR
Using SSR without Ivy
如果選擇性禁用 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 theapp.server.module.ngfactory
virtual file.在
ngExpressEngine
呼叫中設定bootstrap: AppServerModuleNgFactory
。Set
bootstrap: AppServerModuleNgFactory
in thengExpressEngine
call.
import 'zone.js/dist/zone-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';