角度ガイド

AngularIvyの例



Angular Ivy Example



IvyはAngularのコードネームです 次世代のコンパイルおよびレンダリングパイプライン 。 Angularのバージョン9リリースでは、View Engineと呼ばれる古いコンパイラーとランタイムの代わりに、新しいコンパイラーとランタイム命令がデフォルトで使用されます。

詳細については、 コンパイラ と ランタイム 私たちのチームからのこれらのビデオで。



AOTとアイビー

Ivyを使用したAOTコンパイルは高速であり、デフォルトで使用する必要があります。の中にangle.jsonワークスペース構成ファイルで、プロジェクトのデフォルトのビルドオプションを設定して、常にAOTコンパイルを使用します。 Ivyでアプリケーションの国際化（i18n）を使用する場合、 翻訳のマージ また、AOTコンパイルを使用する必要があります。

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

アイビーとライブラリ

Ivyアプリケーションは、ViewEngineコンパイラで作成されたライブラリを使用して構築できます。この互換性は、Angular互換性コンパイラ（ngcc）。 CLIコマンドが実行されますAngularビルドを実行するときに必要に応じてngcc。



ライブラリを公開する方法の詳細については、を参照してください。 ライブラリを公開する 。

ライブラリの互換性を維持する

ライブラリの作成者は、バージョン9以降もViewEngineコンパイラを使用し続ける必要があります。すべてのライブラリでViewEngineを引き続き使用することにより、Ivyを使用するデフォルトのv9アプリケーション、および選択したアプリケーションとの互換性を維持できます。 ViewEngineの使用を継続します。

を参照してください ライブラリの作成 Angularライブラリをコンパイルまたはバンドルする方法の詳細についてはガイドをご覧ください。 AngularCLIに統合されたツールを使用する場合またはng-packagr、ライブラリは常に正しい方法で自動的に構築されます。



アイビーとユニバーサル/アプリシェル

バージョン9では、 アプリシェル と Angular Universal 持っているbundleDependenciesオプションはデフォルトで有効になっています。依存関係のバンドルをオプトアウトする場合は、スタンドアロンのAngular互換性コンパイラーを実行する必要があります（ngcc）。これが必要なのは、そうしないと、ノードがIvyバージョンのパッケージを解決できなくなるためです。

あなたは実行することができますnode_modulesをインストールするたびに、ポストインストール npmスクリプト ：

{ 'scripts': { 'postinstall': 'ngcc' } }
  • NSインストール後のスクリプトは、のすべてのインストールで実行されますnode_modules、によって実行されるものを含む更新の追加の。
  • 使用しないでください--create-ivy-entry-points。これにより、ノードはパッケージのIvyバージョンを正しく解決しなくなります。

バージョン9でIvyをオプトアウトする

バージョン9では、Ivyがデフォルトです。更新プロセス中の現在のワークフローとの互換性のために、Ivyをオプトアウトして、以前のコンパイラであるViewEngineを引き続き使用することを選択できます。

Ivyを無効にする前に、のデバッグに関する推奨事項を確認してください。 アイビー互換性ガイド 。

アイビーをオプトアウトするには、プロジェクトのTypeScript構成のangularCompilerOptions。最も一般的には次の場所にあります。ワークスペースのルートにあるtsconfig.app.json。

の値enableIvyフラグがに設定されているバージョン9以降、デフォルトでtrue。

次の例は、を設定する方法を示していますenableIvyオプションをアイビーをオプトアウトするためにfalse。

{ '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コンパイルをアプリケーション開発のデフォルトにするかどうかを再検討することもできます。 その上 。

コンパイラのデフォルトに戻すには、ビルドオプションを設定しますaot：falseangle.json構成ファイル。

Ivyを無効にし、プロジェクトで国際化を使用している場合は、@ angular / localizeランタイムコンポーネントは、デフォルトで次の場所にあるプロジェクトのポリフィルファイルから取得します。src /polyfills.ts。

削除するには、import '@ angular / localize / init'; polyfillsファイルからの行。

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

アイビーなしでSSRを使用する

Ivyをオプトアウトし、アプリケーションが使用する場合 Angular Universal サーバー上でAngularアプリケーションをレンダリングするには、サーバーがブートストラップを実行する方法も変更する必要があります。

次の例は、提供するserver.tsファイルブートストラップモジュールとしてのAppServerModuleNgFactory。

  • 輸入からのAppServerModuleNgFactoryapp.server.module.ngfactory仮想ファイル。
  • 設定ブートストラップ：AppServerModuleNgFactoryngExpressEngine呼び出し。
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';