¿Compilación Webpack, Typescript y Angular2 con Ahead Of Time(AOT)?
angular-cli (2)
Lo tengo funcionando finalmente, vea mi repositorio Angular2 Webpack2 DotNET Starter
Hay varios trucos necesarios. Tenga en cuenta que la compilación AOT no admite ninguna declaración require() en sus componentes de Angular 2. Tendrán que convertirse en declaraciones de import .
Primero, necesita tener un segundo archivo tsconfig.json , con opciones especiales para la compilación AOT. .aot.json esto con la extensión .aot.json .
tsconfig.aot.json:
{
"compilerOptions": {
"target": "es5",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": false,
"noEmitHelpers": true,
"pretty": true,
"strictNullChecks": false,
"baseUrl": ".",
"sourceMap": true,
"sourceRoot": ".",
"lib": [
"es6",
"dom"
],
"types": [
"lodash",
"hammerjs",
"jasmine",
"node",
"selenium-webdriver",
"source-map",
"uglify-js",
"webpack",
"materialize-css",
"jquery",
"kendo-ui"
],
"typeRoots": [
"./node_modules/@types"
],
"outDir": "./compiled/src"
},
"exclude": [
"./node_modules",
"./**/*.e2e.ts",
"./**/*.spec.ts",
],
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true,
"forkChecker": true,
"useCache": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
},
"angularCompilerOptions": {
"genDir": "./compiled/aot",
"debug": true
}
}
También necesitarás la combinación exacta correcta de las versiones de Angular2. @angular/[email protected] y @angular/[email protected] NO me funcionaron, tuve que usar 2.0.0 para ambos o ngc no ngc los archivos AOT. Esto es lo que estoy usando con éxito:
paquete.json:
"dependencies": {
"@angular/core": "2.0.0",
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/compiler-cli": "0.6.2",
"@angular/forms": "^2.0.1",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@angular/router": "3.0.0",
"@angular/tsc-wrapped": "0.3.0"
}
Además, necesitará un par de cargadores de paquetes web ingeniosos, mientras que también permitirá que el paquete web busque en la carpeta ./src , así como en la carpeta a la que se envían los archivos compilados de AOT. ( *.component.ngfactory.ts )
¡Esa última parte es muy importante! Si no le dices al paquete web que incluya esas carpetas, no funcionará. En este ejemplo, los archivos AOT se envían a /aot-compiled en la carpeta raíz.
webpack.common.js
loaders: [
{
test: //.ts$/,
include: [helpers.paths.appRoot, helpers.root(''./compiled/aot'')],
exclude: [//.(spec|e2e)/.ts$/],
loaders: [
''@angularclass/hmr-loader'',
''awesome-typescript-loader'',
''angular2-template-loader'',
''angular2-router-loader?loader=system'',
"angular2-load-children-loader" // this loader replaces loadChildren value to work with AOT/JIT
],
},
]
Para generar sus archivos AOT, necesitará un script NPM que lo haga por usted.
paquete.json
"scripts": {
"compile:aot": "./node_modules/.bin/ngc -p ./tsconfig.aot.json",
}
También deberá hacer que la configuración de su paquete web lea la versión AOT de app.bootstrap.ts , que es diferente de la versión JIT. Lo diferencio con la extensión .aot.ts modo que en producción, webpack usa AOT ( app.bootstrap.aot.ts ), pero en modo dev, usa JIT con webpack-dev-server ( app.bootstrap.ts ).
Finalmente, ejecuta npm run compile:aot FIRST. Una vez que tus archivos AOT se envían al disco, ejecutas la compilación de tu paquete web con webpack o webpack-dev-server .
Para un ejemplo de trabajo, vea mi repositorio Angular2 Webpack2 DotNET Starter . Está integrado con .NET Core 1.0, pero para aquellos que no usan .NET, aún se puede ver cómo se configuran Webpack 2 y Angular 2.
La última versión de Angular2 permite la compilación de anticipación de tiempo (AOT), utilizando este código en su archivo app.bootstrap.ts:
// The browser platform without a compiler
import { platformBrowser } from ''@angular/platform-browser'';
// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from ''./app.module.ngfactory'';
// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
Angular2 Documentación Oficial
¿Cómo podemos integrar los cargadores Webpack y Typescript con el compilador AOT de Angular2?
Parece que aún no hay una opción para hacerlo, pero estoy haciendo la pregunta sobre el desbordamiento de la pila para que, cuando esté disponible, la respuesta se pueda encontrar fácilmente.
ACTUALIZACIÓN 10/12/16 - Lo tengo funcionando, vea mi respuesta a continuación.
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"./node_modules/@types/"
]
},
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
}
config / webpack-aot.config.js
/**
* webpack2 config file for ng2 AOT compile
* location : config/webpack.aot.js
*/
var webpack = require(''webpack'');
var HtmlWebpackPlugin = require(''html-webpack-plugin'');
var ExtractTextPlugin = require(''extract-text-webpack-plugin'');
var helpers = require(''./helpers'');
const ngToolsWebpack = require(''@ngtools/webpack'');
const ENV = process.env.NODE_ENV = process.env.ENV = ''production'';
console.log(helpers.root(''src'', ''app'', ''app.module#AppModule''));
module.exports = {
devtool: ''source-map'',
entry: {
''polyfills'': ''./src/polyfills.ts'',
''app'': ''./src/main.ts''
},
resolve: {
extensions: [''*'', ''.ts'', ''.js'']
},
output: {
path: helpers.root(''dist''),
publicPath: ''/'',
filename: ''[name].[hash].js'',
chunkFilename: ''[id].[hash].chunk.js''
},
module: {
rules: [
{
test: //.ts$/,
loader: ''@ngtools/webpack''
},
{
test: //.html$/,
loader: ''html-loader''
},
{
test: //.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
include: helpers.root(''public'', ''images''),
loader: ''file-loader'',
options: {
//name: ''/assets/[name].[hash].[ext]'' <-file-loaderError
name: ''assets/[name].[ext]''
}
},
{
test: //.css$/,
exclude: helpers.root(''src'', ''app''),
loader: ExtractTextPlugin.extract({ fallback: ''style-loader'', use: ''css-loader'' })
},
{
test: //.css$/,
include: helpers.root(''src'', ''app''),
loader: ''raw-loader''
},
{
test: //.scss$/,
exclude: /node_modules/,
loaders: [''raw-loader'', ''sass-loader'']
},
{
test: //.sass$/,
exclude: /node_modules/,
loaders: [''raw-loader'', ''sass-loader'']
}
]
},
plugins: [
// If you want to use jquery in ng2 uncomment this
/*
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),*/
new ngToolsWebpack.AotPlugin({
tsConfigPath: helpers.root(''tsconfig-aot.json''),
basePath: helpers.root(''''),
entryModule: helpers.root(''src'', ''app'', ''app.module#AppModule''),
mainPath: helpers.root(''src'', ''main.ts'')
}),
new webpack.optimize.CommonsChunkPlugin({
name: [''app'', ''polyfills'']
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
options: {
htmlLoader: {
minimize: false
}
}
}),
new HtmlWebpackPlugin({
template: ''public/index.html''
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true
},
output: {
comments: false
}
}),
new ExtractTextPlugin(''[name].[hash].css''),
new webpack.DefinePlugin({
''process.env'': {
''ENV'': JSON.stringify(ENV)
}
})
]
};
Utilicé esta configuración de webpack y realicé la compilación AOT con carga perezosa angular2. Puede ver una aplicación de ejemplo para la compilación AOT / JIT con carga lenta angular2 para el modo de producción y el modo de desarrollo en este git.