Skip to content

Instantly share code, notes, and snippets.

Klmn kmaraz

Block or report user

Report or block kmaraz

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View JIT vs. AOT
JIT AOT Result
Application raw size 2.9MB 3.3MB Increase
Vendors raw size 2.67MB 2.38MB Decrease
Initial load time ~6s ~2s Significant decrease
View app.module.ts
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import * as angular from 'angular';
View main.aot.ts
import { platformBrowser } from '@angular/platform-browser';
// This file will be available during the compilation
import { AppModuleNgFactory } from './app.module.ngfactory';
View index.ts
// We are loading version of app which uses JIT
else {
// Here we want to load a special entry file for AOT
View tsconfig.aot.json
"compilerOptions": {
"baseUrl": "./",
"target": "es5",
"module": "esnext",
"lib": ["es2018", "dom"],
"moduleResolution": "node",
"typeRoots": ["node_modules/@types"]
View tsconfig.json
"compilerOptions": {
"baseUrl": "./",
"target": "es5",
"module": "esnext",
"lib": ["es2018", "dom"],
"moduleResolution": "node",
"typeRoots": ["node_modules/@types"]
"exclude": ["app/main.aot.ts"]
View webpack.config.js
const path = require('path');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
module.exports = (env, argv) => {
const config = {
plugins: [
// See:
new AngularCompilerPlugin({
// We wanted to have separate tsconfig for AOT compilation
View combined.selectors.ts
export const selectFeatureA = fromFeatureA.selectFeatureA;
export const selectFeatureB = fromFeatureB.selectFeatureB;
export const selectCombinedFeature = createSelector(selectFeatureA, selectFeatureB,
(a, b) => a.find((x) => ===
View app.effects.ts
export interface RegisterEffects { ngRegisterEffects(): void; }
export const EFFECTS_CLASS = new InjectionToken<RegisterEffects[]>('EFFECTS_CLASS');
export function EffectsProvider<T extends RegisterEffects>(
effectsClass: Type<T>): ClassProvider {
return {
multi: true,
useClass: effectsClass
View app.module.ts
// The original AngularJs application
const ngModule = angular.module('admin', [
// We are leaving all the old module untouched
// We can downgrade Components, Directives, Services, etc.
// And use them in the AngularJs app
You can’t perform that action at this time.