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

Angular 7应用部署ng build不理解--目标或--环境

Angular 7是一种流行的前端开发框架,用于构建现代化的Web应用程序。ng build是Angular CLI(命令行界面)提供的一个命令,用于将Angular应用程序构建为可部署的静态文件。

在执行ng build命令时,可以通过添加--target或--environment参数来指定目标或环境。这些参数用于指定构建过程中使用的配置文件和环境变量。

--target参数用于指定构建的目标平台,例如浏览器、服务器等。通过指定不同的目标,可以优化构建过程以适应特定平台的需求。例如,可以使用--target=production来进行生产环境的构建,以获得更小的文件大小和更好的性能。

--environment参数用于指定构建时使用的环境配置文件。Angular应用程序通常具有不同的配置文件,用于在不同的环境中设置不同的变量和参数。通过使用--environment参数,可以在构建过程中选择使用哪个配置文件。例如,可以使用--environment=prod来选择生产环境的配置文件。

在部署Angular 7应用程序时,使用ng build命令可以将应用程序构建为静态文件,然后将这些文件部署到Web服务器上。构建过程会将应用程序的源代码编译、压缩和优化,生成用于生产环境的最终文件。

对于Angular 7应用程序部署,腾讯云提供了一系列相关产品和服务,例如:

  1. 腾讯云对象存储(COS):用于存储和托管静态文件,可以将构建后的Angular应用程序文件上传到COS中,并通过CDN加速访问。
  2. 腾讯云云服务器(CVM):用于部署和运行应用程序的服务器实例,可以将构建后的Angular应用程序文件部署到CVM上,并通过域名访问。
  3. 腾讯云内容分发网络(CDN):用于加速静态文件的访问,可以将构建后的Angular应用程序文件通过CDN分发,提供更快的访问速度和更好的用户体验。
  4. 腾讯云SSL证书(SSL Certificate):用于为应用程序提供HTTPS安全访问,可以为部署在腾讯云上的Angular应用程序配置SSL证书,确保数据传输的安全性。

请注意,以上提到的腾讯云产品和服务仅作为示例,其他云计算品牌商也提供类似的产品和服务,具体选择应根据实际需求和预算来决定。

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

相关·内容

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

一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 "ejected": false // 标记该应用是否已经执行过...--hmr 注意开启之后,只是在angular-cli里的webpack添加必要的扩展,等价于webpack-dev-server --hot,还需要在应用代码里处理hmr逻辑,如可在main.ts里添加...--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

使用 Github Actions 自动部署 Angular 应用到 Github Pages

前言 最近在学习 Angular,一些基础的语法也学习的差不多了,就在 github 上新建了一个代码仓库,准备用 ng-zorro 搭个后台应用的模板,方便自己以后写些小东西时可以直接使用。...代码仓库地址:ingos-admin 预览地址:https://yuiter.com/ingos-admin Step by Step 2.1、手动部署 示例的 Angular 应用,你可以通过 Angular...整个项目中所涉及的 npm 命令,我们可以通过查阅项目的 package.json 文件中的 scripts 节点进行查看 这里通过 Angular CLI 创建的项目可以通过 ng build 命令来完成项目的打包发布...应用来说,我们完全可以使用社区提供的 angular-cli-ghpages 插件来简化这个操作 首先我们需要通过 npm 将插件安装到需要部署的程序中 ng add angular-cli-ghpages...deploy --base-href=/ingos-admin/ 在之前学习 angular 中路由时有提到,在 angular 应用中,框架会将 index.html 文件中的 base 标签的 href

1.4K10

Angular10配置webpack打包 「详细教程」

添加ngx-build-plus: ng add ngx-build-plus npm 包管理器 AngularAngular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能,它们都是...第二步:创建工作区和初始应用 Angular 工作区就是你开发应用的上下文环境。 每个工作区包含一些供一个多个项目使用的文件。 每个项目都是一组由应用、库端到端(e2e)测试构成的文件。...assets/ 包含要在构建应用时应该按原样复制的图像和其它静态资源文件。 environments/ 包含特定目标环境的构建配置选项。...默认情况下,有一个无名的标准开发环境和一个生产(“prod”)环境。你还可以定义其它的目标环境配置。 favicon.ico 用作该应用在标签栏中的图标。...:npm run build --report 正常build 即可启动查看器 开发环境查看:webpack -p --progress 启动正常devServer服务即可启动查看器!

4.8K20

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

首先,它们允许对应用程序的各个部分进行更细化地控制,云中的应用程序可以轻松地进行部署和管理。其次,微服务使应用程序扩展变得更加容易。当一个应用程序需要扩展缩减规模时,只对需要改变的服务进行更新即可。...": "ng", "precommit": "lint-staged", "start": "ng serve", "build": "ng build", "test": "ng...test", "lint": "ng lint", "e2e": "ng e2e", "build-lazy": "ng build lazy", "build-dynamic...", "@angular-devkit/build-ng-packagr": "~0.800.0", "@angular/cli": "~8.0.2", "@angular/compiler-cli...结   语 在云原生世界中,一个典型的环境是由各种各样的依赖关系支持的。全面地测试这些依赖关系对任何云原生应用的成功都至关重要。然而,手动更新所有的依赖关系可能很困难,也很耗时。

1.7K10

Angular 工具篇之npx及angular-cli-ghpages

