How to Properly Include an Angular App inside a PHP application

Question

Let's say I'm starting with a PHP application. On one of the pages on the site, there's a complex interactive app that I want to use Angular for. The problem is, I still want the header and footer of that page to match the rest of the site. I would love to be able to do something like this:

// main-template.php
<html>
    <head>
        <title>My Site-wide Header</title>
        <script src="site-wide-script.js"></script>
        <link href="site-wide-styles.css" rel="stylesheet">
        <?php if ($somevar == true) : ?>
            <?php echo "Yes, it has to be PHP"; ?>
        <?php endif; ?>
    </head>
    <body>
        <header>
            <ul>
                <li><a href="/home">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </header>

        <!-- Drop entire Angular application here -->

    </body>
</html>

It somewhat works for me to just PHP include the Angular HTML file there, but that's pretty janky because, of course, the Angular index.html file already includes a html, body, etc. tags. Of course I could DOM parse the Angular file and fix all that before including...but I'd prefer a better solution.

In my searching I can't seem to find any officially recommended way of doing this. Actually I can't seem to find any examples of anyone doing this at all–all my searches just turn up people doing something similar with AngularJS, not Angular. Is there any decent way to accomplish this with Angular?

I don't love that solution due to (1) iframes not respecting content size unless you use JS, (2) it causes the Angular app URL to be hidden. — Pete
– Pete, Commented Nov 2, 2018 at 19:18
You can try removing everything from index.html apart from the <app-root> tag before building the angular app. Seems to build okay — user184994
– user184994, Commented Nov 2, 2018 at 19:21
@user184994, I would like this solution a lot...but as soon as I remove the <body> tag from index.html, ng build starts putting the script tags at the top of the built index.html, resulting in runtime errors. Is there any way to customize where the Angular scripts are inserted during build? — Pete
– Pete, Commented Nov 2, 2018 at 19:37

ivanivan · Accepted Answer · 2018-11-02 19:41:35Z

6

You should be able to do what you want to do.

Here's the content of a index.html for a web based chat program I did as a HW project (the back end was much more fun...).

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>crap chat</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="bootstrap.min.css" rel="stylesheet" />
    </head>
    <body class="m-a-1">
    <?php print("Hello World ".date("r",time())."<br />\n"); ?>
    <app></app>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

As long as you keep the same js file references and style sheets, styles (on <body> tag) etc. then you should be able to drop that in and toss in the <app></app> tag set just where you want it.

Just for giggles I renamed the file to index.php on my server, added a print statement to print date/time page was loaded, no issues.

answered Nov 2, 2018 at 19:41

ivanivan

2,2252 gold badges14 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pete Over a year ago

I like where you're going with this, but the problem is that if I run ng build --prod, all of the source files get file names like main.bc90171935f6ba7976ea.js. With the random string of characters, it would be difficult/impossible to include the proper assets in my PHP template without having to update the srcs every time I do a production build of my Angular app, which doesn't seem ideal.

user184994 Over a year ago

You can set "outputHashing" to "none" in angular.json, which removes the suffix

Pete Over a year ago

@user184994 Nice! I didn't realize that. Thanks for saving the day!

Jakub Judas · Accepted Answer · 2018-11-02 19:52:13Z

2

As of angular6, this should be possible using angular elements.

Your code would then simply be

// main-template.php
<html>
  <head>
      <title>My Site-wide Header</title>
      <script src="site-wide-script.js"></script>
      <link href="site-wide-styles" rel="stylesheet">
      <?php if ($somevar == true) : ?>
          echo "Yes, it has to be PHP";
      <?php endif; ?>
  </head>
  <body>
      <header>
          <ul>
              <li><a href="/home">Home</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/contact">Contact</a></li>
          </ul>
      </header>
      <your-component-name></your-component-name>
  </body>

You can find a guide on how to create angular elements at https://angular.io/guide/elements - in principle, it is no harder than just creating a component

edited Nov 2, 2018 at 19:52

answered Nov 2, 2018 at 19:23

Jakub Judas

7876 silver badges16 bronze badges

4 Comments

Patrick Q Over a year ago

Unless you're going to show how to do it, this should be a comment.

Jakub Judas Over a year ago

I disagree. The question is very broad and so is the answer. Creating an angular element is well documented so posting it in the answer will only create clutter.

Patrick Q Over a year ago

Disagree all you want. If you feel that a question is too broad to provide a proper answer, then you should vote/flag to close it as Too Broad.

Jakub Judas Over a year ago

If the question is simple, a simple answer is often the best.

lokilein · Accepted Answer · 2021-08-27 12:14:01Z

As someone might still come across this issue (like me), I want to share my solution:

As we are currently changing from a pure PHP page to an Angular approach, we need to include some basic php-stuff in the head of the index file of the Angular build process. Therefore, I added a postbuild-Step, which will automatically run after the build-step.

However, this step is running a node.js script which simply adds the php include we need in the index.php of the dist-Folder

const fs = require('fs');
const path = require('path');

const sourceDir = path.join('dist', 'path');
const phpTag = "<?php include_once './some.php' ?>\n";

const file = path.join(sourceDir, 'index.php');
fs.readFile(file, 'utf8', function (err, content) {
    if (err) throw err;

    if (!content.startsWith(phpTag)) {
        content = phpTag + content;

        fs.writeFile(file, content, 'utf8', function (err) {
            if (err) throw err;
        });
    }
});

and these are the entries of my package.json:

"scripts": {
    "build": "ng build",
    "postbuild": "node ./addPHPTag.ts",

Collectives™ on Stack Overflow

How to Properly Include an Angular App inside a PHP application

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related