Warning on build with angular-cli beta28

[sinedied]

After upgrading to the latest angular-cli version, I now have a warning on build due to this library (more specifically, the encoding lib needed by gettext-parser):

WARNING in ./~/encoding/lib/iconv-loader.js
9:12-34 Critical dependency: the request of a dependency is an expression

[jsfirefly]

+1

[biesbjerg]

Sorry, I don't use angular-cli, so would appreciate if someone else would look into this. Maybe this is related? andris9/encoding#16

[biesbjerg]

Is this still an issue in final?

[sinedied]

Sorry, I switched to using plainjson files so I don't know if the issue is still present or know :(

[lahdekorpi]

I'm still having this problem with the latest angular-cli 1.0.1.

Strangely however with Ionic this works perfectly.

[biesbjerg]

Yeah, I'm using ionic so don't really feel like investigating this issue, especially since it's just a warning and everything supposedly works.

I'll keep this issue open and maybe someone will come along and contribute a PR.

[lahdekorpi]

@biesbjerg it's not just a warning. Angular 2 completely fails to work leading to a black error screen.

[biesbjerg]

Good to know.

Still, I need someone else taking the lead on this one. A PR is welcome!

[lahdekorpi]

I' m kind of new to webpacks but I'll take a look at this tomorrow.

[JanCizmar]

Is there any easy solution on this? It broken my application :(

[lahdekorpi]

@chlupaccom I'm not really sure in what cases Iconv is used here. But after just commenting out the requirement in the iconv-loader.js file everything works perfectly.

[JanCizmar]

@lahdekorpi Thanks a lot! It really works now! Maybe the encoding package is not needed now. angular/angular-cli#4348 (comment)

[AilisObrian]

Is it related with gettext-parser? because I couldn't find any evidence linked with iconv-loader.js yet.

[AilisObrian]

gettext-parser leads to 'encoding' which includes iconv-loader.js.

[AilisObrian]

gettext-parser manually fixed to v1.2.2 (currently latest)

[AilisObrian]

@biesbjerg yeah, it's related with andris9/encoding#16

[AilisObrian]

If we extract the angular-cli's webpack.config.js by ng eject and modify it as andris9/encoding#16, we can bypass this issue.
But I'll choose to use po2json.

/node_modules/.bin/po2json input.po output.json --pretty --format=mf

[henryruhs]

Here comes a detailed workaround:

• Add node-noop to your dependencies: npm i node-noop --save-dev
• Run the ng eject command
• Extend the ejected webpack.config.js

// extend the const line at the top (line ~10)
const { NormalModuleReplacementPlugin, ... } = require('webpack');

...
module.exports = {
  // extend the plugins array at the bottom (line ~349)
  "plugins": [
    new NormalModuleReplacementPlugin(
        /\/iconv-loader$/, 'node-noop'
    ),
    ...
   ]

• Run npm run start instead of ng serve

[PauwelsBart]

I fixed this with the solution of iongion. See:
andris9/encoding#18

save this in a postinstall.js

// IIFE
(function() {

'use strict';

// node
var fs = require('fs');
var path = require('path');

// Patch encoding module due to iconv issues -> make it use iconv-lite
(function() {
  var PATCH_VERSION = '0.1.12';
  var PATCH_MODULE = 'encoding';
  var PATCH_REASON = 'Use iconv-lite instead of iconv, helpful for webpack bundling';
  console.log('patching `%s`(%s) module', PATCH_MODULE, PATCH_VERSION);
  var pathToModule = path.join(__dirname, 'node_modules', PATCH_MODULE);
  var pathToModulePackage = path.join(pathToModule, 'package.json');
  var pathToModulePatchedFile1 = path.join(pathToModule, 'lib/iconv-loader.js');
  var pathToModulePatchedFile2 = path.join(pathToModule, 'lib/encoding.js');
  var moduleInfo = require(pathToModulePackage);
  if (moduleInfo.version !== PATCH_VERSION) {
    console.error(
      'patching `encoding` failed - expected `%s` but detected `%s`',
      PATCH_VERSION,
      moduleInfo.version
    );
    process.exit(1);
  }
  var contents;
  if (fs.existsSync(pathToModulePatchedFile1)) {
    contents = [
      '\'use strict\';',
      'module.exports = require(\'iconv-lite\');',
      '',
    ].join('\n');
    fs.writeFileSync(pathToModulePatchedFile1, contents);
  } else {
    console.error('patching `%s` failed because the file does not exist in', PATCH_MODULE, pathToModule);
    process.exit(1);
  }
  if (fs.existsSync(pathToModulePatchedFile2)) {
    contents = fs.readFileSync(pathToModulePatchedFile2).toString();
    contents = contents.replace('console.error(E);','');
    fs.writeFileSync(pathToModulePatchedFile2, contents);
  } else {
    console.error('patching `%s` failed because the file does not exist in', PATCH_MODULE, pathToModule);
    process.exit(1);
  }
  console.log('patching `%s`, reason: `%s` - completed', PATCH_MODULE, PATCH_REASON);
})();

})(this);

In your package.json:

...
  "scripts": {
    ...
    "postinstall": "node postinstall.js"
  }
...

[olegkorol]

Works like a charm @PauwelsBart. Thanks.