angular-cli-ghpages 这个工具,是用于帮助 Angular CLI 的用户快速发布 Angular 应用到 Github Page。...你可以通过 Angular CLI 创建新的项目或在想要部署到 Github Pages 上的 Angular 项目中使用 angular-cli-ghpages。...前,你需要进行项目构建,这时你可以执行以下命令: $ ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"...或者使用以下命令: $ ng build --prod --base-href "/REPOSITORY_NAME/" 在项目构建完成后,就可以通过以下的命令自动地把本地项目发布到 Github Pages...上: $ npx ngh [OPTIONS] 需要注意的是对于使用 Angular CLI 6 以上版本的用户来说,在部署时你需要指定部署的目录: $ npx ngh --dir=dist/[PROJECTNAME

1.9K20

如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

在本例中,Node.js 用于构建应用程序的后端部分,并且可以替换为您想要的任何服务器端技术,例如 PHP、Ruby Python。...build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录中。必须从工作空间目录中执行。 config: 检索设置 Angular 配置值。...e2e (e): 构建并提供 Angular 应用程序,然后使用 Protractor 运行端到端测试。 generate (g): 根据原理图生成和/修改文件。...run: 运行项目中定义的自定义目标。 serve (s): 构建并服务您的应用程序,根据文件更改进行重建。 test (t): 在项目中运行单元测试。 update: 更新您的应用程序及其依赖项。...如果您想将组件、指令管道添加到另一个模块 (主应用程序模块 app.module.ts 除外),您只需在组件名称前加上模块名称和斜杠 即可: $ ng g component my-module/my-component

13100

AngularDart4.0 高级-部署

构建应用程序 使用pub build命令来构建应用程序, 将其编译到JavaScript 并且生成部署所需的所有资源....这里有一些资源: Web 基础 (尤其最优化社群效率) 渐进式Web应用程序 灯塔 移除不需要的构建文件 Angular转换器通常会产生许多中间文件(使用后缀像.ng_meta.json和.ng_summary.json...) 当部署应用程序时是不需要的.移除这些文件,可以使用如下的命令: # From your app's top directory: $ find build -name "*.ng_*.json" -...这一部分内容指导Angular应用程序的一些建议, 正如Dart-specific资源帮助你使用 GitHub Pages Firebase 来向应用程序提供服务....Angular-特殊技巧 你可能需要制作服务器变更信息, 查看Angular TypeScript 部署文档的Server configuration部分  GitHub页  如果应用程序没有路由服务端请求支持

4.6K10

玩转 Angular 环境变量

随着前后端分离开发方式的普及,越来越多的公司采用 Angular、React 和 Vue 等前端的 MV* 框架来开发 SPA 应用程序。...CLI 除了自动生成上述两个文件之外,还会自动生成其它的文件,其中就包含 Angular 应用程序的入口文件 —— main.ts: import { enableProdMode } from '@...build --prod 那么有的同学,可能想到对于构建测试环境的包,是不是只要运行: $ ng build --test 想象中很完美,但实际上并不是这样,ng build 命令并不支持 --test...参数,感兴趣的同学可以运行 ng build --help 命令查看 ng build 命令所支持的参数: usage: ng build [options] options:...不过与 ng build 命令一样,我们也需要配置一下 angular.json 文件: "serve": { "builder": "@angular-devkit/build-angular:

3.2K20

Angular实战项目(1)

Angular 打造企业级协作平台 image 环境搭建,Material UI,动画,Angular核心概念,RxJS操作符,Angular中的响应式编程,Redux,自动化测试 实战驱动,主题,设计模式...image.png 环境搭建 安装node node --version node -> npm -> angular CLI 安装node.js的目的是使用npm管理项目依赖的软件包 由于网络环境原因...VSCode的配置 Debug+Angular 2 + Snippets 配置Debuffer for Chrome使VSC可以Debug Angular应用 ?...ng build -prod 生成环境编译 不建议使用ng build ng serve 启动开发服务器 Mock Rest API json-server:用于快速搭建REST API的利器 安装...---- 若本号内容有做得不到位的地方(比如:涉及版权其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

1.8K10

前端开发工程化之angular打造spa应用

然而所谓的spa单页面应用如何工程化开发,他的开放方式如何呢,请继续看下文,使用angular打造spa应用 1.相关的关键字(yeoman,node,npm,bower,grunt,gulp,ruby...生成器(npm install -g generator-jhipster)   ps:如果使用了scss,需要安装ruby环境,以及compass包 (6)安装ruby 下载安装 (7)安装compass...(react-webpack应用), JHipster generator(spring boot+angular微服务应用)当然还有今天要分享的generator-angularangular的spa...grunt-contrib-cssmin等)使用npm install 下载依赖到本地node_modules文件夹下 (4)Gruntfile.js (grunt构建任务描述文件,如,serve,build.../angular.panels 文件上传 ng-file-upload  https://github.com/danialfarid/ng-file-upload angular扩展大全 https

14640

Angular v8 发布!来看看有什么新功能

这并非是他们大发善心,而是因为 Google 有 600 多个以 Angular 为基础的应用程序 —— 尽管是谣传,但实际数字要高得多。 在 Angular 8 中 Ivy 的预览版现在可供测试。...此版本的目标是获得早期反馈。因此,Angular 团队建议不要把 Ivy 用于生产环境,而是继续使用经典视图引擎(图1)。...要在调试模式下运行程序,建议使用 AOT: 1ng serve --aot 此外,值得一提的是通过 ng build 创建的程序的大小。等到 Angular 9 发布时 Ivy 最终应该会默认激活。...如果 CLI 收到构建( ng build)指令,则将对两个版本进行编译和 bundling 过程: 构建差异加载 这个过程的缺点显而易见:构建过程所需的时间加倍。...为实现这一目标Angular 团队扩展了Angular Location 服务的可能性,从而为 AngularJS 中的 $location 提供了替代。

3K30
领券