天道酬勤,学无止境

Generate production build with sourcemaps in Angular - CLI

How to keep sourcemaps after production build?

Right now, my command looks like this:

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

I tried changing it to:

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

but nothing changed.

If I do: ng build --sourcemap I get sourcemaps but then I get index.html instead of index.prod.html.

Is it possible to edit the first command to build sourcemap files?

this is my tsconfig.json file:

{
    "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"
        ]
    }
}

评论

You should edit your angular.json like this

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

Then run

ng build --prod

But I wouldnt recommend you turn on source map in production because it will increase a bundle size

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Webpack with sourcemap can't resolve variables in production mode
    I would like to generate source maps for our production build with Webpack. I managed to generate it, but when I stop on a breakpoint in the debugger, variables are not resolved: What am I doing wrong? How can I generate a source map that lets the chrome devtools resolve the variables once I stopped on a breakpoint in the debugger? These are my webpack configurations: webpack.config.js: const path = require('path'); const ROOT = path.resolve( __dirname, 'src/main/resources/packedbundle' ); const HtmlWebpackPlugin = require('html-webpack-plugin'); const LoaderOptionsPlugin = require('webpack
  • Angular 6“工作区需要在使用前加载。” 尝试生成新组件时(Angular 6 “Workspace needs to be loaded before it is used.” when trying to generate a new Component)
    问题 当我使用 angular dotnet new 命令创建 asp.net 核心项目时,不会向项目添加 angular.json 文件(angular 6),因此我们无法使用 angular cli。 如果我手动添加 angular.json 文件,项目会在下面给出异常!? Workspace needs to be loaded before it is used. Error: Workspace needs to be loaded before it is used. at Workspace._assertLoaded (D:\NetAngular\node_modules\@angular-devkit\core\src\workspace\workspace.js:59:19) at Workspace.getProjectByPath (D:\NetAngular\node_modules\@angular-devkit\core\src\workspace\workspace.js:103:14) at Object.getPackageManager (D:\NetAngular\node_modules\@angular\cli\utilities\config.js:97:35) at UpdateCommand.runSchematic (D
  • 如何为 Angular 6 应用程序启用 CSS 源映射?(How to enable CSS sourcemaps for Angular 6 application?)
    问题 如何在我的 Angular 6 应用程序中为 CSS 文件启用源映射? 我在 SCSS 文件中定义我的样式源代码,这些文件稍后由 Angular CLI 编译为 CSS。 但是,在样式调试期间,我在浏览器中看不到原始源代码。 所有样式都指向<style>...</style>块。 我希望在调试编译代码时能够看到对原始 SCSS 文件的引用。 我需要在angular.json文件中设置哪些选项? 我尝试将--source-map CLI 参数用于ng serve命令,但看起来它没有影响任何东西。 根据 webpack 编译日志,两种情况下都会发出 Sourcemap 文件。 回答1 来自 https://github.com/angular/angular-cli/issues/9099#issuecomment-388710635 1) 修改 angular.json 增加 --extract-css,在 6.0 这个参数从 ng serve 中移除 "build": { "builder": "@angular-devkit/build-angular:browser", "options": { --- }, "configurations": { "production": { --- }, "serve": { "extractCss": true, --- } }
  • 如何在生产服务器中调试 Angular?(How to debug Angular in prod server?)
    问题 在开发环境中,我可以使用 Chrome 源选项卡进行调试,但在 prod 服务器中,我在运行ng build --prod后使用 dist 文件夹内容。 该文件夹包含编译后的代码,所以如果生产中出现问题我不知道如何调试以找到问题。 是否可以通过生产编译代码进行调试? 回答1 更新:您可以尝试ng build --prod --sourcemap 对于 angular-2 的先前版本,这可以工作, ng build --prod --sourcemap 对于 Angular 8 正如评论中提到的 ng build --prod --sourceMap 回答2 在Angualr CLI 6选项似乎被更改为 ng build --prod --source-map 或者,您可以通过在生产配置中设置 sourceMap:true 来启用 angular.json 中的源映射 "configurations": { "production": { "optimization": true, "outputHashing": "all", **"sourceMap": false,** -------- 回答3 可以轻松地在不显示源映射的情况下调试生产构建。 您只需要将您的源映射从本地或远程服务器附加到您的生产版本。 方法和概念: 为生产部署构建没有源映射的应用程序 ng build
  • angular-cli 中使用的 .map 文件是什么,ng build 可以不创建这些文件吗?(What are the .map files used for in angular-cli and can ng build not create these files?)
    问题 angular-cli 的 ng build 创建了 3 个文件: inline.bundle.js vendor.bundle.js main.bundle.js 以及每个人的地图文件。 做什么的? 我还问是否有办法改变这种行为,不是创建这 3 个文件,而是将所有 js 文件复制到 dist 目录,而不是捆绑任何东西。 那可能吗? 回答1 .map文件用于调试您的应用程序。 它与 angular-cli 无关,是 typescript 编译器的特性,您可以在 tsconfig 文件中设置\取消设置,如下所示, "sourceMap": true\false 希望这可以帮助!! 回答2 @Madhu 的回答对任何ng build命令禁用它。 如果您想有条件地或暂时从构建运行中禁用它: 角 8 ng build --watch --source-map=true/false 角 7 ng build --watch --sourcemaps=true/false 角 6 ng build --watch --no-sourcemap 回答3 下面的命令在生成构建时不会生成源文件: > 构建 --prod -sm false 如果要生成源文件,请使用以下命令: > 构建 --prod -sm 真 这是屏幕截图:
  • Angular2 - Could not find an NgModule
    Hello I've just created a new project from the CLI using the simple ng new frontend command however once I go into my project to: cd frontend/src/app and try to generate a new component like so ng generate component about I get the following error message in my terminal(MacOS): Could not find an NgModule. Use the skip-import option to skip importing in NgModule. I have installed Angular 2 globally and when I run my ng --version I receive the following: Angular CLI: 6.0.0 Node: 8.11.1 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angular
  • Angular2 - 找不到 NgModule(Angular2 - Could not find an NgModule)
    问题 您好,我刚刚使用简单的 CLI 创建了一个新项目 ng new frontend 然而,一旦我进入我的项目,命令: cd frontend/src/app 并尝试像这样生成一个新组件 ng generate component about 我在我的终端 (MacOS) 中收到以下错误消息:找不到 NgModule。 使用 skip-import 选项跳过 NgModule 中的导入。 我已经全局安装了 Angular 2,当我运行我的 ng --version 我收到以下信息: Angular CLI: 6.0.0 Node: 8.11.1 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.6.0 @angular-devkit/core 0.6.0 @angular-devkit/schematics 0.6.0 @schematics/angular 0.6.0 @schematics/update 0.6.0 rxjs 6.1.0 typescript 2.7.2 在我的Angular.json里面我有: { "$schema": "./node_modules/
  • TypeScript - "debugger;" statement does not work while working with QA Environment in Angular
    I am working on a angular application with a setup of various environments. I am facing issues when I am trying set up some debug points using debugger; I am using ng serve -o --webconfiguration==qa to compile node_modules run the server. However, when I use ng serve -o debug points are hit. How do I set up my application to hit debug points while working with QA Environment Here's my configuration - Angular CLI Version - 7.3.8 Node Version - 10.15.3 NPM - 6.4.1 TypeScript - 3.1.6 angular.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot":
  • 在我的 angular-cli 项目中从 node-sass 切换到 dart sass(Switching from node-sass to dart sass in my angular-cli project)
    问题 在“npm install”期间,我一直在用 node-sass 做各种愚蠢的事情,包括但不限于: GNU c++ 编译一些东西(可能是它本身) 尝试运行python2.7 尝试运行任何其他版本的 python 尝试连接到github 这在企业环境中造成了问题,我必须在 Jenkins 上编译我的项目,其中 NPM 库必须从企业服务器上的 npm 注册表克隆中提取,并且只有该特定项目的严格必需品在 docker 上可用,因此: 没有github 没有蟒蛇没有 C++ 我决定我已经受够了 node-sass 的恶作剧,所以我尝试了建议的“dart-sass”,因为这个概念似乎是完全兼容角度的,旨在解决 node-sass 的大多数问题: https://sass-lang.com/dart-sass 我尝试删除 node-sass 并将 dart-sass 代替: npm remove node-sass npm install dart-sass ng serve 但这会导致: Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module 'node-sass' 对于项目中的每个组件。 为什么它仍在寻找 node-sass? 这是我的 package
  • angular-cli 总结
    NPM 版本要求 $ node -v $ npm -v 其中 Node 版本需要 6.9.0+,NPM 需要 3.0.0+。 #安装安装 如果之前安装了,升级到最新版本: $ npm uninstall -g @angular/cli $ npm cache clean $ npm install -g @angular/cli@latest #创建应用创建应用 新建项目前,可以设置新项目下载 NPM 包的 registry 来提高下载速度,这里设置成 cnpm。 ng set --global packageManager=cnpm 创建新项目使用 ng new 命令,可以根据项目要求按需提供一些参数。 $ ng new lego --skip-tests=true --style=less --prefix=lego --routing --skip-tests=true 属性忽略生成组件测试文件(e2e及测试相关配置文件需要手动删除)--style=less 属性指定样式文件名后缀为 less(默认为 css),默认样式也可以通过设置命令来修改:ng set defaults.styleExt less--prefix=lego 属性指定有所有组件的标签选择器前缀为 lego-(默认为 app-) 最后,这些属性可以在 .angular-cli.json 配置文件中去修改。
  • Switching from node-sass to dart sass in my angular-cli project
    I've been having issues with node-sass doing all manner of silliness during "npm install" including but not limited to : GNU c++ compiling something (likely itself) trying to run python2.7 trying to run any other version of python trying to connect to github and this was posing problems in a corporate context where I have to compile my project on Jenkins where NPM libraries must be pulled from a clone of npm registry on corporate servers and only the strict necessities of that specific project are available on the dockers so : no github no python no c++ and I'd decided I'd had enough of node
  • Angular build for production fails
    When I try to build for production my angular application with the following command ng build --prod --build-optimizer I get the following output: Date: 2019-01-29T08:39:12.193Z Hash: 05648c76cf91b1245f68 Time: 27920ms chunk {0} runtime.1eee2a92f0ed121267d0.js (runtime) 2.22 kB [entry] [rendered] chunk {1} 1.71c6b320e46d84e7f880.js () 88.8 kB [rendered] chunk {2} main.058aa675d38205a01c2e.js (main) 1.65 MB [initial] [rendered] chunk {3} polyfills.6226af78bf8dfb509e3e.js (polyfills) 61.7 kB [initial] [rendered] chunk {4} styles.dec6a5db702d518085c9.css (styles) 61.2 kB [initial] [rendered]
  • Angular CLI 1.7.0和Visual Studio Code-无法设置断点(Angular CLI 1.7.0 and Visual Studio Code - can't set breakpoints)
    问题 我正在Visual Studio Code中使用Chrome Debugger插件调试Angular应用程序。 升级为使用angular/cli@1.7.0后,我们无法在调试时在VS Code中的打字稿代码中命中断点。 如果我们回滚到angular/cli@1.6.7,则断点将再次开始工作。 这是我的ng -v输出: Angular CLI: 1.7.0 Node: 9.2.0 OS: win32 x64 Angular: 5.2.5 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cli: 1.7.0 @angular-devkit/build-optimizer: 0.3.1 @angular-devkit/core: 0.3.1 @angular-devkit/schematics: 0.3.1 @ngtools/json-schema: 1.2.0 @ngtools/webpack: 1.10.0 @schematics/angular: 0.3.1 @schematics/package-update: 0.3.1
  • Angular Workspace with two Angular + Nativescript Code sharing Project + Library
    I have a structure like this: AngularWorkspace/ |--app/ | | -- |--dist/ | |-- |--node_modules/ | |-- |--projects/ | |--library/ | |--AngularNativescriptAppOne/ | | |--App_Resources | | |--src | | | |--app/ | | | |--assets/ | | | |--environments/ | | | |--environments/locale | | | |--environments/package.json | | | |--environments/tsconfig.app.json | | | |--environments/main.ts | | | |--environments/main.ns.ts | |--AngularNativescriptAppTwo/ | | |--App_Resources/ | | |--src/ | | | |--app/ | | | |--assets/ | | | |--environments/ | | | |--environments/locale | | | |--environments/package.json | |
  • Angular-cli 不使用 --dev 选项生成打字稿文件(Angular-cli not generating typescript files with --dev option)
    问题 使用 angular-cli:1.0.0-beta.14,节点:6.6.0,操作系统:win32 x64。 当然,这是 angular-cli 的 webpack 版本。 我可以使用 ng build。 ng 构建输出给出了这个 webpack 版本:webpack 2.1.0-beta.22。 我想知道为什么当我运行 ng build --dev 时没有捆绑 TypeScript 文件。 我得到了 js 文件和源映射(不幸的是 Chrome 窒息了 - 我无法解析 SourceMap)。 我认为对于 DEV 部署,除了源映射之外,我还会获得我开发的打字稿文件。 是否有一些关于 ng build 使用选项的文档? 回答1 在此处查看@vt5491 的详细回答: 使用 chrome Web 开发人员工具在 Angular 2 CLI 项目中未显示打字稿文件 另外,我相信它只是ng b -dev和一个- 。 在此处查看ng help : ... ng build <options...> Builds your app and places it into the output path (dist/ by default). aliases: b --target (String) (Default: development) aliases: -t <value>, -dev
  • Is there a way to extend configurations in angular.json?
    While building my Angular 6 application, I need to specify 2 things at once: If it's production or development build The locale I'm using In my angular.json I have: "build": { ... "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true }, "pl": { "fileReplacements": [ { "replace": "src/assets/i18n
  • Angular cli:为生产做好准备(Angular cli: getting it ready for production)
    问题 我写了我的第一个 Angular 2 应用程序,我想把它放到一个测试服务器上。 我最近将它转换为 Angular-cli 项目并使用以下命令构建它: ng build --prod 据我了解,然后我应该能够将“/dist”文件夹的内容粘贴到测试服务器上并使用 ng serve 但是,如果“/dist”文件夹可以独立运行,为什么我无法在我的电脑上将它作为独立应用程序运行(即,我无法将 dist 文件夹的内容复制到电脑上的另一个位置并运行它。) 这实际上将是我将放在测试/生产服务器上的第一个应用程序,所以如果我问的是愚蠢的,请耐心等待。 回答1 你不应该,我认为不能,使用ng serve来发布你的构建。 使用ng build创建的文件可以上传到网络服务器并从那里提供。 运行ng build -e=prod --prod --no-sourcemap --aot 虽然最新版本的angular-cli默认没有 sourcemaps,但这里值得注意。 -e=prod将确保它使用environments文件夹中定义的生产环境。 最后一件事是--aot 。 如果您的项目中没有发生特殊的事情,则很有可能使用提前编译器对其进行预编译。 但是,您可能会遇到问题,您可以使用ng serve --aot解决这些问题,或者完全删除--aot 。 然后您可以继续将dist文件夹的内容复制到您的网络服务器
  • 根据环境配置基本 URL(Configure base URL depending on environment)
    问题 假设我们有 Angular 4+ 应用程序需要位于不同环境的不同相对根 URL 中,即: http://localhost:4200/index.html用于开发 http://prod.server.com/angular-app/index.html用于生产 很可能,我们希望在我们的environment.x.ts文件中有该选项: export const environment = { production: false, appRoot: "/" }; export const environment = { production: true, appRoot: "/angular-app/" }; 我们如何配置 Angular 构建/运行时基础架构以根据environment.x.ts文件中的此选项自动调整应用程序? 更新:由于我是通过 Visual Studio 构建/发布系统(模板)间接使用 Angular CLI 工具链,所以有一个完全基于 Angular CLI + *.json / *.ts / *.js文件的解决方案会很好. 这样它就适用于任何可以使用 Angular CLI 的构建系统。 回答1 如果您使用的是 Angular CLI,您可以执行以下操作: ng build --prod --base-href /myUrl/ 要么 ng build
  • 设置 angular cli 生产构建 tfs(Setup angular cli production build tfs)
    问题 在本地,我的项目使用 ng build --prod 构建得很好,但是如果我使用以下 powershell 脚本在 tfs(团队基础服务器)上设置它,它会失败并出现一些错误。 ps脚本: npm install npm run ng build --prod tfs 构建输出: [1m[33mWARNING in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/scss/style .scss autoprefixer: D:\a\1\s\src\scss\style.scss:7468:3: 将transition-property 替换为transition,因为Autoprefixer 不能支持transition-property 和其他transition-* @ ./src 的任何情况/scss/style.scss 4:14-203 2017-04-30T07:17:51.9419669Z @ multi ./~/primeng/resources/themes/bootstrap/theme.css ./~/primeng/resources/primeng.min。 css ./~/font-awesome/css
  • 自 Angular CLI 6 起,ng build --prod 不会缩小/丑化/删除注释(ng build --prod does NOT minify / uglify / remove comments since Angular CLI 6)
    问题 由于我已经将我的 Angular 应用程序升级为使用 Angular CLI 版本6.x ,编译它用于生产(使用ng build --prod ,像往常一样)不会产生缩小的 js。 这导致了非常大的vendor.js大小(在我的例子中几乎是 10 MB)。 如果我打开生成的vendor.js文件,我可以清楚地看到代码没有缩小,注释也没有删除。 回答1 问题出在angular.json文件中。 在关键projects.MY_PROJECT_NAME.architect.build.configurations.production .MY_PROJECT_NAME.architect.build.configurations.production 下,当你创建一个新的角度项目时,我错过了production配置中通常默认出现的所有选项。 为了解决这个问题, production配置应该是这样的: "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap