Now and then I find myself reading StackOverflow questions like “how to expand a JSF project with Angular pages” or “how to create a plugin for WordPress out of Angular”. The answer to those questions is the same and implementing such a solution is elementary enough so that it is the first thing that comes into mind, nevertheless I decided to post a step by step explanation in my blog for those who just want to make sure.
First of all, if you don’t have a seperate backend, the idea of an Angular – Other Tech hybrite is not a good one. Think about having an Angular application inside your JSF that facilitates it’s business logic by using backing bean classes. Getting the Angular talk to backing beans will require hacky solutions that you will regret to have later. That case will not be discussed in this post untill I get the chance to edit and update the post. It is not a wise path to follow already.
The main idea is having the Angular application served under the same project you already have (wordpress, jsf, what ever tech it is) An angular application is a static web content, nothing more. That’s why serving the Angular application is the easiest part. Let’s say you want your Angular application to be accessible here:
http://localhost:8080/myjsfapp/angular/index.html.
What you need to do is;
- Build your Angular project with the same context-path as your jsf context-path plus a name for your angular folder, like this:
ng build --prod --base-href "/myjsfapp/angular/"
--deploy-url "/myjsfapp/angular/"- In your jsf project create a folder named angular inside your webapp folder and place your angular distrubution files inside it
After having done the steps above, your Angular application will be available here /myjsfapp/angular/index.html path.
However accessing the different pages inside your Angular application will require more attention. An Angular application consists of only one html file namely index.html. All the different pages you see are actually logically served at runtime inside the same index.html. That’s why when you try to access one of your pages, let’s say users page, your server will kick in and search for a physical /users.html page and return an http 404. To handle this you can set redirection rules or pick the easiest way that is hash-location strategy. Using hash-location strategy in your Angular application is done easily by adding {useHash:true} configuration in forRoot call. (If you go with this strategy this should be the first step to do)
@NgModule({
imports: [ RouterModule.forRoot(routes, {useHash: true})],
...
})
This way your Angular pages will be accessible with hashed URLs throughout your jsf application. For example, if you want to forward to a users page, just forward to http://localhost:8080/myjsfapp/angular/index.html#users
You must keep in mind that you need to handle the security for your new client application too. If it is not going to call any kind of backend then you are good to go without any additional security implementations, if it is then you should integrate your backend’s security solution. If there is none already, you better implement one. OAuth2 for example.
talhature.com 