2017-03-01 70 views
0

我的項目建立在Linux上,我不知道爲什麼。 該發行版是Red Hat Enterprise Linux Server 7.0版。Angular2 AOT ngtools/webpack在linux上失敗

我的環境是:

"node" : "6.9.1" 
"@angular/compiler-cli": "2.4.7", 
"@ngtools/webpack": "1.2.11", 
"typescript": "2.0.10", 
"webpack": "2.2.1", 

當我建立與ngtools應用/的WebPack使用下面的命令:

rimraf dist && node --max_old_space_size=2048 node_modules/webpack/bin/webpack.js --progress --profile --bail 

它未能在編譯結束,但我們可以看到在日誌中,它會生成構建的dist文件夾。我想有一些錯誤在構建結束...

Version: webpack 2.2.1 
    Time: 207558ms 
                     Asset  Size Chunks     Chunk Names 
       fonts/custom-font-icons.ce13ab801013419a9435b06680f3adc1.woff?  7.3 kB   [emitted] 
       fonts/fontawesome-webfont.674f50d287a8c48dc19ba404d20fe713.eot?  166 kB   [emitted] 
       fonts/fontawesome-webfont.b06871f281fee6b241d60582ae9369b9.ttf?  166 kB   [emitted] 
      fonts/fontawesome-webfont.af7ae505a9eed503f8b8e6982036873e.woff2? 77.2 kB   [emitted] 
       fonts/fontawesome-webfont.fee66e712a8a08eef5805a46892932ad.woff?  98 kB   [emitted] 
           fonts/line.567f57385ea3dde2c9aec797d07850d2.gif? 13.1 kB   [emitted] 
          fonts/loading.8732a6660b528fadfaeb35bcf568875f.gif? 9.43 kB   [emitted] 
        fonts/password-meter.64ca45e5df0f0261431766d0701ac7b3.png? 1.56 kB   [emitted] 
     fonts/glyphicons-halflings-regular.f4769f9bdb7466be65088239c12046d1.eot? 20.1 kB   [emitted] 
     fonts/glyphicons-halflings-regular.89889688147bd7575d6327160d64e760.svg?  109 kB   [emitted] 
     fonts/glyphicons-halflings-regular.e18bbf611f2a2e43afc071aa2f4e1512.ttf? 45.4 kB   [emitted] 
    fonts/glyphicons-halflings-regular.fa2772327f55d8198301fdb8bcfc8158.woff? 23.4 kB   [emitted] 
    fonts/glyphicons-halflings-regular.448c34a56d699c29117adc64c43affeb.woff2?  18 kB   [emitted] 
      fonts/roboto-v15-latin-regular.9f916e330c478bbfa2a0dd6614042046.eot? 16.2 kB   [emitted] 
      fonts/roboto-v15-latin-regular.3d3a53586bd78d1069ae4b89a3b9aa98.svg?  49 kB   [emitted] 
      fonts/roboto-v15-latin-regular.38861cba61c66739c1452c3a71e39852.ttf? 32.7 kB   [emitted] 
     fonts/roboto-v15-latin-regular.16e1d930cf13fb7a956372044b6d02d0.woff? 18.5 kB   [emitted] 
     fonts/roboto-v15-latin-regular.7e367be02cd17a96d513ab74846bafb3.woff2? 14.6 kB   [emitted] 
        fonts/slider_handles.1868e2550c9853a938a6211d196f9dcd.png? 1.95 kB   [emitted] 
       fonts/fontawesome-webfont.25a32416abee198dd821b0b17a198a8f.eot? 76.5 kB   [emitted] 
       fonts/custom-font-icons.be444f2f1d966a009c8230e2ca33d4ff.svg? 25.1 kB   [emitted] 
       fonts/custom-font-icons.58e12fc160fde110afe6126b2d7470cd.ttf? 7.22 kB   [emitted] 
       fonts/fontawesome-webfont.912ec66d7572ff821749319396470bde.svg?  444 kB   [emitted] [big] 
       fonts/custom-font-icons.01080eeb1f5d62cb71ee683f27e38d3b.woff2? 3.72 kB   [emitted] 
       fonts/fontawesome-webfont.d7c639084f684d66a1bc66855d193ed8.svg?  392 kB   [emitted] [big] 
       fonts/fontawesome-webfont.1dc35d25e61d819a9c357074014867ab.ttf?  153 kB   [emitted] 
       fonts/fontawesome-webfont.c8ddf1e5e5bf3682bc7bebf30f394148.woff? 90.4 kB   [emitted] 
      fonts/fontawesome-webfont.e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2? 71.9 kB   [emitted] 
              js/vendor.17428182d2aa7c61c2cd.js 1.76 MB  0 [emitted] [big] vendor 
               js/app.17428182d2aa7c61c2cd.js 3.41 MB  1 [emitted] [big] app 
              js/polyfills.17428182d2aa7c61c2cd.js  119 kB  2 [emitted]   polyfills 
              css/vendor.17428182d2aa7c61c2cd.css  258 kB  0 [emitted] [big] vendor 
               css/app.17428182d2aa7c61c2cd.css  276 kB  1 [emitted] [big] app 
             css/vendor.17428182d2aa7c61c2cd.css.map 112 bytes  0 [emitted]   vendor 
              css/app.17428182d2aa7c61c2cd.css.map 109 bytes  1 [emitted]   app 
                    index.html 776 bytes   [emitted] 
                   environment.js 521 bytes   [emitted] 
                  img/ajax-loader.gif 2.05 kB   [emitted] 
                   img/axa-logo.ico  71 kB   [emitted] 
                   img/favicon.ico 5.43 kB   [emitted] 
                   img/logo-axa.png 3.58 kB   [emitted] 
                 img/selected-file.png 10.8 kB   [emitted] 
                  img/user-photo.jpg 3.36 kB   [emitted] 
                  service-worker.js 43 bytes   [emitted] 
     [0] ./~/@angular/core/index.js 2.54 kB {0} [built] 
      [] -> factory:230ms building:3986ms = 4216ms 
     [9] ./~/moment/moment.js 123 kB {0} [built] 
      [] -> factory:239ms building:6108ms = 6347ms 
     [13] ./~/@angular/common/index.js 771 bytes {0} [built] 
      [] -> factory:231ms building:3987ms = 4218ms 
     [24] ./~/@angular/router/index.js 909 bytes {0} [built] 
      [] -> factory:232ms building:4007ms = 4239ms 
     [61] ./~/ng2-translate/index.js 1.81 kB {0} [built] 
      [] -> factory:196ms building:1566ms dependencies:5091ms = 6853ms 
     [66] ./~/rxjs/Rx.js 9.58 kB {0} [built] 
      [] -> factory:208ms building:1611ms = 1819ms 
    [146] ./~/@angular/platform-browser/index.js 635 bytes {0} [built] 
      [] -> factory:227ms building:3996ms = 4223ms 
    [211] ./~/@angular/http/index.js 734 bytes {0} [built] 
      [] -> factory:232ms building:3998ms = 4230ms 
    [346] ./~/process/browser.js 5.3 kB {2} [built] 
      [] -> factory:1611ms building:9565ms = 11176ms 
    [556] ./~/@angularclass/hmr/dist/index.js 202 bytes {0} [built] 
      [] -> factory:246ms building:6315ms = 6561ms 
    [557] ./~/file-saver/FileSaver.js 5.96 kB {0} [built] 
      [] -> factory:240ms building:6340ms = 6580ms 
    [558] ./~/jquery/dist/jquery.js 258 kB {0} [built] 
      [] -> factory:4228ms building:19397ms = 23625ms 
    [1631] ./config/polyfills.ts 357 bytes {2} [built] 
      factory:39341ms building:147ms = 39488ms 
    [1632] ./config/vendor.ts 782 bytes {0} [built] 
      factory:39342ms building:159ms = 39501ms 
    [1633] ./src/bootstrap/prod.bootstrap.ts 740 bytes {1} [built] 
      factory:39342ms building:196ms dependencies:193ms = 39731ms 
     + 1657 hidden modules 

    ERROR in ./$$_gendir/~/@angular/common/src/directives/ng_if.ngfactory.ts 
    Module parse failed: /var/lib/jenkins/workspace/fbranch-gui-webapp-axa/$$_gendir/node_modules/@angular/common/src/directives/ng_if.ngfactory.ts Unexpected token (13:27) 
    You may need an appropriate loader to handle this file type. 
    | import * as import3 from '@angular/core/src/linker/view_utils'; 
    | export class Wrapper_NgIf { 
    | /*private*/ _eventHandler:Function; 
    | context:import0.NgIf; 
    | /*private*/ _changed:boolean; 
    @ ./$$_gendir/src/bootstrap/prod.module.ngfactory.ts 300:0-108 
    @ ./src/bootstrap/prod.bootstrap.ts 

    ERROR in ./$$_gendir/~/@angular/common/src/directives/ng_class.ngfactory.ts 
    Module parse failed: /var/lib/jenkins/workspace/fbranch-gui-webapp-axa/$$_gendir/node_modules/@angular/common/src/directives/ng_class.ngfactory.ts Unexpected token (13:27) 
    You may need an appropriate loader to handle this file type. 
    | import * as import3 from '@angular/core/src/linker/view_utils'; 
    | export class Wrapper_NgClass { 
    | /*private*/ _eventHandler:Function; 
    | context:import0.NgClass; 
    | /*private*/ _changed:boolean; 
    @ ./$$_gendir/~/ng2-bootstrap/alert/alert.component.ngfactory.ts 22:0-84 
    @ ./$$_gendir/src/bootstrap/prod.module.ngfactory.ts 
    @ ./src/bootstrap/prod.bootstrap.ts 

    ERROR in ./$$_gendir/~/@angular/common/src/directives/ng_template_outlet.ngfactory.ts 
    Module parse failed: /var/lib/jenkins/workspace/fbranch-gui-webapp-axa/$$_gendir/node_modules/@angular/common/src/directives/ng_template_outlet.ngfactory.ts Unexpected token (13:27) 
    You may need an appropriate loader to handle this file type. 
    | import * as import3 from '@angular/core/src/linker/view_utils'; 
    | export class Wrapper_NgTemplateOutlet { 
    | /*private*/ _eventHandler:Function; 
    | context:import0.NgTemplateOutlet; 
    | /*private*/ _changed:boolean; 
    @ ./$$_gendir/~/ng2-bootstrap/typeahead/typeahead-container.component.ngfactory.ts 23:0-94 
    @ ./$$_gendir/src/bootstrap/prod.module.ngfactory.ts 
    @ ./src/bootstrap/prod.bootstrap.ts 

如果我在Linux上運行此,我也沒有問題:

node_modules/.bin/ngc -p tsconfig.ngc.json 

所以我想,有一些具體的事情中webpack ngtools/loader,但我不知道是什麼。

這裏是webpack.prod.config:

/** 
* Webpack Constants 
*/ 

/** 
* Imports 
*/ 
var webpack = require('webpack'); 
var helpers = require('./helpers'); 


/** 
* Webpack Plugins 
*/ 
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; 
var autoprefixer = require('autoprefixer'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var CompressionPlugin = require("compression-webpack-plugin"); 
var ngToolsWebpack = require('@ngtools/webpack'); 

/** 
* Webpack configuration 
* 
* See: http://webpack.github.io/docs/configuration.html#cli 
*/ 
module.exports = { 

    devtool: 'source-map', 

    entry: { 

    'polyfills': './config/polyfills.ts', 
    'vendor': './config/vendor.ts', 
    'app': './src/bootstrap/prod.bootstrap.ts' // our angular app 

    }, 

    resolve: { 

    modules: [helpers.root('src'), helpers.root('node_modules')], 

    extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'], 

    alias: { 
     'app': 'src/app', 
     'common': 'src/common', 
     'moment':'moment/moment.js', 
     'jquery':'jquery/dist/jquery.js', 
     'file-saver':'file-saver/FileSaver.js', 
    } 

    }, 

    output: { 

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

    }, 

    module: { 

    rules: [ 
     /*{ 
     test: /\.ts$/, 
     enforce: 'pre', 
     loader: 'tslint-loader' 
     },*/ 
     { 
     test: /\.ts$/, 
     loaders: [ '@ngtools/webpack'], 
     exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/] 
     }, 

     // copy those assets to output 
     {test: /\.png|\.jpe?g|\.gif|\.svg|\.woff|\.woff2|\.ttf|\.eot|\.ico|\.svg$/, loader: 'file-loader?name=fonts/[name].[hash].[ext]?'}, 


     // Support for *.json files. 
     {test: /\.json$/, loader: 'json-loader'}, 

     { 
     test: /\.css$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader']}) 
     }, 
     {test: /\.css$/, include: helpers.root('src', 'app'), loader: 'raw-loader!postcss-loader'}, 

     { 
     test: /\.(scss|sass)$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader', 'sass-loader'], publicPath: '../'}) 
     }, 
     {test: /\.(scss|sass)$/, exclude: helpers.root('src', 'style'), loader: 'raw-loader!postcss-loader!sass-loader'}, 

     {test: /\.html$/, loader: 'raw-loader'} 

    ], 

    noParse: [/.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/, /angular2-polyfills\.js/] 

    }, 

    // Add additional plugins to the compiler. 
    // 
    // See: http://webpack.github.io/docs/configuration.html#plugins 
    plugins: (function() { 

    var plugins = []; 

    plugins.push(
     new CommonsChunkPlugin({ 
     name: ['vendor', 'polyfills'] 
     }) 
    ); 

    plugins.push(
     new webpack.LoaderOptionsPlugin({ 
     //minimize: true, 
     //debug: false, 
     options: { 
      ts : { 
      'ignoreDiagnostics': [ 
       2403, // 2403 -> Subsequent variable declarations 
       2300, // 2300 -> Duplicate identifier 
       2374, // 2374 -> Duplicate number index signature 
       2375, // 2375 -> Duplicate string index signature 
       2502 // 2502 -> Referenced directly or indirectly 
      ] 
      }, 
      /*tslint: { 
      emitErrors: false, 
      failOnHint: false 
      },*/ 
      postcss: [ 
      autoprefixer({ 
       browsers: ['last 2 version'] 
      }) 
      ] 
     } 
     }) 
    ); 
    // plugins.push(new DashboardPlugin()); 

    plugins.push(
     // Adding jQuery 
     new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     "window.jQuery": 'jquery' 
     }) 
    ); 

    plugins.push(
     // Adding Moment 
     new webpack.ProvidePlugin({ 
     moment: 'moment' 
     }) 
    ); 

    plugins.push(
     // Adding Moment 
     new webpack.ProvidePlugin({ 
     moment: 'file-saver' 
     }) 
    ); 

    plugins.push(
     // Inject script and link tags into html files 
     // Reference: https://github.com/ampedandwired/html-webpack-plugin 
     new HtmlWebpackPlugin({ 
     template: './src/public/index.html', 
     inject: 'body', 
     chunksSortMode: 'dependency' 
     }) 
    ); 

    plugins.push(
     // Extract css files 
     // Reference: https://github.com/webpack/extract-text-webpack-plugin 
     // Disabled when in test mode or not in build mode 
     new ExtractTextPlugin('css/[name].[hash].css') 
    ); 

    plugins.push(
     new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
      warnings: false 
     }, 
     output: { 
      comments: false 
     }, 
     sourceMap: false 
     })); 

    plugins.push(
     // Copy assets from the public folder 
     // Reference: https://github.com/kevlened/copy-webpack-plugin 
     new CopyWebpackPlugin([{ 
     from: helpers.root('src/public') 
     }]) 
    ); 

    plugins.push(
     new CompressionPlugin({ 
     asset: '[path].gz[query]', 
     algorithm: 'gzip', 
     test: /\.js$|\.css$/, 
     threshold: 10240, 
     minRatio: 0.8 
     }) 
    ); 

    plugins.push(new ngToolsWebpack.AotPlugin({ 
     entryModule: helpers.root('src/bootstrap/prod.module#ProdModule'), 
     tsConfigPath: './tsconfig.aot.json', 
    })); 

    return plugins; 

    }()) 

}; 

