Skip to content
Angular AOT (Ahead Of Time) offline compilation example with Webpack
JavaScript TypeScript HTML CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
src
webpack
.gitignore
.npmignore
package-lock.json
package.json
readme.md
tsconfig.json
webpack.aot.config.js
webpack.jit.config.js

readme.md

Angular AOT (Ahead Of Time) offline compilation example with Webpack

Dependency Status devDependency Status

This repository shows how to use the Angular command line offline compiler ngc with Webpack.

If you prefer the Webpack plugin provided by the Angular CLI, it can be found in a separate repository.

The application consists of a module (src/app/modules/main.module.ts) and a basic component (src/app/components/hello-world.component.ts) with template (src/app/components/hello-world.template.html) and component specific style (src/app/components/hello-world.style.css).

When the application starts (npm start) it generates the compiled files next to the modules and the components(*.ngfactory.ts).

There is a different entry point for the JIT compiled(src/app/bootstrap.ts) and AOT compiled application(src/app/bootstrap.aot.ts).

The application is bundled with Webpack from the bootstrap files and is available on http://localhost:9000.

Advantages

  • Can always be used with the newest version of Angular
  • Can output separate compiled files for AOT compatible package publishing

Disadvantages

  • Works only with HTML and CSS, other file types need a previous build step
  • No watch mode yet, must be done manually (bin/ngc-watch.js) and compiles all the files
  • Need to maintain AOT version of bootstrap file
  • Needs cleanup step before compiling

Known issues

Further reading

Starters with AOT compilation available

You can’t perform that action at this time.