如何使用 Angular appShell 构建添加子资源完整性答案

【问题标题】：How to add subresources integrity with Angular appShell build如何使用 Angular appShell 构建添加子资源完整性
【发布时间】：2020-09-13 09:48:20
【问题描述】：

我使用 Angular CLI 9 构建了一个应用程序。我修补了package.json 文件：

{
  "scripts": {
    "build:prod": "ng build --prod --subresource-integrity",
    "prebuild:prod": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' ts-node ./sitemap_generator.ts"
  }
}

所以，当我调用npm run build:prod 时，我的 2 个命令被执行并且编译器生成的输出文件包含 SRI。

现在，我添加了 appShell：

npm run ng generate appShell -- --client-project my-project

要运行构建 appShell，我必须使用命令：

npm run ng run my-project:app-shell:production

主要问题

但是这个命令调用angular.json文件的my-project:build:production配置，这个不接受--subresource-integrity参数：/

如何修补此问题以使 appShell 生产构建与 SRI？

第二个问题勇敢者

此 appShell 构建在 dist/ 中创建一个 server/ 文件夹。它只包含一个main.js 文件。我想它是在内部与 Node 一起使用来构建 appShell 的；有人可以确认吗？那么，我可以使用 Unversal 和这个架构来为搜索引擎做一些 SSR 吗？

谢谢！

【问题讨论】：

标签： build server-side-rendering app-shell angular-cli-v9

【解决方案1】：

好的，我通过编辑 angular.json 找到了一种方法：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "my-project",
  "projects": {
    "oce-training": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "subresourceIntegrity": true,
            }
          }
        }
      }
    }
  }
}

因此，我们不能覆盖 package.json 或通过 CLI 命令，但对于我的情况来说已经足够了。

现在我在package.json:

{
  "scripts": {
    "build:prod": "ng run oce-training:app-shell:production",
    "prebuild:prod": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' ts-node ./sitemap_generator.ts"
  },
}

我关于 SSR 的问题得到了保留，但它可能是另一个 Stackoverflow 帖子；）

【讨论】：