Angular 2(2.4.10)和Kendo-angular-grid(0.22.3)不能用Webpack和AOT编译

时间:2017-04-03 17:02:06

标签: angular webpack kendo-grid

我是这个kendo UI和angular 2的新手。在尝试使用带有webpack和AOT的kendo-angular-grid(0.22.3)进行角度2应用程序的生成构建时,它会抛出编译错误。

  

npm run ngc&& npm运行webpack-production   asp.net@1.0.0 ngc C:\ Users .. \ Documents \ Visual Studio 2017 \ Projects .. \ testwebapp> ngc -p ./tsconfig-aot.json   C:/ Users /../ Documents / Visual Studio 2017 / Projects /../ testwebapp / Scripts / App / item-list.component.ngfactory.ts:24:27:无法找到模块&#39 ; ../../ node_modules/@progress/kendo-angular-grid/dist/es/grid.component.ngfactory' 即可。   C:/ Users /../ Documents / Visual Studio 2017 / Projects /../ testwebapp / Scripts / App / item-list.component.ngfactory.ts:28:27:无法找到模块&#39 ; ../../ node_modules/@progress/kendo-angular-grid/dist/es/column.component.ngfactory '

问题是加载器没有查看正确的文件夹。我在webpack.prod.js中有这个:

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

var path = require('path');

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

module.exports = {
devtool: 'source-map',
entry: {
    'polyfills': './Scripts/polyfills.ts',
    'app': './Scripts/main-aot.ts'
},
resolve: {
    extensions: ['*', '.ts', '.js']
},
output: {

    path: path.join(__dirname, '.dist/web/aot/'),
    filename: 'js/[name]-[hash:8].bundle.js',
    chunkFilename: 'js/[id]-[hash:8].chunk.js'
},

module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                'awesome-typescript-loader',
                'angular-router-loader?aot=true&genDir=Scripts/.aot/'
            ]
        },
        {
            test: /\.html$/,
            use: 'raw-loader'
        },
        {
            test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
            loader: 'file-loader?name=assets/[name]-[hash:6].[ext]',
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('css-loader')
        }
    ],
    exprContextCritical: false
},


plugins: [

    new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'polyfills']
    }),
    new webpack.LoaderOptionsPlugin({
        minimize: true,
        options: {
            htmlLoader: {
                minimize: false
            }
        }
    }),
    new HtmlWebpackPlugin({

        filename: 'index.html',
        inject: 'body',
        template: './Scripts/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)
        }
    })
]

};

0 个答案:

没有答案