Answered

How to integrate an angular app into portal?

(0) Share

Report

Posted on by Community Power Pla...

I have developed an angular 9 app. After production build it has produced several files like 5 JavaScript files, two css files and a html file.

Now I want to integrate this app into my portal app.

I have attached all js files from portal manager into a single web file as notes.

I have attached two css files from portal manager into a single css file as notes.

Added

Content Snippet -> Tracking Code -> Value:

Added the html code:

<app-root></app-root>

in the home page using studio editor

but no output is rendering.

All responses (4)

Answers (1)

ragavanrajan 7,036 Most Valuable Professional on at

Like (0)

Report

Re: How to integrate an angular app into portal?

Hi @justinburch and @Anonymous ,

Thank you for this. I am getting an error when I try to upload my build files under "Web Files" Note attachment.

I have few JS file with extension.js created when the build was completed. But I created new web file and trying to upload. Kindly let me know how to proceed further.
Verified answer

Community Power Pla... on at

Like (1)

Report

Re: How to integrate an angular app into portal?

Thanks @justinburch , I already have resolved the issue making individual files for all of them then added them as script tags. It works fine.
justinburch Microsoft Employee on at

Like (0)

Report
Re: How to integrate an angular app into portal?

Hi @Anonymous,
When you say you attached all generated JS files as Notes in a single Web File, do you mean multiple attachments or combined all JS into a single attachment? The Portal will only use the latest Note attachment of a Web File. You should have a Web File for each generated file and use script tags to include each. The new Dynamics Marketing app is a great example of what to do, as it's sample website is built on Angular (albeit a much older version).
https://docs.microsoft.com/en-us/dynamics365/marketing/developer/manually-overwriting-sample-website has the import solutions for the latest versions.
Here is their single page app Template, note that you will need to adjust to fit your needs:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Event Management</title> <base href="/"> <meta name="token" content="{{ request.params['__RequestVerificationToken'] }}"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="eventmanagementapp/styles.css"> </head> <body> <app-root></app-root> <script type="text/javascript" src="eventmanagementapp/runtime.js"></script><script type="text/javascript" src="eventmanagementapp/polyfills.js"></script><script type="text/javascript" src="eventmanagementapp/scripts.js"></script><script type="text/javascript" src="eventmanagementapp/main.js"></script> </body> </html>
OOlashyn 3,496 Most Valuable Professional on at

Like (0)

Report

Re: How to integrate an angular app into portal?

Hi @Anonymous,

Please see this article from Inogic where they show an example of using angular with the portal.