這裏是tsconfig.ngc:

{ 
    "compilerOptions": { 
    "module": "es2015", 
    "moduleResolution": "node", 
    "target": "es5", 
    "noImplicitAny": false, 
    "sourceMap": true, 
    "mapRoot": "", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "allowSyntheticDefaultImports": true, 
    "lib": [ 
     "es5", 
     "dom" 
    ], 
    "outDir": "lib", 
    "skipLibCheck": true, 
    "rootDir": "." 
    }, 
    "angularCompilerOptions": { 
    "genDir": "./app/ngfactory", 
    "entryModule": "./src/bootstrap/prod.module#ProdModule", 
    "skipMetadataEmit" : false 
    }, 
    "exclude": [ 
    "src/bootstrap/dev.bootstrap.ts", 
    "src/bootstrap/dev.module.ts", 
    "node_modules", 
    "dist" 
    ] 
} 

任何想法,我怎麼可能有更多的信息,使其工作在Linux上?

+0

感謝「 unvote「...但你能解釋我至少爲什麼嗎? – bevrard

回答

1

多虧了這個帖子: https://github.com/angular/angular-cli/issues/3674

我終於找到了問題。 主路徑缺少在AotPlugin:

mainPath: root('src', 'bootstrap.ts') 

而且也有在webpack.config一個錯字:

exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))$/] 

最後$不見了......