it-swarm.com.de

Wie kann ich den Anwendungskontextpfad richtig in das angle2 Routing setzen?

Ich habe ein Angular-Projekt mit angle-cli (Version: 1.0.0-beta.28.3) erstellt. Ich führe die Anwendung in der Entwicklungsumgebung mit "npm start" aus und die Anwendung läuft einwandfrei in "localhost: 4200". Um die Produktionsbereitstellung zu replizieren, wollte ich die Anwendung jetzt im lokalen WAMP ausführen. Also lief ich 'ng build -prod' und kopierte die Dateien aus dem 'dist'-Ordner in das WAMP-Verzeichnis www/student von WAMP. Wenn ich nun das Projekt über WAMP durchführe, bekomme ich schließlich diesen Fehler 

enter image description here

Offensichtlich hat die Anwendung am falschen Ort nach den erforderlichen js-Dateien gesucht. Ich recherchierte und fand heraus, dass der Kontextstamm - in meinem Fall "student" in "base href ="/student "in der index.html festgelegt werden musste. Aufgrund des Fehlers von angle-cli habe ich jedes Mal" ng "eingegeben build -prod ', die Basis-Href wurde auf "/" zurückgesetzt. Eine Problemumgehung wurde gefunden. Wenn Sie "ng Build-Prod --base-href student" eingeben, wird die Basis-Href auf student gesetzt.

Jetzt bin ich auf ein neues Problem gestoßen. Auf der Standardseite sollte der Inhalt der Route "app-home" angezeigt werden. Das Starten der App gibt mir jedoch Folgendes:

enter image description here

Beide Routen/Links funktionieren jedoch einwandfrei. Wenn Sie beispielsweise auf "Über uns" klicken, wird die URL in " http: // localhost: 82/student/student/app-about-us " geändert und der entsprechende Inhalt angezeigt.

Ich bin mir ziemlich sicher, dass ich ein Problem mit meinem Routing habe. Bitte helfen Sie mir, das Routing so einzustellen, dass die Anwendung unter ' http: // localhost: 82/student ' mit den Unter-URLs ausgeführt werden kann ' http: // localhost: 82/student/student/app-home '(Standardeinstellung) und' 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>
9
Tahniat Ashraf

Verwenden Sie diese Option zum Erstellen eines Builds 

ng build --base-href .

base href funktioniert überall.

Siehe Beispiel, wo ich auf xampp gehostet habe:  enter image description here

9
Parth Ghiya

Standard Host - ng build --base-href http://www.yourwebsitehere.com/. Denken Sie daran, sich an den nachgestellten Schrägstrich zu erinnern

NodeJS Host - ng build. Stellen Sie jedoch sicher, dass Sie Ihren NodeJS-Server ordnungsgemäß einrichten

2
mast3rd3mon

Ich denke, das Problem liegt im Kontextpfad Ihrer Anwendung. Erstellen Sie einen Dienst, der den Anwendungskontext Ihrer Anwendung abruft, und hängen Sie diesen Kontextpfad an Ihre Routenpfade an. Dadurch könnte das Problem gelöst werden.

0
raj240