如何正确地将 Angular index.html 文件替换/重命名为 index.php？

Question

In my Angular project, I need to use PHP in index.html file.在我的 Angular 项目中，我需要在 index.html 文件中使用 PHP。 I already renamed it to index.php and updated angular.json to use index.php in index property.我已经将它重命名为 index.php 并更新了 angular.json 以在 index 属性中使用 index.php。

My problem is, after running ng build command, the PHP codes in the generated index.php file in dist directory are commented.我的问题是，运行ng build命令后，dist 目录下生成的 index.php 文件中的 PHP 代码被注释掉了。

<!--?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?是否有我需要更新或指定的配置以便 PHP 代码不会被注释？ I am using Angular 12. This is working fine in my existing Angular projects using Angular 7.我正在使用 Angular 12。这在我使用 Angular 7 的现有 Angular 项目中运行良好。

Answer 1

This behaviour seems to be a bug.这种行为似乎是一个错误。 It's caused by a CSS optimizer.它是由 CSS 优化器引起的。 Disabling the inlineCritical fixes the issue (see https://angular.io/guide/workspace-config#styles-optimization-options ).禁用inlineCritical解决问题（请参阅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.重要的是要注意构建时间的差异，这表明被禁用的优化不是一项简单的任务。

如何正确地将 Angular index.html 文件替换/重命名为 index.php？

问题描述

1 个解决方案

解决方案1
1 2022-06-15 19:49:53

如何正确地将 Angular index.html 文件替换/重命名为 index.php？

问题描述

1 个解决方案

解决方案1 1 2022-06-15 19:49:53

解决方案1
1 2022-06-15 19:49:53