无法将ngtools / webpack发送到

Question

尝试使用ngtools / webpack在Angular 4中进行AOT编译，但无论我尝试什么，它都行不通。我已经按照其他教程但没有效果。

我一直有这样的错误：

  ＆lt; rimraf dist＆amp; amp;＆amp; webpack --config config / webpack.aot.js --progress   --profile --bail

     

10％构建模块3/3模块0 activeModuleNotFoundError：模块   找不到：错误：无法解析＆＃39; ./../$$_ gendir / src /   应用程序/ app.module.ngfactory＆＃39; in＆＃39; D：\ Bit   桶\ egbolig \前端\应用\ SRC＆＃39;       在factoryCallback（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ Compilation.js：260：39）       在工厂（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ NormalModuleFactory.js：247：20）       在解析器（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ NormalModuleFactory.js：65：21）       at asyncLib.parallel.e（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ NormalModuleFactory.js：138：21）       在D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js：3824：9       在D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js：460：16       at iteratorCallback（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js：1032：13）       在D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js：944：16       在D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js：3821：13       在apply（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js：21：25）       在D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ async \ dist \ async.js：56：12       at resolvers.normal.resolve（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ webpack \ lib \ NormalModuleFactory.js：130：23）       at onResolved（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ Resolver.js：70：11）       在loggingCallbackWrapper（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ createInnerCallback.js：31：19）       在afterInnerCallback（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ Resolver.js：138：10）       在loggingCallbackWrapper（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ createInnerCallback.js：31：19）       在Resolver.applyPluginsAsyncSeriesBailResult1（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ tapable \ lib \ Tapable.js：181：46）       在innerCallback（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ Resolver.js：125：19）       在loggingCallbackWrapper（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ createInnerCallback.js：31：19）       在D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ tapable \ lib \ Tapable.js：283：15       在D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ UnsafeCachePlugin.js：38：4       在loggingCallbackWrapper（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ createInnerCallback.js：31：19）       在afterInnerCallback（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ Resolver.js：138：10）       在loggingCallbackWrapper（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ createInnerCallback.js：31：19）       在Resolver.applyPluginsAsyncSeriesBailResult1（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ tapable \ lib \ Tapable.js：181：46）       在innerCallback（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ Resolver.js：125：19）       在loggingCallbackWrapper（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ createInnerCallback.js：31：19）       在D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ tapable \ lib \ Tapable.js：283：15       在innerCallback（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ Resolver.js：123：11）       在loggingCallbackWrapper（D：\ Bitbucket \ egbolig \ Frontend \ Application \ node_modules \ enhanced-resolve \ lib \ createInnerCallback.js：31：19）   解决＆＃39; ./../$$_ gendir / src / app / app.module.ngfactory＆＃39;在   ＆＃39; d：\到位桶\ egbolig \前端\应用\ SRC＆＃39;使用说明   file：D：\ Bitbucket \ egbolig \ Frontend \ Application \ package.json（相对   路径：./ src）       Field＆＃39;浏览器＆＃39;使用描述文件后，不包含有效的别名配置：   D：\ Bitbucket \ egbolig \ Frontend \ Application \ package.json（相对路径：   ./src）       使用描述文件：D：\ Bitbucket \ egbolig \ Frontend \ Application \ package.json（相对路径：   ./$$_gendir/src/ app / app.module.ngfactory）         作为目录           D：\ Bitbucket \ egbolig \ Frontend \ Application \ $$ _ gendir \ src \ app \ app.module.ngfactory不存在         没有延期           Field＆＃39;浏览器＆＃39;不包含有效的别名配置           D：\ Bitbucket \ egbolig \ Frontend \ Application \ $$ _ gendir \ src \ app \ app.module.ngfactory不存在         .js文件           Field＆＃39;浏览器＆＃39;不包含有效的别名配置           D：\ Bitbucket \ egbolig \ Frontend \ Application \ $$ _ gendir \ src \ app \ app.module.ngfactory.js不存在         .TS           Field＆＃39;浏览器＆＃39;不包含有效的别名配置           D：\ Bitbucket \ egbolig \ Frontend \ Application \ $$ _ gendir \ src \ app \ app.module.ngfactory.ts不存在         html的           Field＆＃39;浏览器＆＃39;不包含有效的别名配置           D：\ Bitbucket \ egbolig \ Frontend \ Application \ $$ _ gendir \ src \ app \ app.module.ngfactory.html不存在         的CSS

的package.json

