Skip to content

ngtools/webpack failed on linux but success on windows #5096

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
bevrard opened this issue Feb 28, 2017 · 2 comments
Closed

ngtools/webpack failed on linux but success on windows #5096

bevrard opened this issue Feb 28, 2017 · 2 comments

Comments

@bevrard
Copy link

bevrard commented Feb 28, 2017 •
edited
Loading

Please provide us with the following information:

OS?

Failed on Linux (Red Hat Enterprise Linux Server release 7.0). But working on Windows 7

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

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

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

The application has a compilation failed only on linux with ngtools/webpack
rimraf dist && node --max_old_space_size=2048 node_modules/webpack/bin/webpack.js --progress --profile --bail

The log given by the failure.

Normally this include a stack trace and some more information.

It fails at the end of the compilation, but as we can see in the log, it generates the dist folder with the build. I guess there is something wrong at the end of the build...

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

Mention any other details that might be useful.

If I run this on linux, I have no issue:
node_modules/.bin/ngc -p tsconfig.ngc.json
So I guess, there is something specific in webpack ngtools/loader, but I don't know what.

Here is the 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;

  }())

};

And here is the 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"
  ]
}

Any idea how could I have more info to make it work on linux?
@bevrard
Copy link
Author

bevrard commented Mar 1, 2017

Thanks to this post: #3674

I've finally found the issue. The mainPath was missing in the AotPlugin:

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

And there was also a typo in the webpack.config:

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

The last $ was missing...

@bevrard bevrard closed this as completed Mar 1, 2017
@bevrard bevrard mentioned this issue Mar 2, 2017
Closed
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@bevrard