blocks|key|4385024|text|对我有效的解决方案是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4385025|ng+serve+--port+4401++++|code-block|syntax|javascript|4385026|(您可以将4401更改为您想要的任何数字)|4385027|然后启动browser+->+http://localhost:4401/|offset|length|4385028|基本上，我有两个应用程序，在上述方法的帮助下，我现在能够在我的开发环境中同时运行这两个应用程序。|4385029|entityMap|0|LINK|mutability|MUTABLE|url|http://localhost:4401/^0|0|0|0|F|M|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

The solution worked for me was 

<pre><code>ng serve --port 4401 
</code></pre>

(You can change 4401 to whatever number you want)

Then launch browser -> <a href="http://localhost:4401/" rel="noreferrer">http://localhost:4401/</a>

Basically, I was having two Applications and with the help of the above approach now I am able to run both of them simultaneously in my development environment.

blocks|key|4384574|text|在最近的CLI版本中，情况似乎发生了变化(我使用的是6.0.1)。通过将port选项添加到项目的angular.json中，我可以更改ng+serve使用的默认端口|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4384575|{
++++"$schema":+"./node_modules/@angular/cli/lib/config/schema.json",
++++"projects":+{
++++++++"my-project":+{
++++++++++++"architect":+{
++++++++++++++++"serve":+{
++++++++++++++++++++"options":+{
++++++++++++++++++++++++"port":+4201
++++++++++++++++++++}
++++++++++++++++}
++++++++++++}
++++++++}
++++}
}|code-block|syntax|javascript|4384576|(本例中仅显示相关属性。)|4384577|entityMap^0|Q|5|10|4|1C|C|1V|8|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

It seems things have changed in recent versions of the CLI (I'm using <code>6.0.1</code>). I was able to change the default port used by <code>ng serve</code> by adding a <code>port</code> option to my project's <code>angular.json</code>:

<pre><code>{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "projects": {
 "my-project": {
 "architect": {
 "serve": {
 "options": {
 "port": 4201
 }
 }
 }
 }
 }
}
</code></pre>

(Only relevant properties are shown in this example.)

blocks|key|4384617|text|端口设置的位置已经更改了几次。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4384618|如果使用Angular+CLI+1|4384619|更改angular-cli.json|offset|length|style|CODE|4384620|{
++"defaults":+{
++++"serve":+{
++++++"host":+"0.0.0.0",
++++++"port":+5000+
++++}
++}
}|code-block|syntax|javascript|4384621|如果使用最新的Angular+CLI|4384622|更改angular.json|4384623|"projects":+{
++++"project-name":+{
++++++++...
++++++++"architect":+{
++++++++++++"serve":+{
++++++++++++++++"options":+{
++++++++++++++++++"host":+"0.0.0.0",
++++++++++++++++++"port":+5000
++++++++++++++++}
++++++++++++}
++++++++}
++++++++...
++++}
}|4384624|无需更改任何文件|4384625|运行命令|4384626|ng+serve+--host+0.0.0.0+--port+5000|4384627|entityMap^0|0|0|2|G|0|0|0|2|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@$F|15|G|16|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@$F|1A|G|1B|H|I]]|9|@]|A|$]]|$1|S|3|T|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1F|8|@]|9|@]|A|$M|N]]|$1|10|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|11|$]]

The location for port settings has changed a couple of times.

<h2>If using Angular CLI 1</h2>

Change <code>angular-cli.json</code>

<pre><code>{
 "defaults": {
 "serve": {
 "host": "0.0.0.0",
 "port": 5000 
 }
 }
}
</code></pre>

<h2>If using the latest Angular CLI</h2>

Change <code>angular.json</code>

<pre><code>"projects": {
 "project-name": {
 ...
 "architect": {
 "serve": {
 "options": {
 "host": "0.0.0.0",
 "port": 5000
 }
 }
 }
 ...
 }
}
</code></pre>

<h2>Without changing any file</h2>

Run the command

<pre><code>ng serve --host 0.0.0.0 --port 5000
</code></pre>

