素材巴巴 > 程序开发 >

Angular6学习笔记2: 启动应用

程序开发 2023-09-05 22:25:15

在Angular4学习笔记1中,创建了一个Demo的Project,现在要启动它

一.在命令行中启动

1.切换到项目目录下:

cd demo

2.启动这个应用:

ng serve --open

--open : 在启动后自动打开浏览器,当然也可以不加,不过在启动完成后要手动的在浏览器中输入:http://localhost:4200/

启动完成后,会出现如下内容

 此时说明应用已经成功启动。

二.使用IDE启动(推荐使用Webstorm)

在Webstorm中:

1.file--> open 在弹出的对话框中找到项目的路径,点击Open

2.在左侧的文件列表中找到: package.json 这个文件,

3.右键点击: Show npm Scripts 会出现如下

4.点击start就启动应用

在Webstorm中默认是不会打开浏览器的,需要在浏览器中手动输入,http://localhost:4200.

也可以在Webstorm启动的过程中点击

如果觉得每次点击太麻烦,修改 package.json 中scripts.start 字段的   ng serve 修改为 ng serve --open 即可。

三.同时启动两个甚至更多的应用

有时会遇到需要同时启动两个应用的时候,当启动第二个应用的时候会出现如下的错误:

这是因为: 在启动第一个应用的时候,已经占用并监听端口号:4200,当启动第二个时候,默认会继续使用4200,此时就会报错。

解决方案:在package.json 文件中 scripts.start 字段的   ng serve 后增加 --port 8000(可以改变) 即可。如下图所示:

 然后在启动应用就不会出现错误的情况。


标签:

上一篇: VSCode中开发Vue语法格式报错 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。