Angular框架学习踩坑记录

文章目录

  • 1. 项目build后部署到tomcat显示空白页
  • 2. vscode远程连接linux进行angular开发实时调试

1. 项目build后部署到tomcat显示空白页

按照Angular文档完成了入门demo,部署时遇到问题:将build好的dist文件夹放在tomcat的/webapps文件夹下并修改文件夹名为angular-demo1,打开浏览器访问,显示空白页面。
在这里插入图片描述

此时F12打开开发者工具,可以看到HTML代码,也就是说并不是访问失败404,而是html页面外的资源没有加载进来。(而且其实标签页的title显示出来了)
在这里插入图片描述

解决方法:
index.html中的<base href="/">修改为<base href="./">
保存后重新访问:
在这里插入图片描述

2. vscode远程连接linux进行angular开发实时调试

在项目目录下执行ng serve --open命令,每次编辑代码并保存更改后,Angular 应用将自动重新编译并刷新浏览器页面(localhost:4200端口),因为该命令会在启动开发服务器时自动打开浏览器。

但是我的linux服务器上并没有图形化界面和浏览器,所以即使执行该命令也无法实时查看浏览器界面。

chatGPT向我提供了一种解决方法:

要在本地浏览器中显示远程机的 Angular 实时界面,可以使用 ngrok 工具将本地端口映射到远程机器上。具体步骤如下:

  1. 在远程机器上运行 ngrok http <port> 命令,将端口号替换为 Angular 应用运行的端口号,例如 ngrok http 4200

  2. ngrok 会生成一个公共 URL,将该 URL 复制到本地浏览器中访问即可看到远程机器上的 Angular 实时界面。

于是按照 ngrok下载 的方法在linux服务器上安装ngrok,并执行ngrok http 4200命令:
在这里插入图片描述
成功把服务器4200端口映射到本地4040端口。

不过还是有个问题,在linux服务器执行ng serve命令时有很大概率服务器会卡死,ssh连接也会断开,此时只能重启服务器。所以最后还是放弃了通过vscode远程连接在远程服务器上开发的方案,改为在本地开发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/30436.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT开发光纤解调仪软件中各种问题总结

最近因为被派了开发光纤解调仪软件开发的活&#xff0c;花了大概两个月的时间从零开始学QT写软件&#xff0c;总体完成的差不多之后在这里把遇到的困难总结一下。 一、动态链接库的调用 我手上的资料有公司之前很老的用MFC写的软件的源码&#xff0c;根据那个软件的源码来进行…

chatgpt赋能python:Python循环卡住-如何规避这个问题

Python循环卡住- 如何规避这个问题 Python是一种简单&#xff0c;易学且功能强大的编程语言&#xff0c;它被广泛应用于各种应用程序开发领域&#xff0c;从数据科学到Web开发。 然而&#xff0c;在循环中有时会遇到Python卡死的情况。 在这篇文章中&#xff0c;我们将详细介绍…

联网GPT-3.5上线!网友实测给差评

【导读】ChatGPT默默升级了&#xff0c;联网插件Default (GPT-3.5) with browsing上线&#xff0c;网友纷纷上手实测。 OpenAI的ChatGPT在默默进化...... 一觉醒来&#xff0c;网友爆料称ChatGPT里的联网插件变了。 ChatGPT中的Browsing ALPHA模型不再显示。更改为&#xff1…

ChatGPT: 如何利用OpenAI的GPT-3.5构建智能对话助手

ChatGPT: 如何利用OpenAI的GPT-3.5构建智能对话助手 GPT-3.5&#xff1a;OpenAI的语言模型在自然语言处理领域的重要地位和应用潜力 GPT-3.5是OpenAI开发的一种强大的语言模型&#xff0c;具有广泛的应用潜力和在自然语言处理领域的重要地位。作为OpenAI最新一代的语言模型&…

ChatGPT: 从GPT-3.5到GPT-4,探索语言模型的演进之路

ChatGPT: 从GPT-3.5到GPT-4&#xff0c;探索语言模型的演进之路 引言 人工智能语言模型的演进 随着人工智能的快速发展&#xff0c;语言模型作为自然语言处理领域的一项重要技术也在不断演进。从最初的基于规则的系统&#xff0c;到基于统计的模型&#xff0c;再到近年来的深度…

PCM音频文件的制作

一、PCM编码简介 PCM是英文Pulse-code modulation的缩写&#xff0c;中文译名是脉冲编码调制。它是70年代末发展起来的&#xff0c;记录媒体之一的CD&#xff0c;在80年代初由飞利浦和索尼公司共同推出。脉码调制的音频格式也被DVD-A所采用&#xff0c;它支持立体声和5…

案例分享:基于预训练大模型的AI自动标注

从自动化时代到智能化时代&#xff0c;人工智能潜在的价值规模迅速扩张。如何将潜在的应用价值落到现实场景是摆在一众AI企业面前亟待破解的难题。 数据资源场景单一且有限、算力资源存在上限且成本高企、高端人才稀缺等问题无一不在阻碍AI产业的规模化商业落地。 而伴随着以…

AI文本生成软件选哪个?看看这些软件推荐吧

