Comment définir le contexte de l'application de chemin dans angular2 de routage correctement?
J'ai créé un Angulaire du projet à l'aide angulaires-cli (version : 1.0.0-bêta.28.3). Je lance l'application dans un environnement de développement à l'aide de "npm démarrer" et l'application s'exécute correctement en "localhost:4200". Maintenant à reproduire un déploiement en production, j'ai voulu exécuter l'application en local WAMP. Donc, j'ai couru "ng construire -prod', copié les fichiers à partir de 'dist' dossier www de WAMP/annuaire en ligne des étudiants. Maintenant quand je lance le projet par le biais de WAMP, je finis par obtenir ce message d'erreur :
Évidemment, l'application a été à la recherche pour le js fichiers dans le mauvais emplacement. J'ai fait quelques recherches, et a constaté que la racine de contexte - dans mon cas, "étudiant" a dû être mis dans le "base href="/étudiant" à l'intérieur de la index.html. En raison angulaires-cli de bug, à chaque fois j'ai tapé "ng construire -prod', la base href suis remis à "/". Trouvé une solution de contournement; en tapant "ng construire -prod --base-href étudiant" définir la base href étudiants.
Maintenant que j'ai rencontré un nouveau problème. La page par défaut était censé montrer le contenu de l'itinéraire "app-maison", mais le lancement de l'app me donne :
Mais, à la fois les itinéraires et les liens fonctionnent très bien. Par exemple en cliquant sur "à Propos de Nous" modifie l'url de " http://localhost:82/student/student/app-about-us " et montre le contenu approprié.
Je suis sûr que j'ai un problème avec mon routage. Merci de m'aider à définir le routage de telle façon que je peux obtenir de l'application en cours d'exécution dans ' http://localhost:82/student " avec les sous-url
'http://localhost:82/student/student/app-home' (par défaut) et"http://localhost:82/student/student/app-about-us'
app.les 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.le routage.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 type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
- vous devez définir le
--base-hrefà l'url web, c'est à direhttp://www.mytestpage.com/, vous devez inclure le slash - si c'est un nœud hébergé application, la base href peuvent être
/si le nœud serveur traite la requête correctement
Vous devez vous connecter pour publier un commentaire.
Utilisez cette option pour créer construire
base href fonctionne partout.
Voir l'Exemple où je l'ai hébergé sur xampp :
./fonctionne très biendist? c'est pourquoi vous devez utiliser ce que j'ai recommandéhttp://localhost/loginaussi le travail pour moi.....Standard de l'hôte
ng build --base-href http://www.yourwebsitehere.com/. Assurez-vous de se rappeler le slashNodeJS hôte
ng build. Assurez-vous de configurer votre serveur NodeJS correctement siJe pense que le problème est avec le chemin de contexte de votre application. Créer un service qui reçoit le contexte de l'application de votre application et ajouter ce contexte chemin d'accès à votre itinéraire des chemins de résoudre le problème, je suppose.