web-dev-qa-db-ja.com

angular2ルーティングでアプリケーションコンテキストパスを適切に設定する方法は？

Angle-cli（バージョン：1.0.0-beta.28.3）を使用してAngularプロジェクトを作成しました。 "npm start"を使用してアプリケーションを開発環境で実行すると、アプリケーションは " localhost：4200 "。本番デプロイメントを複製するために、ローカルWAMPでアプリケーションを実行したかったので、「ng build -prod」を実行し、「dist」フォルダーからWAMPのwww/studentディレクトリーにファイルをコピーしました。 WAMPを介してプロジェクトを実行すると、このエラーが発生します：

 enter image description here 

明らかに、アプリケーションは必要なjsファイルを間違った場所で探していました。いくつかの調査を行ったところ、コンテキストルート-私の場合、 'student'はindex.html内の "base href ="/student "に設定する必要があることがわかりました。angular-cliのバグのため、「ng」と入力するたびにビルド-prod '、ベースhrefは「/」にリセットされました。回避策を見つけました;「ng build -prod --base-href student」と入力すると、ベースhrefがstudentに設定されます。

今、私は新しい問題に遭遇しました。デフォルトのページにはルート「app-home」の内容が表示されるはずでしたが、アプリを起動すると次のようになります：

 enter image description here 

ただし、両方のルート/リンクは正常に機能しています。たとえば、「About Us」をクリックすると、URLが「 http：// localhost：82/student/student/app-about-us 」に変更され、適切なコンテンツが表示されます。

ルーティングに問題があると確信しています。 ' http：// localhost：82/student 'でサブURL ' http：// localhost：82/student /を使用してアプリケーションを実行できるように、ルーティングの設定を手伝ってくださいstudent/app-home '（デフォルト）および' 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
12
Tahniat Ashraf

このオプションを使用してビルドを作成します

ng build --base-href .

base hrefはどこでも動作します。

Xamppでホストしている例を参照してください： enter image description here

12
Parth Ghiya

標準ホスト-ng build --base-href http://www.yourwebsitehere.com/。末尾のスラッシュを忘れないでください

NodeJSホスト-ng build。ただし、NodeJSサーバーを適切にセットアップしてください。

2
mast3rd3mon

問題はアプリケーションのコンテキストパスにあると思います。アプリケーションのアプリケーションコンテキストを取得し、このコンテキストパスをルートパスに追加するサービスを作成すると、推測される問題が解決します。

1
raj240