blocks|key|4384531|text|我通常使用ng+set命令来更改项目级别的Angular+CLI设置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4384532|ng+set+defaults.serve.port=4201|code-block|syntax|javascript|4384533|它会更改您的.angular.cli.json，并将端口设置添加为it+mentioned+earlier。|4384534|在此更改之后，您可以简单地使用ng+serve，它将使用首选端口，而不需要每次都指定它。|4384535|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/44941501/497057^0|5|6|0|0|6|H|X|K|0|0|F|8|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|N|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

I usually use the <code>ng set</code> command to change the Angular CLI settings for project level.

<pre><code>ng set defaults.serve.port=4201
</code></pre>

It changes change your <code>.angular.cli.json</code> and adds the port settings as <a href="https://stackoverflow.com/a/44941501/497057">it mentioned earlier</a>.

After this change you can use simply <code>ng serve</code> and it going to use the prefered port without the need of specifying it every time.

blocks|key|4384813|text|不建议在节点模块中进行更改，因为更新或重新安装可能会删除这些更改。所以最好在angular+cli中进行更改|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4384814|angular.json中的Angular+9|4384815|{
++++"projects":+{
++++++++++++"targets":+{
++++++++++++++++"serve":+{
++++++++++++++++++++"options":+{
+++++++++++++++++++++++++"port":+5000
+++++++++++++++++++++}
++++++++++++++++}+++++
++++++++++++}+++++
++++}
}++|code-block|syntax|javascript|4384816|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

It is not recommended to change in node modules as updates or re-installation may remove those changes. So better to change in angular cli

Angular 9 in angular.json

<pre><code>{
 "projects": {
 "targets": {
 "serve": {
 "options": {
 "port": 5000
 }
 } 
 } 
 }
} 
</code></pre>

blocks|key|4385063|text|您还可以编写以下命令：ng+serve+-p+5000|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4385064|entityMap^0|B|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

you can also write this command: <code>ng serve -p 5000</code>

blocks|key|4385289|text|在angular.json中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4385290|"serve":+{
++++++++++"builder":+"@angular-devkit/build-angular:dev-server",
++++++++++"options":+{
++++++++++"browserTarget":+"projectname:build",
++++++++++"port":+5000
+++++++++}|code-block|syntax|javascript|4385291|我使用的是angular-cli。这对我很有效。|4385292|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In angular.json: 

<pre><code>"serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
 "browserTarget": "projectname:build",
 "port": 5000
 }
</code></pre>

I am using angular-cli. This worked for me.

blocks|key|4384777|text|转到angular.json文件，|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4384778|搜索关键字"serve"：|4384779|添加port关键字，如下所示：|4384780|+"serve":+{
+++++"builder":+"@angular-devkit/build-angular:dev-server",
+++++"options":+{
+++++++++"browserTarget":+"my-new-angular-app:build",
+++++++++"port":+3001
+++++},
+++++...|code-block|syntax|javascript|4384781|entityMap^0|2|C|0|0|2|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

Go to <code>angular.json</code> file,

Search for keyword "serve":

Add <code>port</code> keyword as shown below: 

<pre><code> "serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
 "browserTarget": "my-new-angular-app:build",
 "port": 3001
 },
 ...
</code></pre>

blocks|key|4385444|text|只需在package.json文件中设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4385445|"scripts":+{
++++"ng":+"ng",
++++"start":+"ng+serve+--port+3000",
++++"build":+"ng+build",
++++"test":+"ng+test",
++++"lint":+"ng+lint",
++++"e2e":+"ng+e2e"
++},|code-block|syntax|javascript|4385446|然后运行该命令|4385447|npm+start|4385448|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Simply set in package.json file
<pre><code>&quot;scripts&quot;: {
 &quot;ng&quot;: &quot;ng&quot;,
 &quot;start&quot;: &quot;ng serve --port 3000&quot;,
 &quot;build&quot;: &quot;ng build&quot;,
 &quot;test&quot;: &quot;ng test&quot;,
 &quot;lint&quot;: &quot;ng lint&quot;,
 &quot;e2e&quot;: &quot;ng e2e&quot;
 },
