Prototyping IIQ plugins in Angular, or how to turn your Angular app into a plugin

Content Video Library
, ,
1

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.

7 Likes
2

So excited to try from my end as well. Is there a way to get those artifacts used during presentation ?

4

Here you go!

Let me know how it goes for you!

4 Likes
5

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 . As soon as page loaded URL pointing to http://localhost:8181/ but still page works . Not sure If I missed any config.

6

NVM , I have enabled the routing. That created the problem, url looks good after disabling it.

1 Like
7

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 :wink:

1 Like
8

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:

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET, POST, PUT, DELETE, OPTIONS</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type, Authorization</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
9

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:

{
  "/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:

            "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 :slight_smile:

1 Like
10

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

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'}
    ])
11

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.

1 Like
12

we were able to get the routing working with setting APP_BASE_HREF to window location and use custom HashlocationStrategy routing.

2 Likes
13

I’m thrilled to try it out myself too :airplane: :airplane:

1 Like