# Prototyping IIQ plugins in Angular, or how to turn your Angular app into a plugin **URL:** \ **Category:** Video Library\ **Tags:** developer-days, developer-days-2024-iiq, identityiq\ **Created:** [March 25, 2024, 4:02pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641 "2024-03-25T16:02:18Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![wimvandijck](https://sea1.discourse-cdn.com/sailpoint/discuss/user_avatar/developer.sailpoint.com/wimvandijck/32/24103_2.png) [@wimvandijck](https://developer.sailpoint.com/discuss/u/wimvandijck)\ **Post date:** [March 25, 2024, 4:02pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/1 "2024-03-25T16:02:18Z")
[![](https://global.discourse-cdn.com/sailpoint/original/2X/9/947b4271535c32fcd7977c8be95380181e5eebcf.jpeg "Prototyping IIQ plugins in Angular, or how to turn your Angular app into a plugin") ](https://www.youtube.com/watch?v=Rbt3del8vWU) # Description IdentityIQ continues to grow in its usage of the popular front-end framework, Angular. In the end, Angular just creates Javascript and your IIQ plugins leverage that javascript. We’ll use what expertise we have to create Angular apps, to create wonderful IIQ plugins. ---
**Author:** ![jayaram\_theeda](https://sea1.discourse-cdn.com/sailpoint/discuss/user_avatar/developer.sailpoint.com/jayaram_theeda/32/14303_2.png) [@jayaram\_theeda](https://developer.sailpoint.com/discuss/u/jayaram_theeda)\ **Post date:** [April 15, 2024, 7:02am UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/2 "2024-04-15T07:02:31Z")
So excited to try from my end as well. Is there a way to get those artifacts used during presentation ? ---
**Author:** ![wimvandijck](https://sea1.discourse-cdn.com/sailpoint/discuss/user_avatar/developer.sailpoint.com/wimvandijck/32/24103_2.png) [@wimvandijck](https://developer.sailpoint.com/discuss/u/wimvandijck)\ **Post date:** [April 15, 2024, 5:17pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/4 "2024-04-15T17:17:29Z")
Here you go! > **[GitHub - wim-vandijck-sp/advancedForwarding: Example plugin of an Angular app...](https://github.com/wim-vandijck-sp/advancedForwarding/tree/main)** > > main Let me know how it goes for you! ---
**Author:** ![jayaram\_theeda](https://sea1.discourse-cdn.com/sailpoint/discuss/user_avatar/developer.sailpoint.com/jayaram_theeda/32/14303_2.png) [@jayaram\_theeda](https://developer.sailpoint.com/discuss/u/jayaram_theeda)\ **Post date:** [April 19, 2024, 9:16am UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/5 "2024-04-19T09:16:11Z")
Thank you so much. It helped me to get into the things quickly but I got some issue related URL. Plugin successfully landing of home page i.e., [http://localhost:8181/identityiq\_WD\_NEW/plugins/pluginPage.jsf?pn=newOne](http://localhost:8181/identityiq_WD_NEW/plugins/pluginPage.jsf?pn=newOne) . As soon as page loaded URL pointing to [http://localhost:8181/](http://localhost:8181/) but still page works . Not sure If I missed any config. ---
**Author:** ![jayaram\_theeda](https://sea1.discourse-cdn.com/sailpoint/discuss/user_avatar/developer.sailpoint.com/jayaram_theeda/32/14303_2.png) [@jayaram\_theeda](https://developer.sailpoint.com/discuss/u/jayaram_theeda)\ **Post date:** [April 19, 2024, 2:58pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/6 "2024-04-19T14:58:19Z")
NVM , I have enabled the routing. That created the problem, url looks good after disabling it. ---
**Author:** ![wimvandijck](https://sea1.discourse-cdn.com/sailpoint/discuss/user_avatar/developer.sailpoint.com/wimvandijck/32/24103_2.png) [@wimvandijck](https://developer.sailpoint.com/discuss/u/wimvandijck)\ **Post date:** [April 19, 2024, 3:00pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/7 "2024-04-19T15:00:49Z")
Indeed! I was just about to suggest that. The plugin framework also uses routing, so you have to be careful enabling that. Thanks for updating. This might make for a useful addition 😉 ---
**Author:** ![caiohatoum](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@caiohatoum](https://developer.sailpoint.com/discuss/u/caiohatoum)\ **Post date:** [June 27, 2024, 2:34pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/8 "2024-06-27T14:34:22Z")
Hello, im developing a new plugin using angular, but in my case, my iiq development instance is not running locally, when im serving my angular app locally im getting a cors error. will i have to include a config in web.xml? i tried to include this config bellow within the iiq instance web.xml, but i still having trouble with cors: ```auto CorsFilter org.apache.catalina.filters.CorsFilter cors.allowed.origins * cors.allowed.methods GET, POST, PUT, DELETE, OPTIONS cors.allowed.headers Content-Type, Authorization CorsFilter /* ``` ---
**Author:** ![wimvandijck](https://sea1.discourse-cdn.com/sailpoint/discuss/user_avatar/developer.sailpoint.com/wimvandijck/32/24103_2.png) [@wimvandijck](https://developer.sailpoint.com/discuss/u/wimvandijck)\ **Post date:** [July 9, 2024, 3:10pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/9 "2024-07-09T15:10:23Z")
Hi Caio! Excited to see you try it out. That’s a known issue/feature with local Angular development. It’s actually a security feature, but quite annoying when you’re developing locally. To get around this, you can instruct Angular to set up a proxy so that these requests are being sent from the angular server instead of the browser. To do this, create a `proxy.conf.json` file in the root of your angular app (so the subdirectory inside the plugin folder), with these contents: ```json { "/identityiq": { "target": "http://localhost:8080", "secure": false, "changeOrigin": true, "logLevel": "debug" } } ``` Then, instruct Angular to use this proxy config, by adding the following in the `angular.json` file: ```json "development": { "browserTarget": "pluginapp:build:development", "proxyConfig": "proxy.conf.json" } ``` Inside, the `angular.json` file, this should go in the `projects.pluginapp.architect.serve.configurations.development` section. So you’re telling Angular: - when running in development mode, - when serving the app - when clicking on any link that goes to `/identityiq` then, instead of having the browser do that, make sure that it looks like it’s coming from the app and not directly from the browser, and forward it to `http://localhost:8080`. Make sure to adjust the url for your local dev setup, if you use a different port. Hope this helps 🙂 ---
**Author:** ![SReddy\_IAM](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@SReddy\_IAM](https://developer.sailpoint.com/discuss/u/SReddy_IAM)\ **Post date:** [July 12, 2024, 3:53pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/10 "2024-07-12T15:53:10Z")
Hi @wimvandijck Im building a plugin with multiple components and using Angular routing to navigate pages. Routing works when I do an ‘ng serve’ but when I deploy it to IIQ, it just shows Page Not Found. Do you have any examples on how to correctly setup routing? Here’s a snippet of the routing in app.module.js ```auto RouterModule.forRoot([ {path: 'home', component: HomeComponent}, {path: 'search-role', component: SearchRoleComponent}, {path: 'create-role', component: CreateRoleComponent}, {path: 'modify-role', component: ModifyRoleComponent}, {path: 'delete-role', component: DeleteRoleComponent}, {path: 'view-role/:id', component: ViewRoleComponent}, {path: '', redirectTo: '/home', pathMatch: 'full'} ]) ``` ---
**Author:** ![wimvandijck](https://sea1.discourse-cdn.com/sailpoint/discuss/user_avatar/developer.sailpoint.com/wimvandijck/32/24103_2.png) [@wimvandijck](https://developer.sailpoint.com/discuss/u/wimvandijck)\ **Post date:** [July 15, 2024, 8:08pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/11 "2024-07-15T20:08:45Z")
Hi Somsith, I haven’t played around with routing much. I have a suspicion it’s possible that the angular framework of the plugin framework itself somehow takes precedence over the plugin’s routing. Hopefully I get a chance to look at this soon… I’ll keep you posted. ---
**Author:** ![chaitanyav](https://avatars.discourse-cdn.com/v4/letter/c/f475e1/32.png) [@chaitanyav](https://developer.sailpoint.com/discuss/u/chaitanyav)\ **Post date:** [August 15, 2024, 3:13pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/12 "2024-08-15T15:13:48Z")
we were able to get the routing working with setting APP\_BASE\_HREF to window location and use custom HashlocationStrategy routing. ---
**Author:** ![amahlemohlokonya](https://sea1.discourse-cdn.com/sailpoint/discuss/user_avatar/developer.sailpoint.com/amahlemohlokonya/32/15504_2.png) [@amahlemohlokonya](https://developer.sailpoint.com/discuss/u/amahlemohlokonya)\ **Post date:** [August 23, 2024, 11:48am UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/13 "2024-08-23T11:48:29Z")
I’m thrilled to try it out myself too ✈ ✈ ---
**Author:** ![alex4all](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@alex4all](https://developer.sailpoint.com/discuss/u/alex4all)\ **Post date:** [April 29, 2025, 1:29pm UTC](https://developer.sailpoint.com/discuss/t/prototyping-iiq-plugins-in-angular-or-how-to-turn-your-angular-app-into-a-plugin/37641/15 "2025-04-29T13:29:46Z")
Angular 15 is no longer supported. NodeJS 18 (compatible with Angular 15) is also no longer supported. It may cause security issues which is not very good for application primarily focused on security and access management “Latest version might be not compatible with what been used inside Sailpoint” - I don’t really understand the meaning of this sentence. What is the officially supported version of Angular? In official documentation it is only mentioned that some UI components are migrated to Angular 15 Do you have plans to ensure compatibility of Sailpoint with Actively supported versions of Angular? At this moment Angular actively support versions starting from 17.0