【问题标题】:How to set a default port for ASP.NET Core Angular app如何为 ASP.NET Core Angular 应用程序设置默认端口
【发布时间】:2018-05-31 22:51:20
【问题描述】:

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

dotnet new angular

现在,每当我使用 dotnet run 命令运行应用程序时,Angular 每次都使用不同的端口。

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

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

虽然不起作用。

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

【问题讨论】:

    标签: angular asp.net-core


    【解决方案1】:

    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。)
    • 如果spa使用的是随机端口,那么为什么会有一个固定端口的应用程序url变量(launchSettings.json)?
    • Microsoft.AspNetCore.SpaServices: 错误:选项“端口”已指定值为 5002。新值 26498 将覆盖它。
    • 嗨@fdsfdsfdsfds。我不确定与此相关的项目最初是如何搭建的,但可能是在 Angular 4 时代左右。在这个项目中,Angular 应用程序由 npm 直接提供给浏览器。似乎新的 Angular 项目现在默认使用 HTTPS 通过 Express 路由到 npm,因此不再需要这种解决方法。从我原始答案中留下的回复来看,我怀疑其他几个人也有这个问题。
    • 如果您在这里是因为您在 package.json 中设置了端口,但仍然收到错误:“Microsoft.AspNetCore.SpaServices[0] 选项“端口”已指定为值 ### #. 新值 #### 将“覆盖”它。您必须将 &REM 添加到语句的末尾。类似于:“start”:“ng serve --port 41111 &REM”
    【解决方案2】:

    好的,事实证明,更改端口并不重要,因为我可以从 url 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

    应用程序在 背景。记录了类似于以下内容的消息:NG Live 开发服务器正在监听 localhost:,打开你的 http://localhost:/ 上的浏览​​器。 忽略此消息——它不是 组合的 ASP.NET Core 和 Angular CLI 应用程序的 URL。

    但是当我尝试访问 http://localhost:5000 时,我遇到了 SSL 错误,经过更多挖掘,我在 Startup.cs 中找到了这一行

    app.UseHttpsRedirection();
    

    添加此条件后,它现在工作正常,我可以通过 http://localhost:5000 访问 Angular 应用程序

    if (!env.IsDevelopment())
        app.UseHttpsRedirection();
    

    【讨论】:

    • 注意:如果你使用端口 5000 并且你 touch 一个 Angular 文件,它将重新编译,但浏览器不会自动重新加载。
    • 我今天遇到了这个问题。使用命令 > 创建的解决方案存在问题。使用 > 调整应用程序时,角度应用程序未在同一端口中打开。我是否需要在 URL 中添加任何额外内容才能打开 Angular 应用程序?
    【解决方案3】:

    试试下面的命令:

    ng set defaults.serve.port=4201

    【讨论】:

    • 我想这会行得通,但我更喜欢共享解决方案,多个开发人员可以使用该解决方案并将其签入版本控制,而不是“请先运行此命令”解决方案。不过很好的提示。有一个 +1
    • 感谢您的评论和 +1
    【解决方案4】:

    一般来说,您是正确的,但是我已经看到其他一些位置可能会覆盖此值。一个是在 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。
    • 它可能与 dotnet 命令有关,而不是 Angular 配置中的任何内容。看看这个:github.com/aspnet/KestrelHttpServer/issues/639
    猜你喜欢
    • 1970-01-01
    • 2016-10-14
    • 1970-01-01
    • 2020-04-01
    • 2022-10-07
    • 2012-12-26
    • 2015-12-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多