How to inject angular plugin into IdentityIQ page?

IdentityIQ (IIQ) IIQ Discussion and Questions
,
1

Which IIQ version are you inquiring about?

8.4p2

I have only seen examples where a user clicks on a link, and it loads an angular plugin into view as the full page. Are there any examples of injecting an angular plugin into an existing page to add to it?

What I would like to do is modify or replace the view when I browse to Manage Identity → View Identity → Click Manage button on one of the identity cards → Click Forwarding.

Can someone please provide an example of how to do for the following;

  1. Use angular plugin to add content to an existing page in IdentityIQ.
  2. Use angular plugin to replace a page in IdentityIQ.

Thanks

2

I was able to inject my angular plugin into an existing page by just injecting the element <app-root></app-root> into the page. I will make this element more unique, so I don’t run into an issue when we make more plugins in the future. I assume I would do the same plus hide all of the contents I don’t want seen, to mimic loading the entire page to replace an existing page?

3

Hey @balza - I think you are on the right track. I usually see the links like you mentioned but existing pages are a little intimidating and I think people steer clear of that. Glad you got it to work.

1 Like
4

It turns out my original method of injecting <app-root></app-root> was not actually working correctly, entirely.

I also had to inject the scripts and links to css files, similar to what the page.xhtml page is using from the examples I have seen. Without this, adding any components or new HTML elements to the app.component.html will result in your changes not showing up.

Now my current issue which I believe has to do with the Angular plugin’s routing, is when I inject my angular code and scripts (specifically main.js) into a page in IdentityIQ, I am immediately redirected to the root address of the server. When I figure this out, I will post an update.

5

To resolve the automatic redirecting issue, I just had to remove the following lines from the app.config.ts file.

import { routes } from './app.routes'; //Remove this

//Remove the following from the providers:[]
provideRouter(routes)