Angular 10 Ivy With Webpack 4 Remove ng Debug Info

user_4404499 0
Viewed 506

I have successfully build angular 10 ivy project with @ngtools/webpack.

Everything works fine but in prod build only issue is that debug function are available, ng.getContext() ng.getHostElement() $0.__ngContext__ etc function are available on browser console.

I tried debugging the cli source code, from what i understood is that angular.json the flag enableOptimization determine the debug info.

How to pass that enableOptimization flag option from angular.json, some how to webpack ngtools.

Note: I'm not using cli.

webpack.prod.js

   plugins: [
        new webpack.HashedModuleIdsPlugin(),
        new CleanWebpackPlugin(),
        new webpack.HashedModuleIdsPlugin(),
        new AngularCompilerPlugin({
          mainPath: resolve('./src/main.ts'),
          sourceMap: true,
          nameLazyFiles: false,
          tsConfigPath: resolve('./tsconfig.json'),
          // entryModule: resolve("app/app.module#AppModule" ),
          skipCodeGeneration: false,
          
        }),

tsconfig.json

"angularCompilerOptions": {
    "skipMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": true
  }
angular-ivy angular webpack
1 Answers

To remove angular debug context in prod, there are optimization keys that needs to added

[https://webpack.js.org/configuration/optimization/][1]

optimization: {
    noEmitOnErrors: true,
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        default: {
          chunks: 'async',
          minChunks: 2,
          priority: 10
        },
        common: {
          name: 'common',
          chunks: 'async',
          minChunks: 2,
          enforce: true,
          priority: 5
        },
        vendors: false,
        vendor: false
      }
    },
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        parallel: maxWorkers,
        terserOptions: {
          output: {
            comments: false,
          },
          compress: {
            pure_getters: true,
            // PURE comments work best with 3 passes.
            // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
            passes: true ? 3 : 1,
            global_defs: {
              ngJitMode: false,
              ngDevMode: false,
              ngI18nClosureMode: false
            }
          }
        },
        extractComments: false,
      }),
    ]

the global_defs terser options controls the debug helpers

user_44044990
Related