问题描述
https://github.com/stefankendall/broken-aot
我正在尝试使用webpack和gulp设置一个简单的AOT angular 2构建.在我创建的最小示例中,我具有以下内容:
I'm trying to setup a simple AOT angular 2 build with webpack and gulp. In my minimal example I've created, I have the following:
./src/app/components
-主应用程序使用的组件,一个单独的ngmodule ./src/app/examples
-主应用程序
./src/app/components
- components used by the main application, a separate ngmodule./src/app/examples
- the main application
ERROR in ./src/index.ts
Module not found: Error: Can't resolve './../$$_gendir/src/app/examples/app.module.ts.ngfactory' in '/Users/username/workpath/projectname/src'
@ ./src/index.ts 8:32-98
根据先前的帖子, index.ts
看起来像这样:
Based on a previous post, index.ts
looks like this:
import 'core-js/client/shim';
import 'zone.js/dist/zone';
import '@angular/common';
import 'rxjs';
import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/examples/app.module';
declare let process: any;
if (process.env.NODE_ENV === 'production') {
enableProdMode();
} else {
Error['stackTraceLimit'] = Infinity; // tslint:disable-line:no-string-literal
require('zone.js/dist/long-stack-trace-zone'); // tslint:disable-line:no-var-requires
}
platformBrowserDynamic().bootstrapModule(AppModule);
这将从 ./src/app/examples/app.module.ts
加载 AppModule
,如下所示:
This loads AppModule
from ./src/app/examples/app.module.ts
, which looks like this:
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {MainComponent} from './MainComponent';
import {AppComponent} from './AppComponent';
import {routing} from './routes';
import {ComponentsModule} from '../components/index';
@NgModule({
imports: [
BrowserModule,
ComponentsModule,
FormsModule,
routing
],
declarations: [
AppComponent,
MainComponent
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}
在没有AOT的情况下在本地运行可以正常工作,但是尝试使用以下Webpack配置进行AOT构建会产生错误:
Running locally without AOT works fine, but attempting an AOT build with the following webpack config yields the error:
const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
app: './src/index.ts'
},
module: {
loaders: [
{
test: /\.json$/,
loaders: [
'json-loader'
]
},
{
test: /\.(ttf|otf|eot|svg|png|jpg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
},
{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'tslint-loader',
enforce: 'pre'
},
{
test: /\.css$/,
loaders: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?minimize!sass-loader!postcss-loader'
})
},
{
test: /\.scss$/,
loaders: ['raw-loader', 'sass-loader']
},
{
test: /\.ts$/,
exclude: /node_modules/,
loaders: [
'@ngtools/webpack'
]
},
{
test: /\.html$/,
loaders: [
'html-loader'
]
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
FailPlugin,
new HtmlWebpackPlugin({
template: conf.path.src('index.html')
}),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
conf.paths.src
),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new ExtractTextPlugin('index-[contenthash].css'),
new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: () => [autoprefixer],
resolve: {},
ts: {
configFileName: 'tsconfig.json'
},
tslint: {
configuration: require('../tslint.json')
}
}
}),
new CopyWebpackPlugin([
{from: 'index.html'}
]),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether'
}),
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.resolve('./src/app/examples/app.module.ts#AppModule')
}),
new webpack.optimize.UglifyJsPlugin({
output: {comments: false},
compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase
})
],
output: {
path: path.join(process.cwd(), conf.paths.dist, 'aot'),
filename: '[name]-[hash].js'
},
resolve: {
extensions: [
'.webpack.js',
'.web.js',
'.js',
'.ts'
]
}
};
我想念什么?
推荐答案
AOT已损坏.不要打扰
AOT is broken. Don't bother.
如果您从一开始就拥有它就可以了.但是,转换项目几乎是不可能的.
It's fine if you have it from the start. Converting a project is nearly impossible, however.
这篇关于Angular 2 AOT-无法解析$$ _ gendir ... ngfactory的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!