TetraDev 2016-10-12T22:09:39
I got it working finally, see my repo Angular2 Webpack2 DotNET Starter\nThere are several tricks necessary. Note that AOT compilation does not support any require() statements in your Angular 2 components. They will need to be converted to import statements.\nFirst, you need to have a second tsconfig.json file, with special options for AOT compilation. I designate this with .aot.json extension.\ntsconfig.aot.json :\n{\n "compilerOptions": {\n "target": "es5",\n "emitDecoratorMetadata": true,\n "experimentalDecorators": true,\n "allowSyntheticDefaultImports": false,\n "noEmitHelpers": true,\n "pretty": true,\n "strictNullChecks": false,\n "baseUrl": ".",\n "sourceMap": true,\n "sourceRoot": ".",\n "lib": [\n "es6",\n "dom"\n ],\n "types": [\n "lodash",\n "hammerjs",\n "jasmine",\n "node",\n "selenium-webdriver",\n "source-map",\n "uglify-js",\n "webpack",\n "materialize-css",\n "jquery",\n "kendo-ui"\n ],\n "typeRoots": [\n "./node_modules/@types"\n ],\n "outDir": "./compiled/src"\n },\n "exclude": [\n "./node_modules",\n "./**/*.e2e.ts",\n "./**/*.spec.ts",\n ],\n "awesomeTypescriptLoaderOptions": {\n "useWebpackText": true,\n "forkChecker": true,\n "useCache": true\n },\n "compileOnSave": false,\n "buildOnSave": false,\n "atom": {\n "rewriteTsconfig": false\n },\n "angularCompilerOptions": {\n "genDir": "./compiled/aot",\n "debug": true\n }\n}\n\nYou'll also need the exact right combination of verions of Angular2. @angular/[email protected] and @angular/[email protected] did NOT work for me, I had to use 2.0.0 for both or ngc failed to compile the AOT files. Here's what I'm using successfully:\npackage.json :\n "dependencies": {\n "@angular/core": "2.0.0",\n "@angular/common": "2.0.0",\n "@angular/compiler": "2.0.0",\n "@angular/compiler-cli": "0.6.2",\n "@angular/forms": "^2.0.1",\n "@angular/http": "2.0.0",\n "@angular/platform-browser": "2.0.0",\n "@angular/platform-browser-dynamic": "2.0.0",\n "@angular/platform-server": "2.0.0",\n "@angular/router": "3.0.0",\n "@angular/tsc-wrapped": "0.3.0"\n}\n\nIn addition, you'll need a couple nifty webpack loaders, while also allowing webpack to look in the ./src folder as well as the folder your AOT compiled files are output to. (*.component.ngfactory.ts)\nThat last part is very important! If you don't tell webpack to include it those folders, it won't work. In this example, the AOT files are output to /aot-compiled in the root folder.\nwebpack.common.js\n loaders: [\n {\n test: /\\.ts$/,\n include: [helpers.paths.appRoot, helpers.root('./compiled/aot')],\n exclude: [/\\.(spec|e2e)\\.ts$/],\n loaders: [\n '@angularclass/hmr-loader',\n 'awesome-typescript-loader',\n 'angular2-template-loader',\n 'angular2-router-loader?loader=system',\n "angular2-load-children-loader" // this loader replaces loadChildren value to work with AOT/JIT\n ],\n },\n ]\n\nTo generate your AOT files, you'll need an NPM script to do it for you\npackage.json\n "scripts": {\n "compile:aot": "./node_modules/.bin/ngc -p ./tsconfig.aot.json",\n }\n\nYou'll also need to make your webpack config read the AOT version of app.bootstrap.ts - which is different from the JIT version. I differentiate it with .aot.ts extension so that in production, webpack uses AOT (app.bootstrap.aot.ts), but in dev mode, it uses JIT with webpack-dev-server (app.bootstrap.ts).\nFinally, you run npm run compile:aot FIRST.\nOnce your AOT files are output to disk, you run your webpack build with either webpack or webpack-dev-server.\nFor a working example, see my repo Angular2 Webpack2 DotNET Starter. It's integrated with .NET Core 1.0, but for those not using .NET, you can still see how Webpack 2 and Angular 2 are configured.",