redireccionar - rutas anidadas angular 2

El enrutamiento angular 2 no funciona cuando se implementa en el servidor HTTP

Question

Voy a desarrollar una sencilla aplicación Angular 2. He creado un proyecto con enrutamiento, utilizando Angular CLI y agregue varios componentes a la aplicación mediante el comando ''ng generar componente''. Luego especifiqué el enrutamiento en app-routing.module.ts como sigue.

import { NgModule } from ''@angular/core''; import { Routes, RouterModule } from ''@angular/router''; import { HomeComponent } from ''./home/home.component''; import { AboutComponent } from ''./about/about.component''; import { UserComponent } from ''./user/user.component''; import { ErrorComponent } from ''./error/error.component''; import { SpecialpageComponent } from ''./specialpage/specialpage.component''; const routes: Routes = [ { path: '''', component: HomeComponent }, { path: ''about'', component: AboutComponent }, { path: ''user'', component: UserComponent }, { path: ''specialpage'', component: SpecialpageComponent }, { path: ''**'', component: ErrorComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [] }) export class AppRoutingModule { }

app.module.ts es como sigue.

import { BrowserModule } from ''@angular/platform-browser''; import { NgModule } from ''@angular/core''; import { FormsModule } from ''@angular/forms''; import { HttpModule } from ''@angular/http''; import { AppRoutingModule } from ''./app-routing.module''; import { AppComponent } from ''./app.component''; import { HomeComponent } from ''./home/home.component''; import { AboutComponent } from ''./about/about.component''; import { ErrorComponent } from ''./error/error.component''; import { UserComponent } from ''./user/user.component''; import { SpecialpageComponent } from ''./specialpage/specialpage.component''; @NgModule({ declarations: [ AppComponent, HomeComponent, AboutComponent, ErrorComponent, UserComponent, SpecialpageComponent ], imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

No he añadido ninguna modificación para los otros componentes. Luego implementé la aplicación con el comando ''ng serve'' y la aplicación funciona bien con los enlaces. Por ejemplo: http://localhost:4200/about

Pero cuando implemento el proyecto en http-server, los enlaces no funcionan como se esperaba. Desplegué la aplicación usando el comando ''http-server ./dist'' y la aplicación se implementa bien, pero los enlaces no funcionan. Cuando voy a '' http://localhost:4200/about '', me da un error 404.

¿Estoy haciendo algo mal? ¿Por qué ''ng-serve'' funciona y ''http-server'' no funciona?

Cualquier ayuda sería apreciada. Gracias por adelantado.

He subido mi proyecto a github .

Answer 1

Para el servidor apache

• Crear un nombre de archivo .htaccess
• Edite ese archivo y escriba index.html lugar de index.php

• Para aquellos que no tienen ningún código, puede escribir el siguiente código en su archivo .htaccess : RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn''t exist, use index.html RewriteRule ^ /index.html

• Es posible que este código no funcione con el certificado SSL. Póngase en contacto con su proveedor de alojamiento O visite https://httpd.apache.org/docs/current/howto/htaccess.html para consultar los documentos.

Answer 2

Cambia tu index.html

<base href="/">
 to 
<base href="./">

Debido a que estamos utilizando Tomcat, hemos mencionado esto (.). El enrutamiento se basa en este (/). Así como el servidor http

Me refiero a ejecutar normalmente ng servicio que ha visto solo http://localhost:4200/

pero ejecutado en el servidor ha puesto su compilación en (dist) en webapps

así que ha llegado como

http://localhost:8080/dist/

por lo que necesita agregar <base href="./">

Creo que este es el problema para usted puede ser resuelto.

Answer 3

Este problema se resuelve implementando HashLocationStrategy que agrega # a todas sus rutas. Esto se logra al agregar HashLocationStrategy to AppModule providers .

    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

y añadir la importación correspondiente.

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

Esto resolverá tu problema.

Y si no desea utilizar HashLocationStrategy , puede usar PahtLocationStrategy , por lo que su aplicación Angular no mostrará Hash en la URL. Para obtener más detalles, consulte el enlace oficial: https://angular.io/api/common/PathLocationStrategy

Answer 4

Esto se debe a que http-server no admite el respaldo como lite-server o web pack-dev server. Es por esto que muestra 404 no encontrados . Hay 2 soluciones dos soluciones para resolver este problema:

1. Puedes usar HashLocationStrategy como se mencionó anteriormente.
2. Si lo está implementando en Apache o en el servidor IIS, simplemente puede agregar configuraciones como se menciona here .

Nota: para el desarrollo puedes usar lite-server.

Espero que esto te ayudará.

Answer 5

He resuelto este problema con la adición de esto en los proveedores de AppModule:

providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}]

e importando

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

Entonces creé .htaccess:

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn''t exist, use index.html
RewriteRule ^ /index.html

Todo funciona muy bien sin # en URLs :)

Answer 6

Ocurrirá porque va a encontrar una página sobre la que no se encuentra en el interior, por lo tanto, 404. Posibles opciones:

1. Si desea utilizar http-server, use un proxy que redirija todo a http://localhost:your-port .

   Opción: -P o --proxy todas las solicitudes que no pueden resolverse localmente a la url dada. por ejemplo: -P http://someurl.com

2. No utilice expreso en absoluto. Cree su propio servidor http utilizando Express y redirija todo a index.html

   Asumir público es tu carpeta donde guardas todas las cosas transpiladas.

   var express = require(''express'');
   var app = express();
   
   var path = __dirname + ''/public'';
   var port = 8080;
   
   app.use(express.static(path));
   app.get(''*'', function(req, res) {
       res.sendFile(path + ''/index.html'');
   });
   app.listen(port);

Answer 7

Puede hacerlo mientras registra su RouterModule.forRoot, puede pasar un segundo objeto con propert {useHash: true} como el siguiente:

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

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

Answer 8

Se resolverá de esta manera:

Caso 1: para versiones menores que Angular 5.1

1) Use HashLocationStrategy como se menciona a continuación: En AppModule haga lo siguiente.

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

1.2) providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

Caso 2: para una versión igual o mayor que Angular 5.1

2.1) Angular ha introducido esta propiedad enSameUrlNavigation para solucionar el problema de actualización en el servidor.

2.2) Agregue onSameUrlNavigation al RouterModule.forRoot en la matriz de importaciones .

a) En el módulo de enrutamiento principal de la aplicación, i, e app.routing.module.ts / app.routing.ts agregue la propiedad

Vea abajo:

@ngModule({

    imports: 
    [
       RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})
    ],

    exports: [RouterModule],
 });

Espero que ayude a alguien.

Answer 9

Según la documentación en here (Apache, también puede buscar nginx) Debe apuntar el servidor a index.html utilizando el archivo .htaccess como

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn''t exist, use index.html

RewriteRule ^ /index.html

Answer 10

Si usted, como yo, no quiere hacer ningún cambio de código, simplemente use esto en su lugar:

https://www.npmjs.com/package/angular-http-server

Answer 11

en la carpeta del proyecto crea un archivo .htaccess y luego escribe

RewriteEngine On
RewriteCond %{HTTP_HOST} ^example/.com$ [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

siga este enlace: here

Answer 12

Para el servidor Apache:

en los servidores de producción

Agregue o cree el archivo ".htaccess" en la raíz del proyecto, agregue una regla de reescritura al archivo .htaccess como se muestra

RewriteEngine On
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]
  # If the requested resource doesn''t exist, use index.html
RewriteRule ^ /index.html

Answer 13

export const routes: Routes =[
   **{ path: '''', redirectTo: ''/'', pathMatch: ''full''},**
     { path: ''about'', component: AboutComponent},
     { path: ''user'',  component: UserComponent},
     { path: ''specialpage'',  component: SpecialpageComponent},
     { path: ''**'',  component: ErrorComponent}
    ];

Mira el contenido de blockquote. Y luego da el nombre de "HttpModule" en los providers:[] en app.module.ts

Gracias.