{ "id": "guide/ivy", "title": "Angular Ivy", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Angular Ivylink

\n

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

\n
\n

Learn more about the Compiler and Runtime in these videos from our team.

\n
\n\n

AOT and Ivylink

\n

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

\n\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\n

Ivy and librarieslink

\n

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 (ngcc).\nCLI commands run ngcc as needed when performing an Angular build.

\n

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

\n\n

Maintaining library compatibilitylink

\n

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.

\n

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

\n\n

Ivy and Universal/App shelllink

\n

In version 9, the server builder which is used for App shell and Angular Universal has the bundleDependencies option enabled by default.\nIf 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.

\n

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

\n\n{\n \"scripts\": {\n \"postinstall\": \"ngcc\"\n }\n}\n\n
\n\n
\n\n

Opting out of Ivy in version 9link

\n

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.

\n
\n

Before disabling Ivy, check out the debugging recommendations in the Ivy Compatibility Guide.

\n
\n

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.

\n

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

\n

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

\n\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\n
\n

If you disable Ivy, you might also want to reconsider whether to make AOT compilation the default for your application development, as described above.

\n

To revert the compiler default, set the build option aot: false in the angular.json configuration file.

\n
\n

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.

\n

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

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

Using SSR without Ivylink

\n

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.

\n

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

\n\n\nimport 'zone.js/node';\n\nimport { ngExpressEngine } from '@nguniversal/express-engine';\nimport * as express from 'express';\nimport { join } from 'path';\n\nimport { APP_BASE_HREF } 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/browser');\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 static files from /browser\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: APP_BASE_HREF, 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\n\n \n
\n\n\n" }