时间戳

首页 > 解决方案 > Angular 10 Ivy 与 Webpack 4 删除 ng 调试信息

angular - Angular 10 Ivy 与 Webpack 4 删除 ng 调试信息

问题描述

我已经成功构建了 angular 10 ivy 项目@ngtools/webpack。

一切正常，但在产品构建中唯一的问题是调试功能可用，ng.getContext() ng.getHostElement() $0.__ngContext__浏览器控制台上提供等功能。

我尝试调试 cli 源代码，据我了解，angular.json 标志 enableOptimization 确定调试信息。

如何从 angular.json 传递 enableOptimization 标志选项，一些如何 webpack ngtools。

注意：我没有使用 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
  }

标签： angularwebpackangular-ivy

解决方案

要在 prod 中删除角度调试上下文，需要添加一些优化键

[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,
      }),
    ]

global_defs简洁选项控制调试助手

推荐阅读