1

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.

Project structure

Improve this question
24
  • it works normally when "outDir": "dist" ? Commented Mar 9, 2018 at 4:58
  • Hi k11k, have you done this kind of project before? The answer to your question is, no and reason is the file will open in browser, if the file is created in wwwroot only. Commented Mar 9, 2018 at 5:37
  • If you look in to your startup.cs services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/dist"; }); changing this path may help you to work. I didn't try this. Commented Mar 9, 2018 at 5:53
  • Sorry, K11k2, that is not going to solve the problem. Actually, when we publish, the wwwroot will be considered for point of start. So how does it help? No, the question is why is index.html not getting copied? Commented Mar 9, 2018 at 6:04
  • by changing "outDir": "wwwroot" will create wwwroot folder under clientApp that doesn't mean it generate the build files in dotnet wwroot folder. but don't how you managed to generate `src file generated in that root. Commented Mar 9, 2018 at 6:05

1 Answer 1

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.