logo标签列表

如何为ASP.NET Core Angular应用程序设置默认端口

angularasp.net-core
19

我使用dotnet CLI创建了一个ASP.NET Core与Angular模板的dotnet core项目。

dotnet new angular

现在，每次我使用dotnet run命令运行应用程序时，Angular都会使用不同的端口进行服务。

我尝试在angular-cli.json中设置默认的服务端口。

"defaults": {
  ..
  "serve": {
    "port": 4200
  }
}

尽管如此，它并没有起作用。

我在网上找不到任何文档，那么我在哪里可以设置默认端口？

5个回答
17
SpaServices 从 package.json 文件中获取 "ng serve" 命令，并在运行命令之前添加一个随机端口。在 Windows 中，为了避免这种情况，请添加自己的端口命令和后缀"&REM"，该后缀告诉命令处理程序其后面的任何内容都是注释。
"scripts": {
  "ng": "ng",
  "start": "ng serve --hmr --o --port=5002 &REM",
  ...
  }

当命令行窗口被处理时，您将会看到类似以下的内容:

  > ng serve --hmr --o --port=5002 &REM "--port" "58198"
我应该指出，我想要固定Angular端口的原因是为了在开发过程中配置C#后端的CORS。更好的方法是配置ng服务器作为代理。这样，应用程序将向从同一端口提供服务的REST请求发送。搜索“Angular Proxy to Backend”以找到适用于您正在使用的Angular版本的适当解决方案。（这也适用于其他框架，包括Vue.JS。） - SteveC
如果SPA使用随机端口，那么为什么有一个带有固定端口的应用程序URL变量（launchSettings.json）？ - Phil
Microsoft.AspNetCore.SpaServices：错误：选项“port”已经指定为值5002。新值26498将覆盖它。 - Phil
嗨@fdsfdsfdsfds。我不确定这个项目最初是如何设置的，但可能是在Angular 4时代左右。在这个项目中，Angular应用程序是通过npm直接提供给浏览器的。现在看来，新的Angular项目默认通过Express路由到npm，并使用HTTPS，因此不再需要这个解决方法。根据我原始答案上留下的回复，我猜想还有不少人遇到了这个问题。 - SteveC
如果您在这里是因为在package.json中设置了端口，但仍然遇到以下错误： "Microsoft.AspNetCore.SpaServices[0] Option "port" was already specified with value ####. The new value #### will "override" it." 您必须在语句末尾添加&REM。例如："start": "ng serve --port 41111 &REM" - Diego
8

好的，事实证明端口变更并不重要，因为我可以从网址http://localhost:5000访问Angular应用程序。

$ dotnet run
Using launch settings from /Users/raviteja/Desktop/CSharp/SignalR-Angular-ChatApp/Properties/launchSettings.json...
: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[0]
      User profile is available. Using '/Users/raviteja/.aspnet/DataProtection-Keys' as key repository; keys will not be encrypted at rest.
info: Microsoft.AspNetCore.SpaServices[0]
      Starting @angular/cli on port 56082...
Hosting environment: Development
Content root path: /Users/raviteja/Desktop/CSharp/SignalR-Angular-ChatApp
Now listening on: https://localhost:5001
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
info: Microsoft.AspNetCore.SpaServices[0]
      > SignalR_Angular_ChatApp@0.0.0 start /Users/raviteja/Desktop/CSharp/SignalR-Angular-ChatApp/ClientApp
      > ng serve --extract-css "--port" "56082"

      ** NG Live Development Server is listening on localhost:56082, open your browser on http://localhost:56082/ **

info: Microsoft.AspNetCore.SpaServices[0]
      Date: 2018-05-31T23:44:11.061Z

info: Microsoft.AspNetCore.SpaServices[0]
      Hash: 7f8c3d48fb430eed2337
      Time: 13815ms
      chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
      chunk {main} main.bundle.js (main) 50.5 kB [initial] [rendered]
      chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial] [rendered]
      chunk {styles} styles.bundle.css (styles) 119 kB [initial] [rendered]
      chunk {vendor} vendor.bundle.js (vendor) 9.5 MB [initial] [rendered]


info: Microsoft.AspNetCore.SpaServices[0]
      webpack: Compiled successfully.

我认为这行代码中指定的端口是我们用来访问 Angular 应用程序的端口。
Starting @angular/cli on port 56082...

原来，我不应该使用这个。
来自MSDN：

应用程序在后台启动 Angular CLI 服务器的一个实例。会记录类似以下内容的消息：NG Live Development Server is listening on localhost:, open your browser on http://localhost:/. 忽略此消息——它不是 ASP.NET Core 和 Angular CLI 应用程序的 URL。

但当我尝试访问http://localhost:5000时，我遇到了 SSL 错误。经过更多的挖掘，我在 Startup.cs 中找到了这一行。
app.UseHttpsRedirection();

在添加了这个条件之后，现在它可以正常工作，我能够访问 Angular 应用程序，网址是：http://localhost:5000。
if (!env.IsDevelopment())
    app.UseHttpsRedirection();
2
注意：如果您使用端口5000并且“触摸”Angular文件，则会重新编译，但浏览器不会自动重新加载。 - James Poulose
1
我今天遇到了这个问题。使用命令<<dotnet new angular>>创建的解决方案有问题。在使用<<dotnet run>>运行应用程序时，Angular应用程序没有在同一端口打开。我需要在URL中添加额外的内容才能打开Angular应用程序吗？ - Ajith
2
请尝试执行以下命令： ng set defaults.serve.port=4201 该命令用于设置默认端口为4201。
2
我猜那个方法可以行得通，但我更喜欢一个共享解决方案，多个开发人员可以使用并检入版本控制，而不是“请先运行此命令”的解决方案。不过这些都是好建议。点赞！ - Tore Aurstad
感谢您的评论和点赞。 - Nour
1

一般来说，你是正确的，但我见过其他几个地方可能会覆盖这个值。其中一个是在package.json中，具体在这个块中：

  "scripts": {
    "ng": "ng",
    "start": "ng serve --sourcemap --extractCss --host 0.0.0.0 --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

另外，您可能需要检查一个名为proxy.config.json的文件（如果您有该文件）

检查了 package.json，它没有显式指定一个端口，而且我也没有 proxy.config.json 文件。 - cyberpirate92
这可能更多与dotnet命令有关，而不是Angular配置中的任何内容。请查看此链接：https://github.com/aspnet/KestrelHttpServer/issues/639 - Dallas Caley
0

我在Startup类(Configure方法)中使用以下内容:

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "client";


    if (env.IsDevelopment())
    {
        spa.Options.DevServerPort = 4200;
        spa.UseAngularCliServer(npmScript: "start");
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接