Angular 5.2应用RxJS 5.6可管道化包优化及模块类型判断咨询

Great question! Since you're working with an ejected Angular CLI 1.7.1 project using @ngtools/webpack, here are straightforward, actionable ways to verify which module format your app is using:

1. Check Your tsconfig.json (Most Reliable) #

The TypeScript compiler's module setting directly dictates what module format gets emitted, and @ngtools/webpack strictly honors this configuration. Open your root tsconfig.json file and look for the compilerOptions section:

{
  "compilerOptions": {
    "module": "CommonJS", // This means your app uses CommonJS modules
    // OR
    "module": "ES2015", // This means your app uses ES modules
    // OR
    "module": "ESNext" // Also indicates ES modules
  }
}

In Angular CLI 1.7.x, the default module setting for development builds was often CommonJS, while production builds sometimes used ES modules—but this depends entirely on your ejected config. Be sure to check both your base tsconfig.json and any environment-specific variants (like tsconfig.prod.json).

2. Inspect Compiled Output Files #

Take a look at your app's compiled JavaScript (in the dist folder for production builds, or the unminified files served by ng serve in development):

• CommonJS indicators: Look for require() calls, module.exports, or exports. syntax at the top or bottom of files.
• ES modules indicators: Look for the same import and export statements you write in your TypeScript code, preserved in the compiled JS.

Note: Production builds with Angular CLI often bundle and minify code, so module syntax might be obfuscated. For clearer results, inspect a development build via your browser's dev tools.

3. Verify Webpack Configuration Settings #

Since your project is ejected, open your webpack.config.js (or environment-specific configs like webpack.prod.config.js) and locate the @ngtools/webpack loader setup. The loader uses your tsconfig settings to determine module output, but you can confirm there are no overrides:

module: {
  rules: [
    {
      test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
      loader: '@ngtools/webpack',
      options: {
        tsConfigPath: './tsconfig.json', // This points to your module format config
      }
    }
  ]
}

If the tsConfigPath points to a config with module: "ES2015" or higher, you're using ES modules; if it's set to CommonJS, that's the format your app relies on.

内容的提问来源于stack exchange，提问作者Laker