Question

我尝试使用Angular CLI生成Angular应用程序来设置ASP.NET Core项目。

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

在VS Code
构建Angular应用并通过终端使用ng build --watch观察更改。

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

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

但是这会卡在watch部分，而不是继续调试项目。

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

我的目标是：

在ASP.NET Core项目中托管的Angular应用程序（而不是ng serve）
使用ng build代替运行自定义webpack脚本
某种Live Reload，以便在调试时自动更新我的ts文件。

这可能吗？

修改

我认为它不相关，但这是我的角度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>

Answer 1

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

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

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

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

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

Answer 2

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

我找到的唯一一个临时解决方案是，一旦你想在网页上看到你的更改，然后在构建命令完成后立即刷新浏览器，就运行构建。

我读过的另一件事是，仍然可以配置webpack来负责HMR，但我还是没有想出怎么做，最新的解决方案（手动构建）对我有用。

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

https://github.com/JuanGarciaCarmona/AspNetCore2Ang6Template

我希望它有所帮助，

涓

具有Angular CLI和Live Reload的ASP.NET Core

2 个答案: