Angular 4 cli 生成的项目，与 Asp.Net Core 问题的集成答案

【问题标题】：Angular 4 cli generated project, integration with Asp.Net Core issueAngular 4 cli 生成的项目，与 Asp.Net Core 问题的集成
【发布时间】：2018-08-17 14:16:55
【问题描述】：

我在将 Angular 4 cli 项目与 Asp.Net 核心项目集成到 Visual Studio 2017 中时遇到问题。

这是我已采取的步骤。

使用 >ng new shoppingcart 创建了一个 angular4 项目
内部 shoppingcart 文件夹，我使用 >dotnet new webapi
在 Visual Studio 2017 中打开 dot new 项目，并更改 .angular-cli.json 中的 outDir 条目到“outDir”：“wwwroot”。
添加了一个服务 app.service.ts 并调用了 web api 控制器。
从 Visual Studio 运行应用程序并打开浏览器。它显示 http://localhost:6353/ 并显示错误 404。

现在如果我输入“http://localhost:6353/values”，那么我会得到值控制器返回的值，这是可以理解的。

但是，我的问题是：

a) 它应该显示 src 文件夹下的 index.html（通过将其复制到 wwwroot 文件夹），但它没有。结果，整个打字稿逻辑没有得到执行。 b) 浏览器应该显示相同的索引 .html，但事实并非如此。

你能帮帮我吗？

这是我的

.angular-cli.json 文件。

  {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
  "name": "shopping-cart"
 },
 "apps": [
  {
  "root": "src",
  "outDir": "wwwroot",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css"
  ],
  "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
 }
],
  "e2e": {
  "protractor": {
  "config": "./protractor.conf.js"
  }
 },
 "lint": [
{
  "project": "src/tsconfig.app.json",
  "exclude": "**/node_modules/**"
},
{
  "project": "src/tsconfig.spec.json",
  "exclude": "**/node_modules/**"
},
{
  "project": "e2e/tsconfig.e2e.json",
  "exclude": "**/node_modules/**"
}
],
"test": {
 "karma": {
  "config": "./karma.conf.js"
  }
 },
 "defaults": {
  "styleExt": "css",
  "component": {}
 }
}

我的整个项目都在github上，链接是：angular4 and Dot net core shopping cart

我有这个例子

Source example

但是当我从 Visual Studio (或通过 Dotnet run ) 运行时，索引页面没有在浏览器中打开。因此，我们将不胜感激。

我的项目结构，如你所见，index.html没有被复制，main.js、polyfills.js和test.js等文件被复制到src文件夹下。

【问题讨论】：

"outDir": "dist"时正常工作?
嗨k11k，你以前做过这种项目吗？您的问题的答案是，否，原因是如果文件仅在 wwwroot 中创建，文件将在浏览器中打开。
如果您查看您的 startup.cs services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/dist"; });，更改此路径可能会帮助您工作。这个我没试过。
抱歉，K11k2，这并不能解决问题。实际上，当我们发布时，会考虑以 wwwroot 为起点。那么它有什么帮助呢？不，问题是为什么 index.html 没有被复制？
通过更改 "outDir": "wwwroot" 将在 clientApp 下创建 wwwroot 文件夹，这并不意味着它会在 dotnet wwroot 文件夹中生成构建文件。但不知道您是如何设法生成在该根目录中生成的`src 文件的。

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

【解决方案1】：

我已经解决了这个问题。我在配置方法中更改了在startup.cs中添加以下代码

app.Use(async (context, next) =>
  {
    await next();
    if (context.Response.StatusCode == 404 &&
      !context.Request.Path.Value.StartsWith("/api/"))
    {
      context.Request.Path = "/index.html";
      await next();
    }
  });

之前，它是 wwwroot/index.html 。现在一切正常。当我通过 dotnet run 命令运行项目时，所有 angular 4 功能都可用。

【讨论】：