Angular12 Ivy Compiler

The next-generation compilation and rendering pipeline for Angular is known as Ivy. With the introduction of Angular 12, the modern runtime and compiler instructions are utilized by default rather than the previous View Engine compiler and runtime.

Ivy and AOT compilation

Because Ivy's AOT compiles faster, it should be used as the default. In the angular.json workspace configuration file, set the default build settings for your project to always utilize AOT compilation. When using application internationalization, translation merging with Ivy demands the use of AOT compilation (i18n)

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

Libraries and Ivy

Libraries developed using the View Engine compiler may be used to develop Ivy applications. An Angular compatibility compiler is a tool that provides this compatibility (ngcc). When running an Angular build, CLI instructions call ngcc when needed.

How to Opt-Out of Ivy

Ivy has been the default compiler in Angular since version 9. To maintain compatibility with existing processes during the upgrading process, you might choose to forego Ivy in favor of the View Engine compiler.

To disable Ivy, change the angularCompilerOptions setting in your project's TypeScript settings, which are usually available at tsconfig.app.json in the workspace's root.

Example of disabling Ivy

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

If you disable Ivy and your project utilizes internationalization, you need also remove the @angular/localize runtime component from the project's polyfills file, which is often located at src/polyfills.ts.

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

How to use SSR without Ivy

If you don't want to use Ivy and instead want to render Angular apps on the server using Angular Universal, you'll need to change the server bootstraps.

The following example shows how to include the AppServerModuleNgFactory as the server.ts file's bootstrap module

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';