将使用Angular4框架编写的网页部署到服务器环境

最新推荐文章于 2024-02-07 00:38:51 发布
原创 最新推荐文章于 2024-02-07 00:38:51 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Auction #部署

本文介绍如何使用宝塔Linux面板管理Angular项目，包括安装PM2管理器，使用ng build命令编译Angular工程，并解决部署过程中遇到的绝对路径问题。

首先我的服务器使用了宝塔Linux进行管理，所以我们进入自己的宝塔控制台页面
点击软件管理->运行环境->PM2管理器，进行安装
宝塔软件管理
然后在你的Angular工程文件夹中打开命令行，输入ng build命令
稍等片刻，你的工程文件中会多一个“dist”文件夹，这就是编译好的可以直接部署的web文档啦~
在这里插入图片描述
不过你可能会遇到这种问题
在这里插入图片描述
其根源就在于这个标签，去掉其中的/就好了，Angular的构建可能默认你的网站是直接放置在根目录的，所以使用了绝对路径
在这里插入图片描述

暮霖
关注
angular应用部署_部署Angular应用程序以进行Netlify
culiu9261的博客
07-21 328
angular应用部署Netlify is one of the best places to deploy an application or a website today. There is no need to manage a server, NGINX, certificates, or scaling due to high traffic. While it is first th...
用 github 搭建自己的 angular 小网站
小妖666个人笔记
08-29 610
我使用的是基于 angular 的 ionic 框架，因为组件很丰富，并不需要自己去优化页面。 gitHub 下新建reallyEasy 项目 点击 settings 第一选项 Options 拉到最后 GitHub Pages 配置好点 Save 最上面是你的网站网址 新建 ionic 项目 更改 index.html 文件 <base href="/" /> 改为 <basehref="./"/> 不然发布到 github 后会导致加载资源失败...
angular网页制作及安装配置
llxx1234的博客
02-27 511
http://www.runoob.com/angularjs2/angularjs2-tutorial.html   https://www.cnblogs.com/goldlong/p/8027997.html //配置npm   https://blog.youkuaiyun.com/p358278505/article/details/78094542 npm源及配置   https://...
第一个 Angular 项目 - 静态页面
最新发布
GoldenaArcher的博客
02-07 1765
这是在学完了上面这三个内容后能够完成的项目，目前因为还没有学到数据在不同组件之前的传输，因此只会有一个 UI 的渲染，而不会涉及到事件的实现。
使用宝塔面板部署前端项目到服务器
m0_62476845的博客
12-22 5051
在此之前，我们已经创建了宝塔面板账号、拥有了一台服务器。现在，我们想让我们的前端能够像阿里巴巴、淘宝等网站那样被别人访问，那么我们应该在宝塔面板上面怎样做呢？一、第一步：创建文件夹1、打开我们的宝塔面板后，我们会看到左侧有一列目录，点击里面的文件。2、点击在根目录下名叫www的文件夹3、点击里面叫wwwroot的文件夹4、在里面随便创建一个文件夹准备放入我们的前端代码5、放入我们的前端代码二、第二步：部署前端项目1、在宝塔面板的左侧有个叫网站的名字，点进去并选择node项目。
ngx-deploy-ftp:使用Angular CLI将Angular应用程序部署到FTP远程
03-28
ngx-deploy-ftp 是一个Angular CLI插件，它允许开发者便捷地将构建后的Angular应用程序部署到FTP（File Transfer Protocol）服务器。这个工具极大地简化了发布流程，使得开发人员可以快速地将更新推送到远程服务器，...
recipe-smart:使用TypeScript和Angular和Express框架编写的Web应用程序
03-11
7. **测试和部署**: 开发过程中，可能会使用Jasmine和Karma进行单元测试，使用Angular CLI进行构建和打包，然后将应用部署到服务器如Heroku或AWS上。 总的来说，"recipe-smart"项目是一个全面展示TypeScript、...
bridgepay-frontend：使用AngularIonic框架的托管付款交易平台的前端
02-19
6. **前端部署**：学习如何将Angular应用部署到服务器或CDN。 7. **版本控制**：理解Git工作流，如分支管理和合并策略。 8. **测试**：编写单元测试和端到端测试，确保代码质量。 以上就是基于给定信息的详细解析和...
Portfolio:我的个人网站是使用Angular框架构建的
05-11
在完成开发后，可以使用Angular的`ng build`命令生成一个生产环境的构建，该构建优化了代码并准备部署到Web服务器。 此外，一个Angular应用通常会利用路由来管理不同页面间的导航，使用组件化来组织代码，以及使用...
samueldebartolo.com:samueldebartolo.com的存储库-使用Angular构建，使用GitHub Actions部署，并使用Gi​​tHub Pages托管
03-31
标题中的“samueldebartolo.com:samueldebartolo.com的存储库”表明这是一个公开的个人项目，基于Angular框架构建，旨在展示Samuel Debartolo的技能和作品集。这个存储库是开发者用来管理、协作和分享其网站源代码的...
Nginx中部署Angular项目遇到的坑巨坑
09-29
主要介绍了Nginx中部署Angular项目遇到的坑巨坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Angular前段框架模板
05-22
Angular前段框架模板，适用前段开发人员。
Angular项目部署
大强博客
08-21 5941
1、最简化的部署方式 最简化的部署方式就是为开发环境构建，并把其输出复制到 Web 服务器上。 使用开发环境进行构建 content_copyng build 把输出目录（默认为 dist/）下的每个文件都复制到到服务器上的某个目录下。 如果要把文件部署到服务器上的某个子路径下，构建时还要添加 --base-href（基地址）标识，并设置合适的 &lt;base ...
使用宝塔面板在centos7服务器上一键部署运行环境并实现代码自动化配置
木豪末的博客
12-05 1万+
宝塔真是一个好工具，它帮助我们快捷的搭配服务器运行所需要的环境，省去手动编译安装各种繁琐又容易出错的环节，最关键的是它还是免费的，自从有了宝塔面板，搭建环境再也不是一件辛苦的事了。好了，闲话少说，下面我来介绍一下在自己的腾讯云主机(操作系统是centos7)上安装宝塔面板并实现代码自动化部署的全流程，并做一下记录。 一、安装宝塔并配置gitlab代码仓库 1.安装宝塔 这里不再赘述，详见...
Angular构建和部署
Jack汪喆的技术分享栏
10-20 2711
一.构建：编译和合并 1.什么是构建 将编写的typescript源码变成可以直接放到web服务器上的静态资源 构建包括：编译（将typescript编译成JavaScript）和合并（将所有资源整合到一起，减少应用启动时发送http请求的数量，加快启动速度） 虽然typescript提供了编译器可以在运行时实时在浏览器中编译，但是如果在生产环境中这样做的话，生产环境需要额外加载一个typesc...
宝塔部署java web项目
热门推荐
m0_37654893的博客
01-29 8万+
宝塔部署javaweb项目完整篇，给想要使用宝塔部署java web项目的人一些参考，觉得不错的可以在下方留言点赞哦，有错误的地方也请大家帮忙指出，发消息给我吧，我好修改。 1.首先，登录宝塔面板（安装就不说了，官网都有，安装时只需要注意你的服务器的端口有么有打开，比如腾讯云的服务器需要在控制台 安全组里面设置端口放行，在宝塔里放行端口后，也必须在腾讯云的控制台上放行端口，还有就是宝塔安装前...
Angular前端项目部署教程---1
sandy
10-12 1316
1.将项目通过IDE打开，然后， 进入到项目根路径然后进行执行 cnpm install 此命令的意义是安装angular.JS的相关依赖。过程如下： 之后出现 点击http://localhost:4200/项目即可被启动。  ...
Angular项目linux服务器部署
qq_41248529的博客
08-08 1510
首先将angular项目运行环境配置好，和本地基本类似：如node.js，npm，angular/cli等环境。配置好之后直接将本地的angular项目copy到服务器上来，然后 ng serve 如果出现报错： Error: Missing binding /opt/project/web/roctec-console/node_modules/node-sass/vendor/linux-x...
Angular项目部署到阿里云服务器
weixin_45044818的博客
11-22 2036
1.前提 服务器上已经安装了web环境 可以参考文章：阿里云安装web环境 一个可以正常运行的angular项目 本文使用的是apache服务器做参考 2.打包编译Angular项目 cd Angular项目路径 ng build 打包完成后，可以在Angular项目的根目录下发现一个dist文件夹 3.解决打包后，页面显示空白 打开dist文件夹下的index.html...
Angular UI框架模板Lokra的使用指南
- **angular4**: 表明这个模板兼容Angular版本4，虽然Angular已经迭代更新到更高版本，但可能仍有用户需要与旧版本的Angular框架兼容。 - **themeforest**: 是Envato市场的一部分，提供高品质的网站模板和主题设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值