[Tomcat]Angular App URL접근이나 새로고침 시 404에러 뜰때.

https://stackoverflow.com/questions/46299430/deploy-angular-application-on-apache-tomcat-404-deep-links-issue

'ng build'한 후 톰켓에 빌드한 파일을 배포하였는데

url로 angular에서 routing한 path를 접근하거나, 새로고침을 했을때 404에러가 발생하는 문제가 발생했다.

때문에 404에러페이지를 생성했고, 

요청한 url을 분기처리하여 angular에 접근하려는경우 angularApp에 해당접근path를 파라메터로 던지도록 했다.

접근path를 넘겨받은 angularApp에서는 라우팅처리를 하도록 하여, 페이지에 정상 접근하도록 설정했다.

web.xml

<!--JAVA WebApp lication Web.xml-->
<error-page>
    <error-code>404</error-code>
    <location>/common/error.jsp</location>
</error-page>

/common/error.jsp

 - /mobile에 'ng build'된 파일을 배포하였음.(localhost:8080/mobile)

 - 넘어갈 path를 파라메터로 던짐.

<script src="<%=jsPath%>/jquery-1.7.2.js"></script>
<script>
$(document).ready(function(){
    var mobileUrl = "/mobile/index.html";
    var contextPath = "/mobile/";
    var currUrl = location.href;
    if(currUrl.indexOf( contextPath )>-1){
        location.href = mobileUrl + "?path=" + currUrl.substring(currUrl.indexOf( contextPath ) + contextPath.length);
    } else {
        $("body > table").show();
    }
});
</script>

app.module.ts에 PageNotFoundComponent(404에러) 컴포넌트를 생성했다.

const appRoutes: Routes = [
  {path:'', component:ApprovalListComponent, canActivate : [AuthGuard] },
   .......
  {path:'**', component:PageNotFoundComponent},
];

PageNotFoundComponent에서 URL Parameter에 path가 있는경우, 이동시키도록 설정

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-page-not-found',
  templateUrl: './page-not-found.component.html',
  styleUrls: ['./page-not-found.component.css']
})
export class PageNotFoundComponent implements OnInit {
 
    constructor(
            private activatedRoute: ActivatedRoute,
            private router:Router
      ) { }
 
      ngOnInit() {
          const path = this.activatedRoute.snapshot.queryParams['path'];
          if(path){
              this.router.navigate([path]);
          }
      }
 
}
 

처음 시도했던 방법(guard에다가 path값얻어서 navigate처리... 또는 app.component.ts에 처리?)

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Router, ActivatedRoute } from '@angular/router';
import { ApiService } from '../service/api.service';
import $ from 'jquery/dist/jquery';
declare var $: $;
 
@Injectable()
export class AuthGuard implements CanActivate {
  
  constructor(
    private activatedRoute: ActivatedRoute, 
    private apiService:ApiService,
    private router:Router
  ) { }
  
  canActivate(
    next: ActivatedRouteSnapshot,
//    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    state: RouterStateSnapshot): boolean {
        
      this.apiService.sessionCheck().then((rtn_code)=>{
        const path = this.activatedRoute.snapshot.queryParams['path'];
        if(rtn_code!="SUCCESS"){
          location.href = "/login.do";
        } else if(path){
          this.router.navigate([path]);
        }
      });
      setTimeout(function(){
        $("footer").css("position", "absolute");
      },300);
    
      return true;
  }
}