带有 Angular CLI 和 Live Reload 的 ASP.NET Core答案

【问题标题】：ASP.NET Core with Angular CLI and Live Reload带有 Angular CLI 和 Live Reload 的 ASP.NET Core
【发布时间】：2017-08-10 08:35:21
【问题描述】：

我正在尝试使用 Angular CLI 生成的 Angular 应用设置 ASP.NET Core 项目。

我已经设置了两件事，以便我可以：

在 VS Code 中通过 F5 启动和调试服务器（ASP.NET Core）
构建 Angular 应用并通过终端使用 ng build --watch 观察更改。

现在，我想将这两件事结合起来，以便在我调试 ASP.NET Core 项目时自动构建和监视 Angular 文件。但我不知道该怎么做。我在.csproj-file 中试过这个：

<Target Name="PostcompileScript" AfterTargets="Build">
 <Exec Command="ng build --watch" />
</Target>

但这会卡在watch 部分，无法继续调试项目。

关于如何让这个工作的任何想法？

我的目标：

托管在 ASP.NET Core 项目中的 Angular 应用程序（而不是 ng serve）
使用 ng build 而不是运行自定义 webpack 脚本
某种实时重新加载，以便在调试时在浏览器中自动更新对我的ts 文件的更改。

这可能吗？

编辑

我认为这无关紧要，但这是我的 angular cli 配置文件：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "my-app"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "wwwroot",
            "assets": [
                "assets",
                "content/imgs",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "app.ts",
            "polyfills": "polyfills.ts",
            "tsconfig": "tsconfig.app.json",
            "prefix": "app",
            "styles": [
                "content/styles/styles.scss"
            ],
            "scripts": [],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "testing": "environments/environment.testing.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "defaults": {
        "styleExt": "scss",
        "component": {}
    }
}

还有.csproj 文件：

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
    <TargetFramework>netcoreapp1.1</TargetFramework>
</PropertyGroup>


<ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore" Version="1.1.1" />
    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" />
    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" />
    <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.1" />
    <PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="1.1.0" />
</ItemGroup>

<Target Name="PostcompileScript" AfterTargets="Build">
    <Exec Command="ng build --watch" />
</Target>

</Project>

【问题讨论】：

用配置文件更新帖子
@Aravind 角度 cli 配置？为什么这很重要？
当然是相关的。
@Aravind 我已经添加了它 :) 但我的问题不是我的 Angular 应用程序不工作，所以我认为配置很好。我的问题是如何将 Angular 应用程序的构建和监视与调试 ASP.Net Core 项目结合起来
@Joel 你能分享 csproj 文件吗？

标签： angularjs angular asp.net-core .net-core angular-cli

【解决方案1】：

当 IIS 为 angular2 应用程序提供服务时，除非明确配置，否则不能期望它重新加载浏览器。请按照以下步骤操作

通过以下方式打开 Internet 信息服务管理器，
```
type inetmgr in the run command
```
在突出显示的 IIS 管理器窗口左侧的连接窗格中导航到您的站点

转到输出缓存设置并单击添加，如下所示
输入缓存应该发生的时间间隔，这会强制应用程序刷新。

当您使用 ng serve 命令执行应用程序时，您可以使用以下选项在发生更改时重新加载

ng serve --live-reload 
      or
ng serve -lr

【讨论】：

感谢您的建议，但我不想使用ng serve（我想使用带有编译文件的IIS）。如果可能的话，我不想找到一种方法来运行 ng build --watch 作为我的构建过程的一部分。
很抱歉让您感到困惑，但实时重新加载部分仅在开发阶段对我感兴趣，同时我通过 IIS Express 运行应用程序并在 VS Code 中对其进行调试。在真正的 IIS 安装中部署到生产环境时不会。
您仍然可以通过在 web.config 文件中进行配置来使用 IIS 来运行您的应用程序。考虑这种情况 **当前您的应用程序在 IIS Express 中运行。您可以修改 webconfig 文件中的设置

【解决方案2】：

目前我一直面临这些问题，我无法使用我的 ASP NET Core 和 Angular 6 应用程序获得 HRM 行为，那是因为我（我们）没有为 Angular 应用程序提供服务，我们只是构建它时，静态文件服务是由 dotnet 而不是 ng 完成的。

我找到的唯一一个临时解决方案是在您想在网络中查看更改后运行 ng build，然后在 ng build 命令完成后立即刷新浏览器。 p>

我读到的另一件事是，仍然可以将 webpack 配置为负责 HMR，但我仍然没有弄清楚如何去做，最新的解决方案（手动构建）对我有用。

顺便说一句，有一个项目模板可以为您创建项目脚手架，使用 ASP NET Core 和 Angular 6。

https://github.com/JuanGarciaCarmona/AspNetCore2Ang6Template

希望对你有帮助

胡安

【讨论】：