在 Visual Studio 2019 中为 Angular 应用程序构建失败答案

【问题标题】：Build Failed in Visual Studio 2019 for Angular Application在 Visual Studio 2019 中为 Angular 应用程序构建失败
【发布时间】：2020-02-19 15:18:16
【问题描述】：

我使用 Visual Studio 2019（社区版）应用了 Angular 8 和 .Net Core 2.2（Web API）。为了将两个项目保持在单一解决方案中，我遵循了此链接中给出的说明： Add angular 7.0 client application to asp.net core 2.2 web api project

它在一段时间内工作得很好，现在给出如下图所示的构建错误。而我可以在命令提示符下使用 ng serve 命令运行应用程序，但无法使用 Visual Studio 2019 构建。

我尝试通过更改 tsconfig.json 中的设置来解决错误，但到目前为止还没有成功。找到我当前的 tsconfig.json 如下：

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "module": "esnext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": false,
    "strictInjectionParameters": true
  }
}

请帮助解决上述情况。我不知道如何共享代码，但我可以将代码作为学习应用程序共享。

其次，有没有其他方法可以将 Angular 和 .Net Core Web Api 保留在单个项目中？

【问题讨论】：

构建失败，因为您在 html 或 ts 文件中有错误。我认为您在 html 文件中使用了变量，但变量未在 ts 文件中定义。
@upinderkumar 不，事实并非如此。我可以使用 ngserve 命令运行应用程序而不会出现任何错误。

标签： angular visual-studio .net-core asp.net-core-webapi visual-studio-2019

【解决方案1】：

找到了解决办法。我已经排除了用于 Angular 的“ClientApp”文件夹，并尝试构建现在只有 Web Api 项目的解决方案。仍然给我同样的错误。所以它确认tsconfig.json中没有问题。

我将 .csproj 文件的内容更改如下：

<PropertyGroup>
    <TargetFramework>netcoreapp2.2</TargetFramework>
    <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
</PropertyGroup>

之前是这样的：

<PropertyGroup>
    <TargetFramework>netcoreapp2.2</TargetFramework>
    <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>
    <TypeScriptToolsVersion>3.6</TypeScriptToolsVersion>
   <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
</PropertyGroup>

【讨论】：

【解决方案2】：

您绝对可以在一个解决方案中托管 .Net Core WebApi 和 Angular。 Microsoft 甚至创建了一个不错的项目模板，该模板自 .Net Core 2.2 起就包含在内。请参阅https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-3.0&tabs=visual-studio 以获得良好的起点。

您列出的文章是针对未使用 Angular SPA 模板构建的现有独立 Web Api 项目，他们需要稍后在其中添加 SPA。微软的 SPA 模板还不错，一切都是开箱即用的，试试吧。

【讨论】：