{"id":2467,"date":"2017-04-10T11:59:44","date_gmt":"2017-04-10T09:59:44","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2467"},"modified":"2017-04-10T11:59:44","modified_gmt":"2017-04-10T09:59:44","slug":"angular-2-aot-compilation","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/","title":{"rendered":"Angular 2 AOT Compilation"},"content":{"rendered":"
\n

Updated in January 2017<\/em>: After very good conversations with Carmen Popoviciu<\/a>, I've updated this article to strike out some important facts and to also explain why<\/em> the steps described here are necessary.<\/p>\n

\nBig thanks to Carmen who also reviewed this posting.\n<\/p><\/blockquote>\n

In the last days, I've adapted my Angular 2 sample for ahead of time (AOT) compilation with the template compiler. Here I'm documenting the necessary steps for such an undertaking as well as my learnings towards this. The whole sample<\/a> can be found here<\/a>.<\/p>\n

I'm subdividing this writing into two parts:<\/p>\n

    \n
  1. Part 1: Angular 2 AOT Compilation and Tree Shaking with Webpack2 and\/or Rollup (this one)<\/li>\n
  2. Part 2: Angular 2 AOT Compilation with @ngtools\/webpack and Lazy Loading (coming up)<\/li>\n<\/ol>\n

    \nI want to explicitly thank Wassim Chegham<\/a> and Minko Gechev<\/a> for providing great information about this topic. They really helped me getting started with it. Another valuable source for this topic is the cookbook for AOT and Tree Shaking<\/a> within the official documentation of Angular 2.\n<\/p><\/blockquote>\n

    Motivation<\/h2>\n

    In order to improve performance, Angular compiles templates into TypeScript code. The easiest solution for this is Just in Time (JIT) compilation which is performed in the browser, after all the application files are downloaded. To speed up the program start, one can also compile the templates at build time, which is called Ahead of Time (AOT) compilation. Thanks to this, we don't need to include the sources of the Angular Compiler into our build which reduces the parts of Angular that need to be loaded into the browser and ultimately the size of the bundle.<\/p>\n

    As the generated TypeScript code can be statically analyzed, it it possible to find out which parts of Angular or other libraries aren't used. This is where tools for tree shaking like webpack2<\/a> or rollup<\/a> come into play. Those tools try to remove the unused code or to put it in another they: They are \"shaking off\" the loose branches of your source code.<\/p>\n

    This post shows how to use the two mentioned techniques by describing an example<\/a> which can be found in my GitHub repository<\/a>.<\/p>\n

    Configuration<\/h2>\n

    To demonstrate the usage of AOT and tree shaking, the example in this post first uses the Angular Compiler to compile the application templates to TypeScript. After that, it compiles the previously generated TypeScript code together with the rest of the application's TypeScript code down to EcmaScript 5. To enable tree shaking, this sample uses EcmaScript 5 together with the module system of EcmaScript 2015 that defines the well known import<\/code> and export<\/code> statements. These statements enable static code analysis to find unused code and are the foundation for tree shaking tools:<\/p>\n

    \"AOT<\/a><\/p>\n

    Once all these steps are completed, the sample uses Rollup or webpack2 to perform tree shaking. These tools can also be configured to use UglifyJS to minimize the resulting bundles. As a matter of fact, webpack2 even requires something like UglifyJS for tree shaking. The reason for this is that webpack is just marking unused code and relies on other plugins that are removing it. At the time of writing, UglifyJS can only deal with EcmaScript 5 which is one reason for converting the code to this version. Another reason for transpiling the code down to EcmaScript 5 is that currently webpack does not support a newer version. A third reason is, that currently most libraries are available as EcmaScript 5 files. Fortunately, EcmaScript 5 can be used together with EcmaScript 2015 modules which is the foundation for tree shaking.<\/p>\n

    As mentioned here<\/a>, using EcmaScript 2015 or higher at this point would lead to better results as it provides more ways for static analysis. The result of webpack2's or Rollup's work is a tree shaken and minified bundle.<\/p>\n

    Refactoring<\/h2>\n

    As AOT compilation does not allow for dynamic references, using require<\/code> is not possible. However, thanks to the angular2-template-loader<\/code> for Webpack, which inlines templates and styles in Angular components, we can use relative references in JIT mode anyway. In addition to that, the AOT compiler also supports relative paths:<\/p>\n

    @Component({\n    selector: 'flug-suchen',\n    templateUrl:  '.\/flug-suchen.component.html',\n    styleUrls: ['.\/flug-suchen.component.css'],\n})\nexport class FlugSuchenComponent {\n    [...]\n}\n<\/code><\/pre>\n
    As this sample shows, the compiler is more strict when using AOT, which might lead to some errors when compiling. Using the feedback we get from the compilation errors, we can fix our code. Oliver Combe<\/a>, the author of the popular ng2-translate<\/a> library, created a nice list with things that don't work with the AOT Compiler<\/a>. Additional information can be found here<\/a>.<\/p>\n
    To provide instant feedback during the development, we can leverage the Angular Language Service that has been introduced with Angular 2.3. It targets editors and IDEs and helps them provide Angular specific feedback and code completion for both typescript files and templates. Beginning with Version 2017.1, WebStorm supports this and at the time of this writing there is a preview of a plugin that makes the language service available for Visual Studio Code<\/a>.<\/p>\n
    Packages<\/h2>\n
    In order to work with AOT compilation as well as with Webpack2<\/a> and Rollup<\/a> treeshaking, one has to install several packages. The next listing contains some dev-dependencies I've used for this:<\/p>\n
        \"angular2-template-loader\": \"^0.6.0\",\n    \"awesome-typescript-loader\": \"~3.0.0-beta.18\",\n    \"css-loader\": \"^0.26.0\",\n    \"file-loader\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^2.21.0\",\n\n    \"webpack\": \"^2.2.0\",\n    \"webpack-dev-server\": \"^2.2.0\",\n    \"webpack-dll-bundles-plugin\": \"^1.0.0-beta.2\"\n\n    \"rollup\": \"^0.41.4\",\n    \"rollup-plugin-commonjs\": \"^7.0.0\",\n    \"rollup-plugin-node-globals\": \"^1.1.0\",\n    \"rollup-plugin-node-resolve\": \"^2.0.0\",\n    \"rollup-plugin-uglify\": \"^1.0.1\",\n\n<\/code><\/pre>\n
    We also need the compiler-cli<\/code> and plattform-server<\/code> as a dependency:<\/p>\n
     \"@angular\/compiler-cli\": \"~2.4.0\",\n    \"@angular\/platform-server\": \"~2.4.0\",\n<\/code><\/pre>\n
    The full list of dev-dependencies<\/a> can be found in my GitHub sample<\/a>.<\/p>\n
    tsconfig.json<\/h2>\n
    The AOT compiler uses its own tsconfig.json<\/code>-file. According to the docs, I've named it tsconfig.aot.json<\/code>:<\/p>\n
    {\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"es2015\",\n    \"moduleResolution\": \"node\",\n    \"sourceMap\": true,\n    \"outDir\": \"dist\/unbundled-aot\",\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"lib\": [\"es2015\", \"dom\"],\n    \"noImplicitAny\": true,\n    \"suppressImplicitAnyIndexErrors\": true\n  },\n\n  \"angularCompilerOptions\": {\n   \"genDir\": \"aot\",\n   \"skipMetadataEmit\" : true\n }\n}\n<\/code><\/pre>\n
    As mentioned above, it's important to use target es5<\/code> together with the module format es2015<\/code> to make tree shaking possible. The property genDir<\/code> within angularCompilerOptions<\/code> defines where the template compiler should place the files it generated out of HTML files. The sample is also skipping the generation of metadata for the AOT Compiler as this is only needed for reusable libraries.<\/p>\n
    The property outDir<\/code> defines that the resulting ES5 files should be placed in the folder dist\/unbundled-aot<\/code>. Wepack2 and Rollup will use this folder.<\/p>\n
    Compiling the templates<\/h2>\n
    The following npm script in package.json<\/code> compiles the HTML templates and creates TypeScript files for it. In addition, it also compiles everything down to ES5 afterwards:<\/p>\n
    \"ngc\": \"ngc -p tsconfig.aot.json\",\n<\/code><\/pre>\n
    To start this script, simply run npm run ngc<\/code> in your terminal.<\/p>\n
    Bootstrapping for AOT<\/h2>\n
    To bootstrap Angular 2 in AOT mode, it has to be started with platformBrowser().bootstrapModuleFactory<\/code>:<\/p>\n
    \/\/ main.aot.ts\n\nimport { platformBrowser } from '@angular\/platform-browser';\nimport { AppModuleNgFactory } from '..\/aot\/app\/app.module.ngfactory';\n\nimport 'rxjs\/add\/operator\/map';\nimport 'rxjs\/add\/operator\/do';\n\nplatformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(err => console.error(err));\n<\/code><\/pre>\n
    AppModuleNgFactory<\/code> is a class the AOT compiler created for the root module AppModule<\/code>. After creating or updating this file, one should run the ngc compiler again.<\/p>\n
    Webpack2 Configuration for AOT<\/h2>\n
    The next listing shows the (simple) webpack2 configuration I'm using for the AOT sample. Notice the two entry points within the dist\/unbundled-aot<\/code> folder: the first points to the necessary polyfills and the second to the compiled version of the above described main.aot.ts<\/code>:<\/p>\n
    var webpack = require('webpack');\nvar CompressionPlugin = require(\"compression-webpack-plugin\");\n\nmodule.exports = {\n\n    profile: true,\n    devtool: false,\n    entry: {\n        'polyfills': '.\/dist\/unbundled-aot\/app\/polyfills.js',\n        'app': '.\/dist\/unbundled-aot\/app\/main.aot.js'\n    },\n    output: {\n        path: __dirname + \"\/dist\/aot\",\n        filename: \"[name].js\",\n        publicPath: \"dist\/\"\n    },\n    resolve: {\n        extensions: [\/*'.ts',*\/ '.js', '.jpg', '.jpeg', '.gif', '.png', '.css', '.html']\n    },\n    module: {\n        loaders: [\n            { test: \/\\.(jpg|jpeg|gif|png)$\/, loader:'file-loader?name=img\/[path][name].[ext]' },\n            { test: \/\\.(eof|woff|woff2|svg)$\/, loader:'file-loader?name=img\/[path][name].[ext]' },\n            { test: \/\\.css$\/, loader:'raw-loader' },\n            { test: \/\\.html$\/,  loaders: ['html-loader'] }\n        ],\n        exprContextCritical: false\n    },\n    plugins: [\n        new webpack.LoaderOptionsPlugin({\n            minimize: true,\n            debug: false\n        }),\n        new webpack.optimize.UglifyJsPlugin({\n            compress: {\n                warnings: false\n            },\n            output: {\n                comments: false\n            },\n            sourceMap: false\n        }),\n        new CompressionPlugin({\n            asset: \"[path].gz[query]\",\n            algorithm: \"gzip\",\n            test: \/\\.js$|\\.html$\/,\n            threshold: 10240,\n            minRatio: 0.8\n        })\n    ],\n    node: {\n        __filename: true\n    },\n    devServer: {\n        inline:true,\n        port: 8080,\n        historyApiFallback: true,\n        watchOptions: {\n            aggregateTimeout: 300,\n            poll: 1000\n        }\n    }\n\n};\n<\/code><\/pre>\n
    The plugins LoaderOptionsPlugin<\/code> and UglifyJsPlugin<\/code> reduce the bundle size to a minimum by means of minification and tree shaking<\/a>.<\/p>\n
    Webpack2 Configuration for JIT<\/h2>\n
    I've also created a JIT-based build. This build is used during development because it is much faster than an AOT-based build. The JIT webpack configuration is very similar to the one for AOT, with a couple of exceptions. The first difference is that the app<\/code> entry points to the main.jit.ts<\/code> file, which uses Angular's JIT-compiler to bootstrap the application. The second difference is that it uses the angular2-template-loader<\/code> loader for inlining component templates and awesome-typescript-loader<\/code> for compiling TypeScript.<\/p>\n
    [...]\nvar webpack = require('webpack');\nvar CompressionPlugin = require(\"compression-webpack-plugin\");\n\nvar CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;\n\nmodule.exports = {\n\n    devtool: false,\n    entry: {\n        'polyfills': '.\/app\/polyfills.ts',\n        'app': '.\/app\/main.jit.ts'\n    },\n    output: {\n        path: __dirname + \"\/dist\/jit\",\n        filename: \"[name].js\",\n        publicPath: \"dist\/\"\n    },\n    resolve: {\n        extensions: ['.ts', '.js', '.jpg', '.jpeg', '.gif', '.png', '.css', '.html']\n    },\n    module: {\n        loaders: [\n            { test: \/\\.(jpg|jpeg|gif|png)$\/, loader:'file-loader?name=img\/[path][name].[ext]' },\n            { test: \/\\.(eof|woff|woff2|svg)$\/, loader:'file-loader?name=img\/[path][name].[ext]' },\n            { test: \/\\.css$\/, loader:'raw-loader' },\n            { test: \/\\.html$\/,  loaders: ['raw-loader'] },\n            { test: \/\\.ts$\/, loaders: ['angular2-template-loader', 'awesome-typescript-loader'], exclude: \/node_modules\/}\n        ],\n        exprContextCritical: false\n    },\n    plugins: [\n\n        new webpack.LoaderOptionsPlugin({\n            minimize: true,\n            debug: false\n        }),\n        new webpack.optimize.UglifyJsPlugin({\n            compress: {\n                warnings: false\n            },\n            output: {\n                comments: false\n            },\n            sourceMap: false\n        }),\n        new CompressionPlugin({\n            asset: \"[path].gz[query]\",\n            algorithm: \"gzip\",\n            test: \/\\.js$|\\.html$\/,\n            threshold: 10240,\n            minRatio: 0.8\n        })\n    ],\n    node: {\n        __filename: true\n    },\n    devServer: {\n        inline:true,\n        port: 8080,\n        historyApiFallback: true,\n        watchOptions: {\n            aggregateTimeout: 300,\n            poll: 1000\n        }\n    }\n\n};\n[...]\n<\/code><\/pre>\n
    Rollup Configuration for AOT<\/h2>\n
    To find out whether Rollup brings improvements over just using webpack2, I've used the Rollup configuration of the cookbook for AOT and Rollup from angular.io<\/a>:<\/p>\n
    \/\/ rollup.config.js\n\nimport nodeResolve from 'rollup-plugin-node-resolve'\nimport uglify      from 'rollup-plugin-uglify'\n\nexport default {\n    entry: 'dist\/unbundled-aot\/app\/main.aot.js',\n    dest: 'dist\/build.js', \/\/ output a single application bundle\n    sourceMap: false,\n    treeshake: true,\n    format: 'iife',\n    onwarn: function(warning) {\n        \/\/ Skip certain warnings\n        if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }\n        if ( warning.indexOf(\"The 'this' keyword is equivalent to 'undefined'\") > -1 ) { return; }\n        console.warn( warning.message );\n    },    \n    plugins: [\n        nodeResolve({jsnext: true, module: true}),\n        commonjs({\n            include: 'node_modules\/rxjs\/**',\n        }),\n        uglify()\n    ]\n}\n\n<\/code><\/pre>\n
    Again, this configuration is pointing to the EcmaScript 5 files using the EcmaScript 2015 Module System within dist\/unbundled-aot<\/code>.<\/p>\n
    Build Scripts<\/h2>\n
    To build the solution for all three scenarios, I'm using the following npm scripts:<\/p>\n
    \"build-all\": \"npm run webpack:jit && npm run webpack:aot && npm run rollup:aot\",\n\"webpack:aot\": \"ngc -p tsconfig.aot.json && webpack --config webpack.aot.config.js\",\n\"webpack:jit\": \"webpack --config webpack.jit.config.js\",\n\"rollup:aot\": \"ngc -p tsconfig.aot.json && rollup -c rollup.js\",\n<\/code><\/pre>\n
    The command npn run build-all<\/code> will start all three builds.<\/p>\n
    Results<\/h2>\n
    The bundle for the JIT mode had 848 kB:<\/p>\n
          Asset     Size  Chunks                    Chunk Names\n     app.js   848 kB       0  [emitted]  [big]  app\n<\/code><\/pre>\n
    polyfills.js   103 kB       1  [emitted]         polyfills
    \npolyfills.js.gz  33.5 kB          [emitted]
    \napp.js.gz   199 kB          [emitted]<\/p>\n
    When it comes to AOT mode, the bundle could be reduced:<\/p>\n
          Asset     Size  Chunks                    Chunk Names\n     app.js   531 kB       0  [emitted]  [big]  app\n<\/code><\/pre>\n
    polyfills.js   103 kB       1  [emitted]         polyfills
    \npolyfills.js.gz  33.5 kB          [emitted]
    \napp.js.gz   112 kB          [emitted]<\/p>\n
    The AOT bundle created with Rollup was even smaller:<\/p>\n
     470.978 build.js\n<\/code><\/pre>\n
    After gzipping it, the resulting file took 94 kB:<\/p>\n
     94.337 build.js.gz\n<\/code><\/pre>\n
    Starting the samples<\/h2>\n
    To start the three samples, I've created three HTML files: index.jit.html<\/code> for the JIT mode, index.aot.html<\/code> for the AOT codebase build with webpack bundles and index.rollup.aot.html<\/code> for its counterpart build with Rollup. Those files are also included in the provided sample.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    And Tree Shaking With Webpack2 And\/Or Rollup: Step By Step<\/p>\n","protected":false},"author":9,"featured_media":2997,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"\nAngular 2 AOT Compilation - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 2 AOT Compilation - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"And Tree Shaking With Webpack2 And\/Or Rollup: Step By Step\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-10T09:59:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Angular 2 AOT Compilation\",\"datePublished\":\"2017-04-10T09:59:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/\"},\"wordCount\":1345,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/\",\"name\":\"Angular 2 AOT Compilation - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"datePublished\":\"2017-04-10T09:59:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"width\":1280,\"height\":853},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 2 AOT Compilation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 2 AOT Compilation - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/","og_locale":"en_US","og_type":"article","og_title":"Angular 2 AOT Compilation - ANGULARarchitects","og_description":"And Tree Shaking With Webpack2 And\/Or Rollup: Step By Step","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/","og_site_name":"ANGULARarchitects","article_published_time":"2017-04-10T09:59:44+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Angular 2 AOT Compilation","datePublished":"2017-04-10T09:59:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/"},"wordCount":1345,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/","name":"Angular 2 AOT Compilation - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","datePublished":"2017-04-10T09:59:44+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-2-aot-compilation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Angular 2 AOT Compilation"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=2467"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2467\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/2997"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}