All Projects → blacksonic → Angular2 Aot Webpack

blacksonic / Angular2 Aot Webpack

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Angular2 Aot Webpack

Angularwebpackvisualstudio
Template for ASP.NET Core, Angular with Webpack and Visual Studio
Stars: ✭ 497 (+52.92%)
Mutual labels:  webpack, aot
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (+105.85%)
Mutual labels:  webpack, aot
Angular Awesome List
Список ресурсов по Angular на русском
Stars: ✭ 224 (-31.08%)
Mutual labels:  webpack, aot
Umi Admin
基于蚂蚁金服 umi 可插拔的企业级 react 应用框架开发的 Admin。最核心特点:对后端开发人员友好
Stars: ✭ 310 (-4.62%)
Mutual labels:  webpack
Filemanager Webpack Plugin
Copy, move, archive (zip/tar/tar.gz), delete files and directories before and after Webpack builds. Win32/Mac/*Nix supported
Stars: ✭ 310 (-4.62%)
Mutual labels:  webpack
Instapy Gui
gui for instapy automation
Stars: ✭ 313 (-3.69%)
Mutual labels:  webpack
Noty
Autosaving sticky note with support for multiple notes without needing multiple windows.
Stars: ✭ 321 (-1.23%)
Mutual labels:  webpack
React Redux Chat
🔥🔥react+redux-chat 模仿实现PC微信聊天系统。
Stars: ✭ 308 (-5.23%)
Mutual labels:  webpack
Skeleventy
A skeleton boilerplate built with Eleventy.
Stars: ✭ 318 (-2.15%)
Mutual labels:  webpack
Youtube Live Chat Flow
Chrome Extension for Flowing Chat Messages on YouTube Live
Stars: ✭ 309 (-4.92%)
Mutual labels:  webpack
Cogear.js
Modern static websites generator (Node.JS/Webpack)
Stars: ✭ 315 (-3.08%)
Mutual labels:  webpack
Dynamic Cdn Webpack Plugin
Get your dependencies from a cdn rather than bundling them in your app
Stars: ✭ 312 (-4%)
Mutual labels:  webpack
Bridgetown
A Webpack-aware, Ruby-powered static site generator for the modern Jamstack era
Stars: ✭ 317 (-2.46%)
Mutual labels:  webpack
Ionic Boilerplate
✨ An Ionic Starter kit featuring Tests, E2E, Karma, Protractor, Jasmine, Istanbul, Gitlab CI, Automatic IPA and APK, TypeScript 2, TsLint, Codelyzer, Typedoc, Yarn, Rollup, and Webpack 2
Stars: ✭ 309 (-4.92%)
Mutual labels:  webpack
Isomorphic React
A simple but powerful React application built on a standards-compliant back-end
Stars: ✭ 318 (-2.15%)
Mutual labels:  webpack
Kratos Boilerplate
🔥 A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
Stars: ✭ 308 (-5.23%)
Mutual labels:  webpack
Web Webpack Plugin
alternative for html-webpack-plugin
Stars: ✭ 318 (-2.15%)
Mutual labels:  webpack
Web
📚 从零开始学 Web 前端系列图文教程。从零基础开始,手把手教你进入前端开发的世界。公众号「前端队长」作者。
Stars: ✭ 313 (-3.69%)
Mutual labels:  webpack
Nin
nin is ninjatool
Stars: ✭ 313 (-3.69%)
Mutual labels:  webpack
Wp Webpack Script
💥🔥📦👩‍💻 An easy to use, pre configured, hackable webpack setup & development server for WordPress themes and plugins.
Stars: ✭ 314 (-3.38%)
Mutual labels:  webpack

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].