{
  "name": "eg-bolig",
  "version": "1.0.0",
  "scripts": {
    "start": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "build:aot": "rimraf dist && webpack --config config/webpack.aot.js --progress --profile --bail"
  },
  "dependencies": {
    "@angular/common": "^4.1.0",
    "@angular/compiler": "^4.1.0",
    "@angular/core": "^4.1.0",
    "@angular/forms": "^4.1.0",
    "@angular/http": "^4.1.0",
    "@angular/platform-browser": "^4.1.0",
    "@angular/platform-browser-dynamic": "^4.1.0",
    "@angular/router": "^4.1.0",
    "@angular/animations": "^4.1.0",
    "web-animations-js": "^2.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.3.0",
    "zone.js": "~0.8.5",
    "font-awesome": "^4.7.0",

    "primeng": "^4.0.0-rc.3",
    "@progress/kendo-theme-default": "^2.28.1",
    "@progress/kendo-angular-buttons": "^0.24.0",
    "@progress/kendo-angular-grid": "^0.26.4",
    "@progress/kendo-angular-dropdowns": "^0.39.0",
    "@progress/kendo-angular-dateinputs": "^0.7.0",
    "@progress/kendo-angular-inputs": "^0.23.2",
    "@progress/kendo-angular-intl": "^0.12.0",
    "@progress/kendo-angular-l10n": "^0.3.0",
    "@progress/kendo-angular-dialog": "^0.20.0",
    "@progress/kendo-drawing": "^0.15.5",
    "@progress/kendo-data-query": "^0.5.1",

    "@angular/flex-layout": "2.0.0-beta.8"
  },
  "devDependencies": {
    "@types/node": "^7.0.13",
    "@ngtools/webpack": "^1.3.1",
    "@angular/compiler-cli": "4.1.0",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.2",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.2",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "typescript": "^2.2.2",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2",
    "webpack-merge": "^4.1.0",


    "postcss-loader": "^1.3.3",
    "autoprefixer": "^6.7.7",

    "url-loader": "^0.5.8",
    "resolve-url-loader": "^2.0.2",

    "to-string-loader": "^1.1.5"
  }
}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';

if (process.env.ENV === 'production') {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": true
  },
  "compileOnSave": false,
  "angularCompilerOptions": {
    "skipMetadataEmit": true
  }
}

webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        extensions: ['.js', '.ts', '.html', '.css', '.scss']
    },

    module: {
        rules: [
            // {
            //     test: /\.ts$/,
            //     use: [
            //         {
            //             loader: 'awesome-typescript-loader'
            //         }, 'angular2-template-loader']
            // },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|ico)$/,
                use: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/font-woff&name=assets/fonts/[name].[hash].[ext]'
            },
            {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/font-woff&name=assets/fonts/[name].[hash].[ext]'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=application/octet-stream&name=assets/fonts/[name].[hash].[ext]'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: 'file-loader?name=assets/fonts/[name].[hash].[ext]'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=10000&mimetype=image/svg+xml&name=assets/fonts/[name].[hash].[ext]'
            },
            {
                test: /\.(sass|scss)$/,
                exclude: helpers.root('src', 'app'),
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { sourceMap: true } },
                        { loader: 'postcss-loader' },
                        { loader: 'resolve-url-loader' },
                        { loader: 'sass-loader', options: { sourceMap: true } },
                    ]
                })
            },
            {
                test: /\.(sass|scss)$/,
                include: helpers.root('src', 'app'),
                use: [
                    { loader: "to-string-loader", options: { sourceMap: true } }, // todo: checkup, Doesnt support sourcemap yet (its in merge)
                    { loader: "css-loader", options: { sourceMap: true }},
                    { loader: 'postcss-loader' },
                    { loader: 'resolve-url-loader' },
                    { loader: 'sass-loader', options: { sourceMap: true, outputStyle: 'expanded' } },

                ]
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                use: 'raw-loader'
            }
        ]
    },

    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html',
            favicon: "src/assets/img/favicon.ico"
        })
    ]
};

webpack.prod.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
    devtool: 'source-map',

    output: {
        path: helpers.root('dist'),
        publicPath: '/angular/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[hash].chunk.js'
    },

    plugins: [
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
          mangle: {
              keep_fnames: true
          }
      }),
      new ExtractTextPlugin('[name].[hash].css'),
      new webpack.DefinePlugin({
          'process.env': {
              'ENV': JSON.stringify(ENV)
          }
      }),
      new webpack.LoaderOptionsPlugin({
          htmlLoader: {
              minimize: false // workaround for ng2
          }
      })
    ]
});

webpack.aot.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var prodConfig = require('./webpack.prod.js');
var AotPlugin = require('@ngtools/webpack').AotPlugin;
var helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(prodConfig, {
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: '@ngtools/webpack'
            }
        ]
    },

    plugins: [
        new AotPlugin({
            tsConfigPath: helpers.root('tsconfig.json'),
            entryModule: helpers.root('src',' app', 'app.module#AppModule')
        })
    ]
});