38259


Angular4をTomcat環境で動かそうとしていますが、  
ルーティングで指定したURLにアクセスするとエラーになってしまします。

【手順】  
@angular/cliを使用して、「ng new testApp」を実施して空のアプリを作成しました。  
その後、URLをいくつか用意しました。  
◇app-routing.module.ts

[code]

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    import { TestComponent } from './test.component';
    import { Test2Component } from './test2.component';
    import { Test3Component } from './test3.component';
    
    
    const routes: Routes = [
      { path: '', redirectTo: '/test', pathMatch: 'full' },
      { path: 'test', component: TestComponent },
      { path: 'test2', component: Test2Component },
      { path: 'test3', component: Test3Component },
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }
    
[/code]

ng serve --openコマンドを実施すると、以下のブラウザが開かれ画面が表示されます。  
<http://localhost:4200/test>  
その後、<http://localhost:4200/test2>、[http://localhost:4200/test3にアクセスすると](http://localhost:4200/test3%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B%E3%81%A8)  
その画面が表示されました。

そこで、Tomcat環境に乗せてみようと思い、以下のコマンドでビルドを行いました。  
ng build -prod

distフォルダが作成されたので、それらを以下に配置させてTomcatを実行してみました。  
C:\Program Files\Apache Software Foundation\Tomcat 8.5\webapps\

それだけですとエラーとなってしまったのでdist配下のindex.htmlを以下に変更しています。  
  
↓  

すると、  
[http://localhost:8080/distにアクセスすると](http://localhost:8080/dist%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B%E3%81%A8)、リダイレクトされ、  
[http://localhost:8080/dist/testの画面が表示されることを確認できたのですが](http://localhost:8080/dist/test%E3%81%AE%E7%94%BB%E9%9D%A2%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%81%9F%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8C)、以下にアクセスすると、  
HTTPステータス 404 - /dist/testエラーとなってしまいます。  
<http://localhost:8080/dist/test>  
<http://localhost:8080/dist/test2>  
<http://localhost:8080/dist/test3>

何か設定などが必要なのでしょうか？


CC BY-SA 3.0
2017-09-27T02:20:43.320
38217
2017-09-28T07:16:40.323
2017-09-28T07:16:19.713
12842
12842
question
angular4
Angular4をTomcat環境で動かしたい


これを追加しました。  
@NgModule({  
providers:[  
{provide: LocationStrategy, useClass: HashLocationStrategy}  
]  
})

<https://stackoverflow.com/questions/46001669/blank-page-except-index-html-
with-angular-4-in-tomcat-environment>  
こちらを参考に以下のコマンドでビルドしました。  
ng build --prod --aot=false --output-hashing=none --base-href=/dist/  
その後、webappsへ配置してみると以下へのアクセスで画面表示が可能でした。  
<http://localhost:8080/sample/#/test>  
<http://localhost:8080/sample/#/test2>  
<http://localhost:8080/sample/#/test3>

ただし、URLに「♯」が入ってしましました…。


CC BY-SA 3.0
2017-09-28T07:16:40.323
38259
2017-09-28T07:16:40.323
12842
38217
answer