最近几个月的时间内AI智能技术逐渐向大众开放&#xff0c;许多人都在使用AI智能进行一些创作 但是许多小伙伴依然不知道该如何使用AI来智能生成文本。那么大家想知道有哪些AI文本生成软件吗&#xff1f;看看下面几款大家常用的AI文本生成软件的介绍吧。 1.“AI写作宝” 软件介…

LLMs的自动化工具系统(HuggingGPT、AutoGPT、WebGPT、WebCPM)

在前面两篇博文中已经粗略介绍了增强语言模型和Tool Learning&#xff0c;本篇文章看四篇代表性的自动化框架&#xff0c;HuggingGPT、AutoGPT、WebGPT、WebCPM。 Augmented Language Models&#xff08;增强语言模型&#xff09;Toolformer and Tool Learning&#xff08;LLM…

代码恐怖故事:隐藏在复杂代码库中的恐怖秘密

本文讲述了开发者们在复杂代码库中工作的经历和教训&#xff0c;包括代码复杂性带来的问题、架构决策、第三方库引发的意外问题以及令人恐慌的编程错误&#xff0c;以及如何处理这些挑战。 原文链接&#xff1a;https://digma.ai/blog/coding-horrors-tales-of-codebase-comple…

【ChatGPT助我开发】利用ChatGPT编写基于Matlab的SVM的蔬菜分类项目

序言 从去年12月份开始用ChatGPT&#xff0c;一直被惊艳到&#xff0c;然后问一些奇怪的问题&#xff0c;到现在助力开发&#xff0c;我发现合适的提示词&#xff08;Prompt&#xff09;会很大程度影响到生成的质量&#xff0c;我在开发的过程中也会逐渐完善修改&#xff0c;最…

matlab绘图常用函数及代码

1、绘图&#xff1a;plot /semilogy /loglog /scatter figure(1); subplot(1,2,1);%子图 axis([0 10 10^-5 10^-1]);%限制作图范围&#xff0c;x轴0~10&#xff0c;y轴10^-5到10^-1 plot(X,Y,Color,[R G B],LineStyle,-,Marker,o,LineWidth,1); hold on; grid on;%显示网格 &…

HR怀疑程序员简历造假,随后的做法引起网友热议:过分了

简历可以说是求职过程中最重要的一份材料&#xff0c;因此不少人对简历都精心准备&#xff0c;以便全面地展示自己。对企业来说&#xff0c;简历最重要的一点便是真实。可以说所有公司对简历造假都是保持零容忍的态度。最近&#xff0c;一位HR网友在职场社区分享了他怀疑程序员…

程序员简历优化之道

作者&#xff1a;安晓辉 声明&#xff1a;原创文章&#xff0c;禁止各种形式的转载。 为什么你投十份简历&#xff0c;只有一两家公司约你&#xff1f;又或者为什么你每投一份简历都能获得面试机会&#xff1f; 最根本的原因&#xff0c;就是一方在汲汲渴求&#xff0c;而恰恰…

别再胡乱写简历了,一份适合普通大众的简历模版,送给大家

今天我们就来聊一聊在校招时&#xff0c;简历该如何写的问题。说实话&#xff0c;对于简历的书写方式&#xff0c;可能不同的人会有不同的见解&#xff0c;并且不同的面试官/HR在筛选的时候也会有所差异&#xff0c;所以在我看来&#xff0c;不存在一种绝对稳的简历模版。 我在…

聊求职:写简历的大原则与小技巧

简历&#xff0c;是求职者向未来雇主展示专业技能和职业素养的自我推销工具&#xff0c;是赢得面试机会的敲门砖。如果没有面试邀约&#xff0c;大多只有两种可能&#xff1a;要么是简历写的太屎了&#xff0c;要么是简历投的太屎了。所以&#xff0c;当没有面试机会的时候&…

用 Markdown 写炫酷简历,助力跳槽换工作

大家好我是徐小夕。 今天给大家来介绍一个简历制作神器&#xff0c;是我的朋友秋风开发的。这个项目是一款免费在线简历制作工具&#xff0c;通过将书写的Markdown 和选择的主题快速转化不同风格的简历, 同时还可以一键复用其他人做的优秀的简历, 助力求职者快速制作精美的简历…

分享162个助理类简历模板,总有一款适合您

分享1626个助理类简历模板&#xff0c;总有一款适合您 162个助理类简历模板下载链接&#xff1a;https://pan.baidu.com/s/1Uy3eXPz9D-wK-l7z3KDIWQ?pwdl139 提取码&#xff1a;l139 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 class ChinaZJsSelenium:ba…

掌握这些写简历投简历的“黑魔法”,告别简历已读不回!

“哎&#xff0c;我还能找到工作吗&#xff1f;” 这是最近加我微信的好友&#xff0c;问的最多的一句话。 太卷了 最近加我微信的朋友很多&#xff0c;我都很奇怪&#xff0c;最近也没怎么发文章&#xff0c;怎么会有这么多人加我。 大概就是因为太卷了&#xff0c;之前写的…

简历优化实战案例01:工作经历篇

大家好&#xff0c;我是小谭。 最近&#xff0c;我在帮一位求职者修改简历时&#xff0c;发现一些求职者常犯的简历错误。在征得求职者同意后&#xff0c;我粘出来&#xff0c;同大家分享和交流&#xff0c;期望通过此分享&#xff0c;让大家了解写简历的常见坑和注意点。 本…