首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ng build --prod构建应用程序的过时版本

ng build --prod 命令用于构建 Angular 应用程序的生产版本。这个命令会执行一系列优化,包括代码压缩、摇树优化(tree shaking)、AOT 编译等,以确保应用程序在生产环境中运行高效且安全。如果你遇到了构建出过时版本的问题,可能是以下几个原因造成的:

基础概念

  • AOT 编译:提前编译(Ahead-of-Time Compilation),在构建时将模板编译成 JavaScript 代码,提高运行时性能。
  • 摇树优化:移除未使用的代码,减少最终包的大小。
  • 代码压缩:通过移除空格、注释和缩短变量名等方式减小文件体积。

可能的原因

  1. 缓存问题:构建工具可能使用了旧的缓存,导致构建出的是旧版本的代码。
  2. 版本控制问题:源代码可能没有被正确地提交或拉取到最新的更改。
  3. 配置错误:构建配置可能有误,导致使用了错误的构建脚本或参数。
  4. 依赖问题:项目依赖可能有未更新的旧版本。

解决方法

  1. 清除缓存
  2. 清除缓存
  3. 或者手动删除 node_modules 文件夹和 package-lock.json 文件,然后重新安装依赖:
  4. 或者手动删除 node_modules 文件夹和 package-lock.json 文件,然后重新安装依赖:
  5. 检查版本控制: 确保你的代码是最新的,可以通过以下命令更新代码:
  6. 检查版本控制: 确保你的代码是最新的,可以通过以下命令更新代码:
  7. 检查构建配置: 查看 angular.json 文件,确保构建配置正确无误。
  8. 更新依赖: 使用以下命令更新项目依赖到最新版本:
  9. 更新依赖: 使用以下命令更新项目依赖到最新版本:
  10. 使用 --output-hashing 参数: 在 angular.json 中配置输出哈希,确保每次构建都有唯一的文件名,避免浏览器缓存旧版本的问题。
  11. 使用 --output-hashing 参数: 在 angular.json 中配置输出哈希,确保每次构建都有唯一的文件名,避免浏览器缓存旧版本的问题。

应用场景

  • 网站部署:在生产服务器上部署应用程序时使用。
  • 性能优化:通过构建优化提高应用程序的加载速度和运行效率。
  • 安全性增强:通过代码压缩和混淆减少源代码泄露的风险。

优势

  • 性能提升:通过 AOT 编译和摇树优化,减少应用程序的加载时间。
  • 安全性增强:压缩代码和混淆变量名,使得源代码更难被逆向工程。
  • 部署简便:构建出的文件体积更小,便于快速部署到生产环境。

通过上述步骤,你应该能够解决构建出过时版本的问题,并确保每次都能成功构建出最新的生产版本。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 ng build 构建后资源地址引用错误的问题

最近使用 Angular 做项目的时候,通过 ng build 打包后的资源地址都带有 localhost:4200,百思不得其解,以为是打包的问题。...最后在 index.html 的文件中发现有一个 base 标签,原来这个标签会在页面的所有链接上添加默认地址。以下是详细说明: 标签为页面上的所有链接规定默认地址或默认目标。...通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。 使用 标签可以改变这一点。...浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 、、、 标签中的 URL。...注意:添加标签之后,对于使用相对路径的接口请求地址也会改变,所以要慎重使用。

70620

使用 ng build 构建后资源地址引用错误的问题

最近使用 Angular 做项目的时候,通过 ng build 打包后的资源地址都带有 localhost:4200,百思不得其解,以为是打包的问题。...最后在 index.html 的文件中发现有一个 标签,原来这个标签会在页面的所有链接上添加默认地址。以下是详细说明: 标签为页面上的所有链接规定默认地址或默认目标。...通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。 使用 标签可以改变这一点。...浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 、、、 标签中的 URL。...注意:添加 标签之后,对于使用相对路径的接口请求地址也会改变,所以要慎重使用。

