@angular/compiler

Template Compilation

This feature allows you to compile Angular components and modules dynamically at runtime. The code sample demonstrates how to use the JIT compiler to compile a module and its components asynchronously.

import { Compiler, COMPILER_OPTIONS, CompilerFactory } from '@angular/core';
import { JitCompilerFactory } from '@angular/platform-browser-dynamic';

// Get a reference to the JIT compiler factory
const compilerFactory: CompilerFactory = platformBrowserDynamic().injector.get(CompilerFactory);
const compiler = compilerFactory.createCompiler();

// Compile a component dynamically
compiler.compileModuleAndAllComponentsAsync(DynamicModule)
  .then(compiled => {
    const moduleRef = compiled.ngModuleFactory.create(this.injector);
    const componentFactory = compiled.componentFactories[0];
    this.container.createComponent(componentFactory);
  });

AOT Compilation

Ahead-of-Time (AOT) compilation converts Angular HTML and TypeScript code into efficient JavaScript code during the build process, before the browser downloads and runs the code. This code sample shows how to bootstrap an Angular application using the AOT-compiled module factory.

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app/app.module.ngfactory';

enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);