</code></pre>
then run the command
<pre><code>npm start
</code></pre>

blocks|key|4385326|text|我们有两种方法可以更改Angular中的默认端口号。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4385327|使用cli命令的第一种方法：|4385328|ng+serve+--port+2400+--open|code-block|syntax|javascript|4385329|第二种方法是在ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json位置进行配置。|offset|length|style|CODE|4385330|在schema.json文件中进行更改。|4385331|{
+"title":+"Dev+Server+Target",
++"description":+"Dev+Server+target+options+for+Build+Facade.",
++"type":+"object",
++"properties":+{
++++"browserTarget":+{
++++++"type":+"string",
++++++"description":+"Target+to+serve."
++++},
++++"port":+{
++++++"type":+"number",
++++++"description":+"Port+to+listen+on.",
++++++"default":+2400
++++},|4385332|entityMap^0|0|0|0|7|29|0|1|B|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@$K|11|L|12|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

We have two ways to change default port number in Angular.

First way to cli command:

<pre><code>ng serve --port 2400 --open
</code></pre>

Second way is by configuration at the location: <code>ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json</code>.

Make changes in <code>schema.json</code> file.

<pre><code>{
 "title": "Dev Server Target",
 "description": "Dev Server target options for Build Facade.",
 "type": "object",
 "properties": {
 "browserTarget": {
 "type": "string",
 "description": "Target to serve."
 },
 "port": {
 "type": "number",
 "description": "Port to listen on.",
 "default": 2400
 },
</code></pre>

blocks|key|4384851|text|如果您有多个环境，可以在angular.json中添加以下方式|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4384852|+"serve":+{
++++++"builder":+"@angular-devkit/build-angular:dev-server",
++++++"options":+{
++++++++"browserTarget":+"your_project:build"
++++++},
++++++"configurations":+{
++++++++"production":+{
++++++++++"browserTarget":+"your_project:build:production"
++++++++},
++++++++"es5":+{
++++++++++"browserTarget":+"your_project:build:es5"
++++++++},
++++++++"local":+{
++++++++++"browserTarget":+"your_project:build:local",
++++++++++"port":+4201
++++++++},
++++++++"uat":+{
++++++++++"browserTarget":+"your_project:build:uat"
++++++++}
++++++}
++++},|code-block|syntax|javascript|4384853|这样，只有本地端口指向另一个端口。|4384854|entityMap^0|C|C|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

If you have more than one enviroment, you may add the following way in the <code>angular.json</code>:
<pre><code> &quot;serve&quot;: {
 &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
 &quot;options&quot;: {
 &quot;browserTarget&quot;: &quot;your_project:build&quot;
 },
 &quot;configurations&quot;: {
 &quot;production&quot;: {
 &quot;browserTarget&quot;: &quot;your_project:build:production&quot;
 },
 &quot;es5&quot;: {
 &quot;browserTarget&quot;: &quot;your_project:build:es5&quot;
 },
 &quot;local&quot;: {
 &quot;browserTarget&quot;: &quot;your_project:build:local&quot;,
 &quot;port&quot;: 4201
 },
 &quot;uat&quot;: {
 &quot;browserTarget&quot;: &quot;your_project:build:uat&quot;
 }
 }
 },
</code></pre>
This way only the local points to another port.

I want to use 5000 instead of 4200.
I have tried to create a file on root name <code>ember-cli</code> and put JSON according to the code below:
<pre><code>{
 &quot;port&quot;: 5000
}
</code></pre>
But my app still runs on 4200 instead of 5000

How to change angular port from 4200 to any other

JSON

我想用5000代替4200。我已经尝试在根目录ember-cli上创建一个文件，并根据以下代码放入JSON：{   "port": 5000}但我的应用程序仍然在4200而不是5000上运行

问如何将angular端口从4200更改为其他端口
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将angular端口从4200更改为其他端口EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将angular端口从4200更改为其他端口
EN