Search code examples
phphtmlangularangularjs

Integration of an Angular app into index.php by using a tag

I have to embed an Angular app into a index.pxp file by using a specific tag. At the moment, is done by using Angular JS.

The question is independent from the language / system of the host page or other technology.

My goal is, instead that old "app", to put a new "app-ng" and to put a tag which loads that new app-ng into the index.php. How can I do it?

Solution

  • You could use Angular custom elements (web components) to achieve this. I have a blog post about running AngularJS and Angular 17 side-by-side; this post is mostly about sharing state between the two, however, so it's not entirely relevant to your problem.

    Setting up Angular custom elements does take some work, but there's a good explanation here.

    The basic concept is that you would configure the Angular application as a custom element, compile it, and then provide the links to the JS bundles in index.php. Then, you would need to add the tags for your custom element to the index.php as HTML, like so:

      <script src="route-to-your-bundles/polyfills.js" type="module"></script>
  <script src="route-to-your-bundles/main.js" type="module"></script>

  // Other HTML

  <angular18-app></angular18-app>

    I am not a PHP expert, so I don't know if there's a better way to include the JS.