1

Estou fazendo um projeto integrando o angular com o asp.net core, porem assim que instalei o angular e configurei na pagina esta apresentando erro 404, mesmo revisando todos os caminhos feitos pelo angular ainda continua apresentando o erro quando executo. Obs: se eu tiro o angular a pagina carrega normalmente.

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.component.ts

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';
}

Angular.json

5
  • Vc está rodando pelo dotnet run ou pelo npm direto na ClienteApp? Vi que tem a pasta Views, você está usando o Razor tb?
    – Rafael
    Commented 16/04/2019 às 16:53
  • Na pasta view so esta o index.cshtml, eu estou rodando pelo dotnet e atualizando o angular pelo ng build no prompt. Commented 17/04/2019 às 0:22
  • Só pra isolar o problema, se vc rodar dentro do clienteapp direto pelo ng funciona?
    – Rafael
    Commented 17/04/2019 às 0:44
  • Rodei na pasta do clienteApp, e usei o ng serve e acessei o localhost gerado, ai aparece normalmente. E quando rodo no dotnet ainda continua dando o erro 404. Commented 18/04/2019 às 0:56
  • Mas em algum lugar do seu Startup você precisa indicar que é para redirecionar para a página Index.html, senão o asp.net core não saberá. Como vc não postou o startup não sei se ele está 100% correto, mas vou responder com uma solução e vc testa!
    – Rafael
    Commented 18/04/2019 às 15:07

1 Resposta 1

0

Por favor, tente adicionar a rota para o Index.html para o que o asp.net core possa passar o controle para o angular:

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

Lembre-se de usar o static files e defaultroute, posteriormente ao código acima:

       app.UseStaticFiles();
       app.UseMvcWithDefaultRoute();
1
  • No meu código estava faltando o "app.UseStaticFiles", por isso que ele não estava localizando os caminhos dos arquivos. Obrigado :) Commented 19/04/2019 às 0:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .