5 lines
12 KiB
JSON
5 lines
12 KiB
JSON
{
|
|
"id": "guide/ivy",
|
|
"title": "Angular Ivy",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/ivy.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"angular-ivy\">Angular Ivy<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy#angular-ivy\"><i class=\"material-icons\">link</i></a></h1>\n<p>Ivy is the code name for Angular's <a href=\"https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7\">next-generation compilation and rendering pipeline</a>.\nWith 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.</p>\n<div class=\"alert is-helpful\">\n<p>Learn more about the <a href=\"https://www.youtube.com/watch?v=anphffaCZrQ\">Compiler</a> and <a href=\"https://www.youtube.com/watch?v=S0o-4yc2n-8\">Runtime</a> in these videos from our team.</p>\n</div>\n<a id=\"aot-and-ivy\"></a>\n<h2 id=\"aot-and-ivy\">AOT and Ivy<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy#aot-and-ivy\"><i class=\"material-icons\">link</i></a></h2>\n<p>AOT compilation with Ivy is faster and should be used by default.\nIn the <code>angular.json</code> workspace configuration file, set the default build options for your project to always use AOT compilation.\nWhen using application internationalization (i18n) with Ivy, <a href=\"guide/i18n#merge\">translation merging</a> also requires the use of AOT compilation.</p>\n<code-example language=\"json\" header=\"angular.json\">\n\n{\n \"projects\": {\n \"my-existing-project\": {\n \"architect\": {\n \"build\": {\n \"options\": {\n ...\n \"aot\": true,\n }\n }\n }\n }\n }\n}\n</code-example>\n<h2 id=\"ivy-and-libraries\">Ivy and libraries<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy#ivy-and-libraries\"><i class=\"material-icons\">link</i></a></h2>\n<p>Ivy applications can be built with libraries that were created with the View Engine compiler.\nThis compatibility is provided by a tool known as the Angular compatibility compiler (<code>ngcc</code>).\nCLI commands run <code>ngcc</code> as needed when performing an Angular build.</p>\n<p>For more information on how to publish libraries see <a href=\"guide/creating-libraries#publishing-your-library\">Publishing your Library</a>.</p>\n<a id=\"maintaining-library-compatibility\"></a>\n<h3 id=\"maintaining-library-compatibility\">Maintaining library compatibility<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy#maintaining-library-compatibility\"><i class=\"material-icons\">link</i></a></h3>\n<p>If you are a library author, you should keep using the View Engine compiler as of version 9.\nBy 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.</p>\n<p>See the <a href=\"guide/creating-libraries\">Creating Libraries</a> guide for more on how to compile or bundle your Angular library.\nWhen you use the tools integrated into the Angular CLI or <code>ng-packagr</code>, your library will always be built the right way automatically.</p>\n<a id=\"ivy-and-universal-app-shell\"></a>\n<h2 id=\"ivy-and-universalapp-shell\">Ivy and Universal/App shell<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy#ivy-and-universalapp-shell\"><i class=\"material-icons\">link</i></a></h2>\n<p>In version 9, the server builder which is used for <a href=\"guide/app-shell\">App shell</a> and <a href=\"guide/universal\">Angular Universal</a> has the <code>bundleDependencies</code> option enabled by default.\nIf you opt-out of bundling dependencies you will need to run the standalone Angular compatibility compiler (<code>ngcc</code>). This is needed because otherwise Node will be unable to resolve the Ivy version of the packages.</p>\n<p>You can run <code>ngcc</code> after each installation of node_modules by adding a <code>postinstall</code> <a href=\"https://docs.npmjs.com/misc/scripts\">npm script</a>:</p>\n<code-example language=\"json\" header=\"package.json\">\n{\n \"scripts\": {\n \"postinstall\": \"ngcc\"\n }\n}\n</code-example>\n<div class=\"alert is-important\">\n<ul>\n<li>\n<p>The <code>postinstall</code> script will run on every installation of <code>node_modules</code>, including those performed by <code>ng update</code> and <code>ng add</code>.</p>\n</li>\n<li>\n<p>Don't use <code>--create-ivy-entry-points</code> as this will cause Node not to resolve the Ivy version of the packages correctly.</p>\n</li>\n</ul>\n</div>\n<a id=\"opting-out-of-angular-ivy\"></a>\n<h2 id=\"opting-out-of-ivy-in-version-9\">Opting out of Ivy in version 9<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy#opting-out-of-ivy-in-version-9\"><i class=\"material-icons\">link</i></a></h2>\n<p>In version 9, Ivy is the default.\nFor compatibility with current workflows during the update process, you can choose to opt out of Ivy and continue using the previous compiler, View Engine.</p>\n<div class=\"alert is-helpful\">\n<p>Before disabling Ivy, check out the debugging recommendations in the <a href=\"guide/ivy-compatibility#debugging\">Ivy Compatibility Guide</a>.</p>\n</div>\n<p>To opt out of Ivy, change the <code>angularCompilerOptions</code> in your project's TypeScript configuration, most commonly located at <code>tsconfig.app.json</code> at the root of the workspace.</p>\n<p>The value of the <code>enableIvy</code> flag is set to <code>true</code> by default, as of version 9.</p>\n<p>The following example shows how to set the <code>enableIvy</code> option to <code>false</code> in order to opt out of Ivy.</p>\n<code-example language=\"json\" header=\"tsconfig.app.json\">\n{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./out-tsc/app\",\n \"types\": []\n },\n \"files\": [\n \"src/main.ts\",\n \"src/polyfills.ts\"\n ],\n \"include\": [\n \"src/**/*.d.ts\"\n ],\n \"angularCompilerOptions\": {\n \"enableIvy\": false\n }\n}\n</code-example>\n<div class=\"alert is-important\">\n<p>If you disable Ivy, you might also want to reconsider whether to make AOT compilation the default for your application development, as described <a href=\"guide/ivy#aot-and-ivy\">above</a>.</p>\n<p>To revert the compiler default, set the build option <code>aot: false</code> in the <code>angular.json</code> configuration file.</p>\n</div>\n<p>If you disable Ivy and the project uses internationalization, you can also remove the <code>@angular/localize</code> runtime component from the project's polyfills file located be default at <code>src/polyfills.ts</code>.</p>\n<p>To remove, delete the <code>import '@angular/localize/init';</code> line from the polyfills file.</p>\n<code-example language=\"typescript\" header=\"polyfills.ts\">\n/***************************************************************************************************\n * Load `$localize` onto the <a href=\"api/core/global\" class=\"code-anchor\">global</a> scope - used if i18n tags appear in Angular templates.\n */\nimport '@angular/localize/init';\n</code-example>\n<a id=\"using-ssr-without-angular-ivy\"></a>\n<h3 id=\"using-ssr-without-ivy\">Using SSR without Ivy<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ivy#using-ssr-without-ivy\"><i class=\"material-icons\">link</i></a></h3>\n<p>If you opt out of Ivy and your application uses <a href=\"guide/universal\">Angular Universal</a> to render Angular applications on the server, you must also change the way the server performs bootstrapping.</p>\n<p>The following example shows how you modify the <code>server.ts</code> file to provide the <code>AppServerModuleNgFactory</code> as the bootstrap module.</p>\n<ul>\n<li>Import <code>AppServerModuleNgFactory</code> from the <code>app.server.module.ngfactory</code> virtual file.</li>\n<li>Set <code>bootstrap: AppServerModuleNgFactory</code> in the <code>ngExpressEngine</code> call.</li>\n</ul>\n<code-example language=\"typescript\" header=\"server.ts\">\nimport 'zone.js/node';\n\nimport { ngExpressEngine } from '@nguniversal/express-engine';\nimport * as express from 'express';\nimport { join } from 'path';\n\nimport { <a href=\"api/common/APP_BASE_HREF\" class=\"code-anchor\">APP_BASE_HREF</a> } from '@angular/common';\n\nimport { AppServerModuleNgFactory } from './src/app/app.server.module.ngfactory';\n\n// The Express app is exported so that it can be used by serverless Functions.\nexport function app() {\n const server = express();\n const distFolder = join(process.cwd(), 'dist/ivy-test/<a href=\"api/animations/browser\" class=\"code-anchor\">browser</a>');\n\n // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)\n server.engine('html', ngExpressEngine({\n bootstrap: AppServerModuleNgFactory,\n }));\n\n server.set('view engine', 'html');\n server.set('views', distFolder);\n\n // Example Express Rest API endpoints\n // app.get('/api/**', (req, res) => { });\n // Serve <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> files from /<a href=\"api/animations/browser\" class=\"code-anchor\">browser</a>\n server.get('*.*', express.static(distFolder, {\n maxAge: '1y'\n }));\n\n // All regular routes use the Universal engine\n server.get('*', (req, res) => {\n res.render('index', { req, providers: [{ provide: <a href=\"api/common/APP_BASE_HREF\" class=\"code-anchor\">APP_BASE_HREF</a>, useValue: req.baseUrl }] });\n });\n\n return server;\n}\n\nfunction run() {\n const port = process.env.PORT || 4000;\n\n // Start up the Node server\n const server = app();\n server.listen(port, () => {\n console.log(`Node Express server listening on http://localhost:${port}`);\n });\n}\n\n// Webpack will replace 'require' with '__webpack_require__'\n// '__non_webpack_require__' is a proxy to Node 'require'\n// The below code is to ensure that the server is run only when not requiring the bundle.\ndeclare const __non_webpack_require__: NodeRequire;\nconst mainModule = __non_webpack_require__.main;\nif (mainModule && mainModule.filename === __filename) {\n run();\n}\n\nexport * from './src/main.server';\n</code-example>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/angular-compiler-options\n - guide/aot-compiler\n - guide/glossary\n - guide/i18n\n - guide/ivy-compatibility\n - guide/updating-to-version-11\n-->\n<!-- links from this doc:\n - api/animations/browser\n - api/common/APP_BASE_HREF\n - api/core/global\n - api/upgrade/static\n - guide/app-shell\n - guide/creating-libraries\n - guide/creating-libraries#publishing-your-library\n - guide/i18n#merge\n - guide/ivy#angular-ivy\n - guide/ivy#aot-and-ivy\n - guide/ivy#ivy-and-libraries\n - guide/ivy#ivy-and-universalapp-shell\n - guide/ivy#maintaining-library-compatibility\n - guide/ivy#opting-out-of-ivy-in-version-9\n - guide/ivy#using-ssr-without-ivy\n - guide/ivy-compatibility#debugging\n - guide/universal\n - https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7\n - https://docs.npmjs.com/misc/scripts\n - https://github.com/angular/angular/edit/master/aio/content/guide/ivy.md?message=docs%3A%20describe%20your%20change...\n - https://www.youtube.com/watch?v=S0o-4yc2n-8\n - https://www.youtube.com/watch?v=anphffaCZrQ\n-->"
|
|
} |