Soy nuevo en Angular 2. Guardé mi aplicación de una sola página en mi servidor dentro de una carpeta llamada "myapp". Cambié la URL en la base a http://example.com/myapp/` .
Mi proyecto tiene dos páginas. Entonces implementé el enrutamiento Angular 2. Configuré la página predeterminada como inicio de sesión. Cuando escribo http://example.com/myapp/ en mi navegador, se redirigirá automáticamente a http://example.com/myapp/login . Pero si actualizo esa página, aparece un error 404 que dice que no se encuentra http://example.com/myapp/login .
Pero si ejecuto mi proyecto usando el servidor lite, todo funciona. En este caso, la URL base en index.html será "/" . ¿Cómo arreglarlo?
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 {}Use RouterModule.forRoot con el argumento {useHash: true}.
Ejemplo: (dedocumentos 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 { }Para las personas (como yo) que realmente quieren PathLocationStrategy (es decir, html5Mode) en lugar de HashLocationStrategy , consulte Cómo: configurar su servidor para que funcione con html5Mode desde un wiki de terceros:
Cuando tenga habilitado html5Mode, el carácter
#ya no se usará 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 "reescritura de URL" (por ejemplo, esta respuesta para Firebase).
<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 el módulo de reescritura
server { server_name my-app; root /path/to/app; location / { try_files $uri $uri/ /index.html; } } <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>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). De forma predeterminada, el historial de HTML5 se usa para reutilizar en Angular2.
Para corregir el error 404, debe actualizar su servidor para servir el archivo index.html para cada ruta de ruta que definió.
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