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

Question

I am facing problem integrating angular 4 cli project into Visual Studio 2017 with Asp.Net core project.

Here are the steps that I have taken.

1. Created a angular4 project with >ng new shoppingcart

2. Inside the shoppingcart folder, I have created a Dot net web api project using >dotnet new webapi

3. Opened the dot new project in Visual studio 2017, and changed the outDir entry in .angular-cli.json to "outDir": "wwwroot".

4. Added a service namely app.service.ts and invoked the web api controller.

5. Ran the application from visual studio and the browser opens. It shows http://localhost:6353/ and error 404 is shown.

Now if I type " http://localhost:6353/values , then I get the values returned by values controller, which is understandable.

But, my problems are these:

a) It is supposed to show the index.html under src folder (by copying it to wwwroot folder), but it does not. As a result, entire typescript logic is not getting executed. b) the browser is supposed to show the same index .html, but it does not.

Can you help me?

Here is my

.angular-cli.json file.

  {
  "$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": {}
 }
}

my entire project is on github and the link is: angular4 and Dot net core shopping cart

I have follows this example

Source example

But The index page is not opening in the browser, when I run from Visual studio (or by Dotnet run ) . So any help will be appreciated.

My project structure, as you can see,index.html is not copied, and files like main.js, polyfills.js and test.js are copied under src folder.

Answer 1

I have resolved the issue. I changed add the below code in startup.cs in configuration method

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();
    }
  });

Earlier, it was wwwroot/index.html . Now everything works fine. When I run the project thru dotnet run command all the angular 4 features are available.