web-dev-qa-db-fra.com

Comment définir le chemin de contexte d'application dans le routage angular2 correctement?

J'ai créé un projet angulaire en utilisant angular-cli (version: 1.0.0-beta.28.3). J'exécute l'application dans l'environnement de développement en utilisant "npm start" et l'application fonctionne correctement dans "localhost: 4200". Maintenant, pour répliquer le déploiement de la production, je voulais exécuter l'application dans le WAMP local. J'ai donc lancé 'ng build -prod', copié les fichiers du dossier 'dist' dans le répertoire www/student de WAMP. Maintenant, quand je lance le projet avec WAMP, je finis par avoir cette erreur: 

 enter image description here

De toute évidence, l'application recherchait les fichiers JS requis au mauvais emplacement. J'ai fait des recherches et j'ai découvert que la racine du contexte - dans mon cas, "étudiant" devait être définie dans "base href ="/student "dans l'index.html. build -prod ', la base href a été réinitialisée sur "/". Une solution de contournement a été trouvée; taper "ng build -prod --base-href student" définit la base href à student.

Maintenant, j'ai rencontré un nouveau problème. La page par défaut était censée montrer le contenu de la route 'app-home', mais le lancement de l'application me donne:

 enter image description here

Mais, les deux itinéraires/liens fonctionnent bien. Par exemple, en cliquant sur "À propos de nous", l'URL devient " http: // localhost: 82/student/student/app-about-us 'et affiche le contenu approprié.

Je suis presque sûr d'avoir un problème avec mon routage. Aidez-moi à définir le routage de manière à pouvoir exécuter l'application dans ' http: // localhost: 82/student ' avec des sous-URL ' http: // localhost: 82/student/student/app-home '(par défaut) et' http: // localhost: 82/student/student/app-about-us '

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { CarComponent } from './car/car.component';
import { MenuComponent } from './menu.component';
import { CONST_ROUTING } from "app/app.routing";


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutUsComponent,
    CarComponent,
    MenuComponent

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    CONST_ROUTING

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from "app/home/home.component";
import { AboutUsComponent } from "app/about-us/about-us.component";

const MAINMENU_ROUTES: Routes = [
 //full : makes sure the path is absolute path
 { path: '', redirectTo: '/app-home', pathMatch: 'full' },
 { path: 'app-home', component: HomeComponent },
 { path: 'app-about-us', component: AboutUsComponent }
];
export const CONST_ROUTING = RouterModule.forRoot(MAINMENU_ROUTES);

menu.component.html

<div class="row">
 <div class="col-xs-12">
 <ul class="nav nav-pills">
 <li routerLinkActive="active"> <a [routerLink]="['/app-home']" >Home</a></li>
 <li routerLinkActive="active"> <a [routerLink]="['/app-about-us']" >About Us</a></li>
 </ul>
 </div>
 </div>

app.component.html

 <app-menu></app-menu>
<router-outlet></router-outlet>

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ang2RouterTest</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>
angularangular2-routingangular-cli
9
Tahniat Ashraf

Utilisez cette option pour créer une construction 

ng build --base-href .

la base href fonctionne partout.

Voir Exemple où j'ai hébergé sur xampp:  enter image description here

9
Parth Ghiya

Hôte standard - ng build --base-href http://www.yourwebsitehere.com/. Assurez-vous de vous souvenir de la barre oblique finale

Hôte NodeJS - ng build. Assurez-vous de bien configurer votre serveur NodeJS

2
mast3rd3mon

Je pense que le problème est avec le chemin de contexte de votre application. Créez un service qui récupère le contexte d'application de votre application et ajoutez ce chemin de contexte à vos chemins de route, ce qui résoudrait le problème, je suppose.

0
raj240