How can I properly replace/rename Angular index.html file to index.php?

Question

In my Angular project, I need to use PHP in index.html file. I already renamed it to index.php and updated angular.json to use index.php in index property.

My problem is, after running ng build command, the PHP codes in the generated index.php file in dist directory are commented.

<!--?php
$websiteCode = getenv('SITE_CODE');
?--><!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>ClientPortal</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.31d6cfe0d16ae931b73c.css"></head>
<body>
  <!--?=$websiteCode?-->
  <app-root></app-root>
<script src="runtime.f3b55109ab97bda870bd.js" defer></script><script src="polyfills.a58f45ef9ccddb12523d.js" defer></script><script src="main.6629fcd1d3960ef0deb9.js" defer></script>

</body></html>

Is there a configuration I need to update or specify so that PHP codes will not be commented? I am using Angular 12. This is working fine in my existing Angular projects using Angular 7.

Does this answer your question? Angular 2 CLI - php for index file instead of html file — Greg
– Greg, Commented Jun 17, 2021 at 9:04
@Grzegorz, unfortunately no. it works by renaming the file, but the PHP codes in the output index.php file are commented — PrinceG
– PrinceG, Commented Jun 17, 2021 at 9:10
Please read the linked thread carefully @PrinceG, it says there's no way ng serve (and I think ng build would have the same limitations for the same reasons) to work with PHP. You need to pass those server side data to your angular app in a different way. — Greg
– Greg, Commented Jun 17, 2021 at 9:35
i solved it by setting "optimization": {"styles": {"inlineCritical": false}}. — PrinceG
– PrinceG, Commented Jun 18, 2021 at 0:50
@PrinceG can you share what configuration you made to angular.json file to run php code in angular — sinan
– sinan, Commented Dec 30, 2022 at 10:42

asiby · Accepted Answer · 2022-06-15 19:49:53Z

This behaviour seems to be a bug. It's caused by a CSS optimizer. Disabling the inlineCritical fixes the issue (see https://angular.io/guide/workspace-config#styles-optimization-options).

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "fubar": {
      "projectType": "library",
      ...
    },
    "acme": {
      "projectType": "application",
      "schematics": { ... },
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              ...
              "optimization": {  <-- ADDING THIS HAS SOLVED THE ISSUE FOR ME.
                "styles": {
                  "inlineCritical": false
                }
              }
            },
            "development": {
              ...
            }
          },
          "defaultConfiguration": "..."
        },
        "serve": {
          ...
        },
        "extract-i18n": {
          ...
        },
        "test": {
          ...
        }
      }
    }
  },
  "defaultProject": "acme"
}

It's important to note the difference in build time which indicate that the optimization that got disabled was not a trivial task.

Collectives™ on Stack Overflow

How can I properly replace/rename Angular index.html file to index.php?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related