Angular6学习笔记2: 启动应用

水深无声 2022-05-09 01:52 277阅读 0赞

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

## 一.在命令行中启动 ##

### 1.切换到项目目录下： ###

cd demo

### 2.启动这个应用： ###

ng server --open

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

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

![70][]

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

## 二.使用IDE启动（推荐使用Webstorm） ##

在Webstorm中：

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

### 2.在左侧的文件列表中找到： package.json 这个文件， ###

![70 1][]

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

![70 2][]

### 4.点击start就启动应用 ###

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

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

![70 3][]

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

![70 4][]

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

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

![70 5][]

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

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

![70 6][]

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

[70]: /images/20220509/c04a271c35f7487e89dce64b07651a1b.png
[70 1]: /images/20220509/fec0e93ea82948e498aac358196bb0ba.png
[70 2]: /images/20220509/9ffe69f1778b4f6b81cb5897df2419ca.png
[70 3]: /images/20220509/ea1834155d17419491a353cfe12eb1f5.png
[70 4]: /images/20220509/69f61bdf67f94596b26e6ef04c93271b.png
[70 5]: /images/20220509/abcc9803013c433686e53ee5368f43d5.png
[70 6]: /images/20220509/bfe4856f1e214ec8afa123905f0d8dce.png

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular6 学习笔记——路由详解

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: [https://www.angular.cn/guide/template-syntax][htt

刺骨的言语ヽ痛彻心扉/ 2023年05月30日 15:58/ 0 赞/ 116 阅读

相关 Angular6 学习笔记——指令

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: [https://www.angular.cn/guide/template-syntax][htt

偏执的太偏执、/ 2023年05月30日 15:58/ 0 赞/ 92 阅读

相关 Angular6学习笔记（八）Angular中异步处理总结---RXJS

在Angular中对异步数据的处理有以下几种: 回调函数 Promise RXJS 这里我们直接贴代码，前提是有可用的Angular开发环境，然后我们自己

ゝ一世哀愁。/ 2023年02月22日 13:31/ 0 赞/ 106 阅读

相关 Angular学习笔记

控制器 <table> <thead> <tr> <th>Controller</th> <th></th> </tr> </thea

素颜马尾好姑娘i/ 2022年07月24日 10:26/ 0 赞/ 283 阅读

相关 Angular6学习笔记3：修改Angular组件:app.component

Angular组件继学习笔记2后，启动应用。浏览器出现如下界面： ![70][] 这个是由一个名称是 “`AppComponent”` 的 Angular 组件控制

小灰灰/ 2022年05月09日 01:52/ 0 赞/ 352 阅读

相关 Angular6学习笔记2: 启动应用

在Angular4学习笔记1中，创建了一个Demo的Project，现在要启动它一.在命令行中启动 1.切换到项目目录下： cd demo 2.

水深无声/ 2022年05月09日 01:52/ 0 赞/ 278 阅读

相关 Angular6学习笔记13：HTTP（3

HTTP 继学习笔记12以后，可以模拟向后端发送get/post/put/delete请求了。在项目中，有一个table，这个table的数据非常多，就好比现在的hero

深碍√TFBOYSˉ_/ 2022年05月08日 07:42/ 0 赞/ 287 阅读

相关 Angular6学习笔记12：HTTP(2)

HTTP 继学习笔记11以后，可以模拟的调用get方法，并且可以利用某一个ID去查询某一个Hero的详细信息。 1.修改Hero的信息当需要修改某一个hero的

雨点打透心脏的1/2处/ 2022年05月08日 07:42/ 0 赞/ 311 阅读

相关 Angular6学习笔记7: 主从组件

主从组件继学习笔记6，现在可以在页面上显示一个数组，但是原则上不能将所有特性放在同一个组件中，因为如果将所有特性放在同一个组件中，当特性特别多时，组件就变得不好维护了。

迷南。/ 2022年05月08日 07:34/ 0 赞/ 343 阅读

相关 Angular学习笔记－

１．　angular添加input ，做双向绑定时遇到： ![70][] 解决措施: 在　app.module.ts　里面添加： import { F

亦凉/ 2021年10月09日 04:22/ 0 赞/ 428 阅读