Answered

How to integrate an angular app into portal?

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

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.

Categories:

Power Apps portals

I have the same question (0)

All responses (4)

Answers (1)

Sort by

OOlashyn 3,498 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

Hi @Anonymous,

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

Was this reply helpful? Yes No
justinburch Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!
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>

Was this reply helpful? Yes No
Verified answer

Community Power Pla... Microsoft Employee on at

Like (1)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No