Angular-cli: ERROR in Patterns must be a string or an array of strings

[adarshk7]

Bug Report or Feature Request (mark with an x)

- [x] bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node v8.11.2
npm v5.6.0
OS: (irrelevant)

Repro steps

I am using @ngtools/webpack and webpack-contrib/copy-webpack-plugin and in that package this function uses virtual_file_system_decorators stat function and if I change that to

stat(path, callback) {
    let result = this._webpackCompilerHost.stat(path);
    if (result) {
        callback(null, this._webpackCompilerHost.stat(path));
    } else {
        callback(path, undefined);
    }
    // commented out what came after https://github.com/angular/angular-cli/commit/da7daef34bbdd0dbfbe83f21f71d45996eeb8dab
    // try {
    //     // tslint:disable-next-line:no-any
    //     callback(null, this._webpackCompilerHost.stat(path));
    // }
    // catch (e) {
    //     // tslint:disable-next-line:no-any
    //     callback(e, undefined);
    // }
}

the error doesn't exist any more and everything compiles.

This happens when I upgraded from angular 6 to angular 7 which involved updating this package in the process.

The log given by the failure

ERROR in Patterns must be a string or an array of strings

[alan-agius4]

Can you share you angular.json please?

[adarshk7]

I'm not using angular-cli entirely, only @ngtools/webpack so I don't have a angular.json. If it helps the following is around what my webpack.config.js looks like:

const { AngularCompilerPlugin } = require('@ngtools/webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

const babelLoader = {
  loader: 'babel-loader',
  options: {
    presets: [
      '@babel/preset-env',
    ],
    plugins: [
      '@babel/plugin-transform-runtime',
      'angularjs-annotate',
    ],
    cacheDirectory: true,
  },
};

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: {
    main: [
      '@babel/polyfill',
      './project/blabla/main',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'project/static/dist'),
    publicPath: '/static/dist/',
    filename: '[name].[hash].js',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    ...
    rules: [
      {
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        use: [
          babelLoader,
          '@ngtools/webpack',
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: babelLoader,
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          minimize: true,
          caseSensitive: true,
          collapseBooleanAttributes: true,
          removeEmptyAttributes: true,
        },
      },
      ...
    ],
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: `./node_modules/blabla`,
        to: 'blabla/',
        flatten: true,
      },
      {
        from: './project/blabla',
        to: 'blabla',
        flatten: true,
      },
    ]),
    new AngularCompilerPlugin({
      mainPath: 'main.ts',
      basePath: path.resolve(__dirname, './project/blabla'),
      entryModule: path.resolve(__dirname, './project/blabla/app/angular-app.module#AppModule'),
      tsConfigPath: path.resolve(__dirname, './tsconfig.json'),
      nameLazyFiles: true,
      skipCodeGeneration: true,
    }),
  ],
  devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'cheap-module-eval-source-map',
  devServer: {
    contentBase: false,
    public: process.env.SOMETHING || 'localhost:3000',
    port: 3000,
    publicPath: '/static/dist/',
    proxy: {
      '/': {
        target: 'http://localhost:5000',
      },
    },
  },
};

[Alorel]

I'm having the same problem too. Angular packages and @ngtools/webpack used to work just fine in 6.x and are breaking the build in ^7.0.0.

Not using the CLI, just webpack.config.js:

module.exports = {
  //...
  module: {
    rules: [{
      test: /(?:\.ngfactory\.js|\.ngstyle\.js|appv2[\\/].+\.ts|appv2[\\/].+\.js)|(api[\\/]models|api[\\/]util|api[\\/]lib|definitions)[\\/].+\.ts$/i,
      use: ['@ngtools/webpack']
    }]
  }
  //...
};

Setting all of the Angular dependencies to ^7.0.0 and @ngtools/webpack to 6.x fixes the compilation issues.

Full config available in this gist.

[mrichard]

+1

Seeing this issue as well. webpack 4 with @ngtools/[email protected] and [email protected].

Reverting to @ngtools/[email protected] works.

[alan-agius4]

Would someone please create a small reproduction? This will help us solve the issue faster.

Thanks.

[Alorel]

I tried to reproduce the error in a very minimal environment, but couldn't. This appears to be ngtools/webpack interacting with something poorly as opposed to it having a self-contained bug. I'll do some more digging around after work (in ~6 hrs)

[Alorel]

Updates:

• Managed to get the error message with the following setup. CopyWebpackPlugin throws its own error with ngtools/webpack at ^6.2.6, ERROR in [copy-webpack-plugin] unable to locate '.gitignore' at '/home/art/dev/ng-err-reproduction/src/.gitignore', but ^7.0.0 turns throws the error ERROR in Patterns must be a string or an array of strings. This is odd, but not the same behaviour I experienced at work where CopyWebpackPlugin is configured correctly.
• I tried to recreate the OP's setup but was unable to reproduce the error either. @adarshk7 any chance you could have a go?

Sorry I wasn't able to produce the details I wanted to, but at least it's one baby step closer.

[alan-agius4]

@Alorel, thanks for the repo, that will suffice.

[alan-agius4]

We discussed this a bit, and it looks like copy-webpack-plugin should handle falsey values when using stats. We'll create a PR to address this issue.

[angular-automatic-lock-bot[bot]]

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._}