95200
  • angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释

    ": [ // 引入全局样式,构建时会打包进来,常用于第三方库引入的样式 "styles.css" ], "scripts": [ // 引入全局脚本,构建时会打包进来...--base-href 指定站点的起始路径,如果你希望你的站点根路径为www.abc.com/mypath/,需要这样设置:ng build --base-href /mypath/ 6....--target 指定构建的目标,默认值是development,如果指定为production,构建时会加入treeshaking、代码压缩混淆等。...下面两条等价: ng build --target=production ng build --prod 7.--environment 指定应用执行环境。...下面两句等价: ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件: "environments

    1.6K30

    使用 Angular Transfer State 的一个具体例子

    因为我们希望我们的应用程序是可抓取和可索引的,所以我们使它通用:城市页面在服务器上呈现,存储为 HTML 文件并由 HTTP 服务器提供服务。...这些页面将包含浏览器应用程序,因此用户可以在加载第一页后使用 Angular 的强大功能继续在应用程序中导航。 您可以按照以下步骤尝试这个简单的示例。...使用下列命令将这个例子 clone 到本地: $ git clone https://github.com/feloy/ng-demo-transfer-state $ cd ng-demo-transfer-state...$ git checkout initial 复制代码 构建程序: $ npm install $ ng build -prod $ ng build -prod -app server --output-hashing...它可以将数据从应用程序的服务器端传输到浏览器应用程序。 为此,服务器应用程序将在它生成的 HTML 页面中添加我们要传输的数据。 包含在此生成的 HTML 页面中的浏览器应用程序将能够读取此数据。

    68300

    Angular 工具篇之分析包的大小

    : $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目,在构建的时候,需要添加相关参数,具体如下: $ ng build...--prod --stats-json 当项目构建完成后,在根目录下的 dist 文件夹下会生成一个 stats.json 文件,然后我们可以通过以下的命令来查看 webpack 打包文件大小信息:...在 angular6-example-app 项目中,也为我们提供了相应的 npm script,具体如下: "bundle-report": "ng build --prod --stats-json...首先我们先来在当前项目中安装 source-map-explorer: $ npm i source-map-explorer --save-dev 然后在重新进行项目构建: $ ng build --...为了方便操作,我们也可以定义一个 npm script 任务来处理上述的工作: "map-explorer": "ng build --prod --source-map && source-map-explorer

    2.4K40

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    应用程序的最终源代码可以在这里找到。 这个框架有两个主要版本:AngularJS(版本1)和Angular(版本2+)。...只是为了让您对这些环境文件在这里有所了解,它们实际上包含在编译阶段的项目中,并且.prod.该部分由--environment交换机为ng serveor 定义ng build。...准备生产 因此,让我们构建我们的应用程序供生产使用 为此,我们运行build命令: ng build --aot -prod 65% building modules 465/466 modules...我们正在将我们的应用程序构建为可以从任何Web服务器提供的静态资产(如果您想从子目录提供服务ng build,请选择--base-href)。...现在我们可以使用以下docker build -t app .命令来构建我们的应用程序 docker build -t app .

    42.7K10

    Angular 2.x折腾记 :(1)初识Angular-cli及脱坑要点

    编译node-sass编译报错 装visual studio 2015+及python2+ 采用国内的cnpm安装 记得带版本号,有时候不带版本会安装0.0.1版本,cnpm好像会把编译好node-sass...-format可以帮助格式和修复部分问题 启动 ng serve: 启动脚手架服务,默认端口4200;自定义什么看帮助额 打包 ng build: 开发模式打包,调用的环境文件是/src/environments.../environments.ts; ng build --prod: 以前调用aot打包还需要带上--aot,从beta31开始,--prod模式下自动调用aot打包, 调用的环境文件是/src/environments.../environments.prod.ts 弹出配置文件(还原真实的配置文件) ng eject : 这个东西的配置很多,可以弹出各种各样的源配置和文件 我们看到的ng开头的命令都是二重封装的。。。...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下 { "/": { "target

    17010

    Angular 2 + 折腾记 :(1)初识Angular-cli及脱坑要点

    装不上的 装了visual studio 2015+及python2+ [node-sass及部分模块需要调用这两个依赖进行编译] 或者采用国内的cnpm安装,记得带版本号,有时候不带版本会安装0.0.1...版本,cnpm好像会把编译好node-sass装上,不用本地再次编译 -- 亲测多次可用 或者安装windows-build-tools:windows下的依赖库,再执行官方安装命令 Linux下:...4200;自定义什么看帮助额 ---- 打包 ng build: 开发模式打包,调用的环境文件是/src/environments/environments.ts; ng build --prod: 以前调用...aot打包还需要带上--aot,从beta31开始,--prod模式下自动调用aot打包, 调用的环境文件是/src/environments/environments.prod.ts ---- 弹出配置文件...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下 { "/": { "target

    1.8K10

    如何管理云原生应用程序的依赖关系

    微服务是一种能够让开发者更轻松地构建和维护大型应用程序的软件架构。在微服务架构中,将一个应用分成几个独立的小块,即为服务。每一个服务都可以独立开发和部署,整个过程具有更大的灵活性和可扩展性。...要检查过时的依赖关系,你可以通过导航到 NPM 文件夹打开终端,运行以下命令: 你也可以使用一个简单的依赖关系检查脚本,它将检查一个 repo 或软件包的所有依赖关系。..."start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e"...: "ng e2e", "build-lazy": "ng build lazy", "build-dynamic": "ng build dynamicService", "npm-pack-lazy...它不仅可以加快你的开发过程,而且还可以确保你的团队中的每个人都在使用相同版本的依赖关系。自动化工具的工作原理是查看你在代码中声明的依赖关系,并将它们与可用的版本进行比较。

    1.7K10
    领券