在 Angular 中使用源映射生成生产版本 - CLI

Posted

技术标签:

【中文标题】在 Angular 中使用源映射生成生产版本 - CLI【英文标题】:Generate production build with sourcemaps in Angular - CLI 【发布时间】:2019-12-30 19:12:27 【问题描述】:

生产构建后如何保留源地图?

现在,我的命令如下所示:

"build-prod": "ng build --app=release -prod && cp -R lang dist"

我尝试将其更改为:

ng build --app=release --sourceMap=true -prod && cp -R lang dist

但没有任何改变。

如果我这样做: ng build --sourcemap 我得到了 sourcemaps 但后来得到的是 index.html 而不是 index.prod.html。

是否可以编辑第一个命令来构建源映射文件?

这是我的tsconfig.json 文件:


    "compileOnSave": false,
    "compilerOptions": 
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ]
    

【问题讨论】:

【参考方案1】:

你应该像这样编辑你的angular.json

"configurations": 
    "production": 
        "fileReplacements": [
            
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
            
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false, // change to true

然后运行

ng build --prod

但我不建议您在生产中打开源映射,因为它会增加包大小

【讨论】:

我的 tsconfig 文件中有 "sourceMap": true ,这还不够吗?我只有 tsconfig.json 和 angular-cli.json 还是 angular-cli.json 和 angular.json 一样? tsconfig 只支持开发模式。您需要在 angular.json 中为 prod 设置。角-cli。 json 版本过时。最新的 angular cli 使用了 angular。 json 请注意,源地图通常只有在用户打开他们的开发工具时才会被下载,因此对于大多数拥有可用源地图的用户不会影响下载大小:***.com/q/23848364/3001761 【参考方案2】:

你可以试试

ng build --prod --source-map=true|false

angular.io/cli/build

【讨论】:

以上是关于在 Angular 中使用源映射生成生产版本 - CLI的主要内容,如果未能解决你的问题,请参考以下文章

如何在生产 Vue.js 中禁用源映射或调试模式 - Webpack

如何在 Storybook 中为 Angular 启用样式源映射

如何使用 JavaScript 源映射(.map 文件)?

如何关闭 Angular 6 ng 测试的源映射?

伊斯坦布尔仪器加载程序找不到 Angular2 组件的源映射。

页面加载后如何指定文件源映射?