Angular 2 AOT - 无法解析 $$_gendir...ngfactory

Question

https://github.com/stefankendall/broken-aot

我正在尝试使用 webpack 和 gulp 设置一个简单的 AOT angular 2 构建。在我创建的最小示例中，我有以下内容：

./src/app/components - 主应用程序使用的组件，一个单独的 ngmodule ./src/app/examples - 主应用程序

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

基于之前的 post，index.ts 看起来像这样：

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，如下所示：

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 构建会产生错误：

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'
    ]
  }
};

我错过了什么？

Answer 1

AOT 坏了。不要打扰。

编辑：如果您从一开始就拥有它，那很好。然而，转换项目几乎是不可能的。

Answer 2

完整的堆栈跟踪可以提供帮助。我遇到了同样的问题，然后试图在与 AOT compiling 相关的任何事情中找到原因，但没有成功。我的原因是在与 linting 相关的加载程序中，我可以看到你也使用它。 TSLint 被强制为运行作为 "pre"，据我所知，目前根本没有 *.ngfactory.ts 生成 linter 运行s，所以它失败了.是的，禁用这个 tslint-loader 有帮助，所有编译都成功了。

有趣的是，我无法强制 tslint 以任何方式忽略 bootstrap 文件中的此导入：加载程序中的 exclude 选项和 tslint:disable* 指令都没有没有帮助。此外，将 linter 运行ning 设为 "post" 或普通加载程序也无济于事。我什至试图将工厂导入提取到另一个文件中（与 AOT 引导条目分开，我认为无论是否忽略它都可以加载它），所以我提取了那个导入并忽略了那个单独的文件，但仍然没有运气。

我认为目前没有解决此问题的方法，老实说，它阻止我使用 AOT。

我把这个问题写给了 tslint-loader 的人 (https://github.com/wbuchwalter/tslint-loader/issues/83)，也许他们会提出一些有用的建议。

Answer 3

我看到这个错误的时间也最长。对我有用的是改变 @ngtools/webpack 模块来处理 ngfactory 文件。

在您的示例中，它看起来像这样：

  {
    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
    exclude: /node_modules/,
    loaders: [
      '@ngtools/webpack'
    ]
  },

希望对您有所帮助！

Angular 2 AOT - 无法解析 $$_gendir...ngfactory

Angular 2 AOT - Can't resolve $$_gendir...ngfactory

webpack

angular2-aot

angular