Angular2打包部署

最新推荐文章于 2022-08-08 01:53:44 发布
最新推荐文章于 2022-08-08 01:53:44 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjh213/article/details/79871763

environment.ts文件

ENV_ImgPrefix: ""

environment.prod.ts文件

ENV_ImgPrefix: "/dist/"

在组件component.ts文件引入变量

import environment from "../../environments.environment.ts"

this.imgPrefix = environment.ENV_ImgPrefix

在组件component.html文件引入变量

<img src="{{imgPrefix}}/assets/xxx.png" alt="demo">
Angular2编译
ng build --prod -aot 
# 带源码映射
ng build --prod -aot --sourcemaps
修改编译后的index.html文件

引入的js和css都加上/dist/前缀

将打包的dist文件夹放到tomcat的webapp目录下
修改tomcat的server.xml配置
<Host name="localhost" appBase="webaps">
<Context docBase="dist" path="/home" />
<Context docBase="javaAppApi" path="/api" />
<Context docBase="javaApp" path="/" />
</Host>
angular2部署到tomcat中，让他跑起来
rotating_windmill
08-06 1万+
首先使用构建命令(npm run build或ng build)打包，打包完成后项目中会出现一个dist的目录，这个目录就是我们最终要部署的包了，把它命名为cc-client(关于打包后的base路径修改，参考后面的备 注)就可以了。 将命名好的cc-client整个目录复制到tomcat的webapps目录下。 运行tomcat，在浏览器中输入http://localhost:8080/cc-c
Windows下git拉取/推送，SVN更新/提交，maven自动编译打包，angular打包的bat脚本
07-28
Windows下实现的，git的自动拉取推送,svn的自动拉取和推送,maven自动编译,angular的自动打包发布，bat脚本
Dos命令Maven打包， Angular打包
不想成为架构师的程序员不是一个好研发!
11-06 431
Dos命令Maven打包， Angular打包 Maven打jar包 mvn clean install -Dmaven.test.skip=true -Dmaven.javadoc.skip=true -Dfile.encoding=UTF-8 Angular打包 npm run build Angular拉包 npm i --registry http://nexus.upower.co...
Maven And Angular Dos命令打包
不想成为架构师的程序员不是一个好研发!
09-04 360
Maven打jar包 mvn clean install -Dmaven.test.skip=true -Dmaven.javadoc.skip=true Angular打包 npm run build PS：Angular下载依赖 npm i --registry ry http://nexus.upower.com/repository/aecnpm/...
Angular安装以及项目客户端搭建
Crazy_T_B的博客
12-14 839
Angular安装以及项目客户端搭建 先说说前提，然后在讲具体的。最近有个项目前段用到了AngularJs、less、typescript、ng-zorro，所以要搭建一个客户端启动环境，这里选择nodeJs然后在配上visual studio code。安装教程如下： 一：先安装NodeJs ps：下载链接：http://nodejs.cn/download/ 安装步骤就是一直nex...
angular引入包、路由权限配置、打包问题与nginx配置问题（简单部署）
热门推荐
编程知识分享，主打前端
08-08 3万+
浅使用angluar
SpringBoot集成Angular应用打包部署
记录工作开发中遇到的技术难点，方便自己查看，也希望可以帮助到他人...
04-22 2050
1 Angular项目打包步骤 1.1 修改路由策略，改为Hash路由 1.2 修改httpService类中的url根路径为.或./ 1.3 打包 指令1：ng build --prod 使用指令1进行打包，需要将index.html里面 <base href="/"> 改为 <base href="./">。 指令2：ng build --prod --base-href ./ 使用指令2进行打包，会在打包完成之后自动将index.html里面 <base href="
angular2+node.js express打包部署的实战
10-19
文章主要介绍了一个结合前端Angular2和后端Node.js Express框架的单页面应用(SPA)的打包部署流程。这个过程包括创建项目、配置项目、引入第三方库、打包以及最终部署上线等步骤。下面详细解释涉及的知识点。 ...
Angular项目从新建、打包到nginx部署全过程记录
08-28
在本文中，我们将深入探讨如何使用Angular框架创建一个新的项目，并将其打包部署到Nginx服务器。Angular是一个流行的前端JavaScript框架，它提供了强大的功能来构建现代Web应用程序。在讲解过程中，我们将按照新建...
angular2 ng build部署后base文件路径问题详细解答
12-09
最近在学习angular2中遇到了一些问题，问题如下： 问题：使用angular-cli搭建的项目，执行ng build后，浏览器打开空白，发现文件的路径不对 解决方案： 在package.json文件的scripts中添加命令： "build":"ng ...
angular2之打包
02-17 1万+
最近总有人问关于打包的= =有的越打越大= =……然后我只好重新测试打包截图了= =，发给大家，方便帮助需要打包的。 项目都完整之后，接下来就是令人头疼的打包问题。第一步在项目根目录下运行ng build（为了方便大家对比，所以先运行此命令），如下： 其次在运行ng build --prod --aot，截图如下： 这里--prod参数后，angular-cli会把用不到的包都删掉，
angular2 项目写好了怎么发布出去？
cvper's world !
03-11 4888
假设我们通过angular cli 创建了一个angular2-demo1的项目，创建完成之后就是一个简单的项目了，我们不去改动任何东西，看看如何发布这个项目；发布之前需要进行打包，也就是进行压缩整合成我们需要的最终的项目源码，先看看项目目录：好了，现在开始对上面的代码进行打包处理（命令 ng build --prod --aot  或者 ng build --prod）：然后再看看我们的项目目录...
angular2项目本地部署
橘子的博客
01-11 4037
ng2项目部署 1、ng build； 2、打包完成后项目根目录下出现dist文件夹； 复制dist到tomcat文件夹下； 修改配置文件； 文件里面默认有一个 标签； 这里是两个，可以把 前后台部署到同一个tomcat； （1）将后台项目端口修改为8077。 *这里修改端口与打包前没有关系，不用重新打包。 指定后台项目的war包地址，tomcat启动
angular2或4部署到tomcat中，让他跑起来
松门一枝花
08-09 8910
原文地址：http://blog.csdn.net/rotating_windmill/article/details/76768793 ------------------------------------------------------------------------- 首先使用构建命令(npm run build或ng build)打包，打包完成后项目中会出现一个dis
Angular2部署在Tomcat总结
u013034520的专栏
08-19 5075
Angular2需要在package.json加入一个script实现build process，其中/web/是最终Tomcat映射的访问路径 { ... "scripts": { "build": "ng build --prod --base-href /web/" } ... } 由于Angular的路由机制和Tomcat不太一致，在生成路由的时候使用RouterMo
angular2 安装 打包成发布项目过程
博客园搬家测试账号
03-31 1338
安装之前要有typings和typescript全局已经安装好 安装命令新版为npm install -g @angular/cli 原来的angular-cli为老版的，我安装失败了 安装之后新建一个文件夹，在文件夹 里面运行初始化一个angular2项目 mkdir ng2-test cd ng2-test ng init   然后在src目录下的app编写代码，完成后运行npm serve进...
angular打包发布命令
低调的奔跑
09-28 4879
ng build --prod --aot --base-href ./
《Angular2 从开发到部署系列》之「环境搭建」
weixin_34132768的博客
10-20 156
环境搭建 如果你已经迫不及待想要跳过教程直接开始自己折腾了，这里已经有一份现成的项目备份了。你可以运行下列命令立刻开始自己第一个 Angular2之旅。 # 下载项目 git clone https://github.com/musicq/angular2-webpack-express-starter.git # 安装依赖 npm ...
这样部署angular怎么打包
最新发布
11-22
在Angular项目中，打包通常是通过Angular CLI（Command Line Interface）工具来完成的，其命令行工具名为ng。以下是基本的步骤： 1. **确保已安装Angular CLI**: 首先检查是否已经全局安装了Angular CLI，如果没有，可以通过npm或yarn来安装： ``` npm install -g @angular/cli ``` 2. **进入项目目录**: 使用终端或命令提示符导航至你的Angular项目目录。 3. **执行打包命令**: 使用`ng build`命令进行生产环境打包，它会创建一个包含所有静态资源的dist文件夹。你可以选择不同的输出模式，比如--prod标志来开启生产模式并压缩代码： ``` ng build --prod ``` 或者如果你想要更详细的开发模式打包： ``` ng build --aot=false --optimization=none ``` `--aot`表示AOT（ Ahead-of-Time Compile，预编译），关闭它适合开发过程；`--optimization`控制优化级别，`none`表示最低级。 4. **查看输出文件**: 打包完成后，会在`dist`文件夹中找到生成的`index.html`、CSS、JS等文件，这些是可以在Web服务器上直接部署的。 5. **定制打包选项**: 对于特定的需求，如更改输出路径、添加自定义配置等，可以在`angular.json`配置文件中进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值