angular - page - router.navigate params

Se produce un error angular 2: 404 cuando actualizo a través del navegador

Question

Esta pregunta ya tiene una respuesta aquí:

• El enrutador angular 2.0 no funciona para recargar el navegador 32 respuestas

Soy nuevo en Angular 2. He almacenado mi aplicación de una sola página en mi servidor dentro de una carpeta llamada "myapp". He cambiado la URL en la base a http://example.com/myapp/ `.

Mi proyecto tiene dos páginas. Así que implemento el enrutamiento Angular 2. Configuré la página predeterminada como inicio de sesión. Cuando escribo http://example.com/myapp/ en mi navegador, redirigirá automáticamente a http://example.com/myapp/login . Pero si actualizo esa página me sale un error 404 , que dice que http://example.com/myapp/login no se encuentra.

Pero si ejecuto mi proyecto usando el servidor Lite, todo está funcionando. En este caso, la URL en index.html será "/" . ¿Cómo solucionarlo?

Answer 1

Actualización para la versión final de Angular 2

En app.module.ts:

• Agregar importaciones:

  import { HashLocationStrategy, LocationStrategy } from ''@angular/common'';

• Y en el proveedor de NgModule, agregue:

  {provide: LocationStrategy, useClass: HashLocationStrategy}

Ejemplo (app.module.ts):

import { NgModule }       from ''@angular/core'';
import { BrowserModule  } from ''@angular/platform-browser'';
import { AppComponent }   from ''./app.component'';
import { HashLocationStrategy, LocationStrategy } from ''@angular/common'';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})
export class AppModule {}

Alternativa

Use RouterModule.forRoot con el argumento {useHash: true}.

Ejemplo: (de documentos angulares )

import { NgModule } from ''@angular/core'';
...

const routes: Routes = [//routes in here];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

De hecho, es normal que tenga un error 404 al actualizar su aplicación ya que la dirección real dentro del navegador se está actualizando (y sin el enfoque # / hashbang). Por defecto, el historial HTML5 se usa para reutilizar en Angular2.

Para corregir el error 404, debe actualizar su servidor para que sirva el archivo index.html para cada ruta de ruta que haya definido.

Si desea cambiar al enfoque HashBang, debe usar esta configuración:

import {bootstrap} from ''angular2/platform/browser'';
import {provide} from ''angular2/core'';
import {ROUTER_PROVIDERS} from ''angular2/router'';
import {LocationStrategy, HashLocationStrategy} from ''@angular/common'';

import {MyApp} from ''./myapp'';

bootstrap(MyApp, [
  ROUTER_PROVIDERS,
  {provide: LocationStrategy, useClass: HashLocationStrategy}
]);

En este caso, cuando actualice la página, se volverá a mostrar (pero tendrá un # en su dirección).

Este enlace también podría ayudarlo: cuando actualizo mi sitio web obtengo un 404. Esto es con Angular2 y firebase .

Espero que te ayude, Thierry

Answer 3

Para las personas (como yo) que realmente quieren PathLocationStrategy (es decir, html5Mode) en lugar de HashLocationStrategy , vea Cómo: configurar su servidor para que funcione con html5Mode desde un wiki de terceros:

Cuando tiene habilitado html5Mode, el carácter # ya no se utilizará en sus URL. El símbolo # es útil porque no requiere configuración del lado del servidor. Sin # , la URL se ve mucho mejor, pero también requiere reescrituras del lado del servidor.

Aquí solo copio tres ejemplos de la wiki, en caso de que la Wiki se pierda. Se pueden encontrar otros ejemplos buscando la palabra clave "reescribir URL" (por ejemplo, esta respuesta para Firebase).

apache

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don''t rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow HTML5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Documentación para reescribir módulo

nginx

server {
    server_name my-app;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Documentación para try_files

IIS

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Answer 4

Para las personas que leen esto que usan Angular 2 rc4 o posterior, parece que LocationStrategy se ha movido del enrutador a común. Tendrás que importarlo desde allí.

También tenga en cuenta los corchetes alrededor de la línea ''proporcionar''.

main.ts

// Imports for loading & configuring the in-memory web api
import { XHRBackend } from ''@angular/http'';

// The usual bootstrapping imports
import { bootstrap }      from ''@angular/platform-browser-dynamic'';
import { HTTP_PROVIDERS } from ''@angular/http'';

import { AppComponent }         from ''./app.component'';
import { APP_ROUTER_PROVIDERS } from ''./app.routes'';
import { Location, LocationStrategy, HashLocationStrategy} from ''@angular/common'';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
]);

Answer 5

Quizás pueda hacerlo mientras registra su raíz con RouterModule. Puede pasar un segundo objeto con la propiedad "useHash: true" como el siguiente:

import { NgModule }       from ''@angular/core'';
import { BrowserModule  } from ''@angular/platform-browser'';
import { AppComponent }   from ''./app.component'';
import { ROUTES }   from ''./app.routes'';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    RouterModule.forRoot(ROUTES ,{ useHash: true }),],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

Answer 6

Si está ejecutando Angular 2 a través de ASP.NET Core 1 en Visual Studio 2015, puede encontrar útil esta solución de Jürgen Gutsch. Lo describe en una publicación de blog . Fue la mejor solución para mí. Coloque el código C # que se proporciona a continuación en su Startup.cs public void Configure () justo antes de app.UseStaticFiles ();

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

    if( context.Response.StatusCode == 404 && !Path.HasExtension( context.Request.Path.Value ) ) {
        context.Request.Path = "/index.html";
        await next();
    }
});

Answer 7

Yo tuve el mismo problema. Mi aplicación Angular se ejecuta en un servidor de Windows.

Resolví este problema creando un archivo web.config en el directorio raíz .

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>