Error 404 run angular Asp.net core

Question

Error 404 run angular Asp.net core

Asked 5 years, 6 months ago

Viewed 112 times

1

I am doing a project integrating the angular with Asp.net core, but as soon as I installed the angular and configured on the page this presenting error 404, even reviewing all the paths made by angular still presents the error when run. Note: if I take the angular page the page normally loads.

Index.html

<app-root></app-root>

<script src="~/ClienteApp/dist/polyfills.js"></script>
<script src="~/ClienteApp/dist/runtime.js"></script>
<script src="~/ClienteApp/dist/styles.js"></script>
<script src="~/ClienteApp/dist/vendor.js"></script>
<script src="~/ClienteApp/dist/main.js"></script>

app.componentts.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center">
      <h1>
        Welcome to {{title}}!
      </h1>
      <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    </div>
    <h2>Here are some links to help you start: </h2>
    <ul>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
      </li>
    </ul>
    <router-outlet></router-outlet>
  `,
  styles: []
})
export class AppComponent {
  title = 'AngularApp';
}

Are you running on dotnet run or npm direct in the Clienteapp? I saw that you have the Views folder, you are using Razor also?

– Rafael

2019/04/16 at 16:53
In the view folder is index.cshtml, I am running dotnet and updating the angular by ng build at the prompt.

– Mauricio Menandro

2019/04/17 at 00:22
Just to isolate the problem, if you run within the clienteapp direct by ng works?

– Rafael

2019/04/17 at 00:44
I checked in the clienteApp folder, and I used ng serve and downloaded the generated localhost, then it appears normally. And when I run on dotnet still keeps giving error 404.

– Mauricio Menandro

2019/04/18 at 00:56
But somewhere in your Startup you need to indicate that it is to redirect to the Index.html page, otherwise Asp.net core won’t know. Since you didn’t post the startup I don’t know if it is 100% correct, but I will answer with a solution and you test!

– Rafael

2019/04/18 at 15:07

1 answer

Browser other questions tagged angular asp.net-core

You are not signed in. Login or sign up in order to post.

by Rafael • **496** points · Answer 1 · 2019-04-18T15:08:30+00:00

Please try adding the route to Index.html so that Asp.net core can pass control to the angular:

Use inside Configure (Startup):

        app.Use(async (context, next) =>
        {
            await next();

            // Rewrite request to use app root
            if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value) && !context.Request.Path.Value.StartsWith("/api"))
            {
                context.Request.Path = "/index.html"; 
                context.Response.StatusCode = 200; // Make sure we update the status code, otherwise it returns 404
                await next();
            }
        });

Remember to use Static files and defaultroute, later to the above code:

       app.UseStaticFiles();
       app.UseMvcWithDefaultRoute();