Webpack 4 + Angular 5：Rule.parser.system: true的正确使用方法咨询

Hey there! I’ve helped a few folks work through this exact Webpack 4 migration quirk with Angular projects, so let’s get that warning sorted out for you.

The Rule.parser.system: true setting needs to live inside a specific rule in your webpack.config.js — specifically, the rule that handles your Angular/TypeScript files. Here’s exactly how to structure it:

module.exports = {
  // ... your existing webpack config (entry, output, plugins, etc.)
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'ts-loader',
          'angular2-template-loader'
        ],
        // Add this parser block directly inside the rule
        parser: {
          system: true
        }
      },
      // ... your other rules for styles, HTML templates, assets, etc.
    ]
  }
};

Quick Tips: #

• Don’t put the parser object at the top level of your config or inside the use array — it has to be a direct property of the rule you want to apply it to.
• If you have other rules that might be triggering the same warning (for example, rules handling other module formats), you can add the same parser.system: true line to those rules too. But in most Angular cases, the TypeScript rule is the one that needs it.

This setting tells Webpack 4 to properly recognize SystemJS-style module imports, which is what your older Webpack 3 Angular project was relying on. Once you add this, those warnings should disappear!

内容的提问来源于stack exchange，提问作者Pravinkumar R. D.