How can I embed an Angular app into a Wordpress page?

Question

I created a finished Angular 7 app that is compiled and working (it is a small game). I want to include it into a page of my Wordpress installation.

1. Where do I put my compile output of the Angular app (the content of the dist folder after running ng build)?
2. How does the HTML code in my Wordpress page (HTML that embeds the Angular app) look like?

Answer 1

I made my solution working with iFrame:

In angular.json I configure for "prod"

"outputHashing": "none"

Then I build my Angular 7 app using the "prod" configuration:

ng build --prod

I copy the build output (usually $PROJECT_DIR/dist) into a sub directory "angular-app" inside the "wp-content" directory of my wordpress page.

Now the index.html of the Angular app needs a modification. Change

<base href="/">

to

<base href="/wp-content/angular-app/">

Notice that the trailing / in the base href path is absolutely necessary. It will not work without it.

On the target page of my wordpress installation I insert this custom HTML code:

<iframe id="angularFrame" title="My Angular App" frameBorder="0"
    src="http://wordpress-url.com/wp-content/angular-app/index.html" 
    width="600" height="600">
</iframe>

This displays my angular app on a wordpress page.