Angular – Routing reload 404 error

目前是利用繼承 OncePerRequestFilter 並覆寫 doFilterInternal 的方式來修正:

public class Html5ModeUrlSupportFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response,
            FilterChain filterChain) throws ServletException, IOException {
        if (isStatic(request) || isApi(request)) {
            filterChain.doFilter(request, response);
        } else {
            request.getRequestDispatcher("/index.html").forward(request, response);
        }
    }

    private boolean isApi(HttpServletRequest request) {
        return request.getRequestURI().indexOf("/api/") >= 0;
    }

    private boolean isStatic(HttpServletRequest request) {
        return Pattern.matches(".+\\.((html)|(css)|(js)|(map))$", request.getRequestURI());
    }
}

若非 api request 也非靜態資源 request,則皆導到 index.html 來處理

 

 

 

Angular – Routing reload 404 error

Angular – Component Lifecycle

Angular 會管理 component 的 整個 lifecycle,也提供了 component lifecycle hook 讓使用者可以在這些時間點加入我們自己的作業。

  • Directives 和 components 皆有的 hook:ngOnInit、ngOnChanges、ngDoCheck、ngOnDestroy
  • 只有 components 有的 hook:ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked

Component life cycle hook 的順序如下:

1.ngOnChanges – 在 ngOnInit 之前,當綁定的輸入屬性的值發生變化時

2.ngOnInit – 在首次 ngOnChanges 後

3.ngDoCheck – 每次 change detection cycle 時

4.ngAfterContentInit

5.ngAfterContentInit

6.ngAfterContentChecked

7.ngAfterViewInit

8.ngAfterViewChecked

9.ngOnDestroy

參考資料來源

Angular – Component Lifecycle

Angular – ngOnInit vs constructor

在 angular component 中,可以使用 ngOnInit 和 constructor 來做初始化的動作,兩者的差別在於:

constructor 是 class 初始化時 default 執行的 method,而 ngOnInit 是 angular life cycle hook 的其中一部分,執行的時間是 constructor 和首次 ngOnChanges 之後

EX :

export class App implements OnInit {
  
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor and called  after the first ngOnChanges() 
  }
}

所以建議的方式為:使用 constructor 來做 dependency injection 的設定,其他實際要執行的初始化作業則都放在 ngOnInit 中執行。

 

 

Angular – ngOnInit vs constructor