logo标签列表

排除生产构建中的资源

angularangular-cli
13

我有一些资产（图像、样式），这些资产仅在开发（ng serve）期间需要。这些资产不得包含在生产构建中，在生产中，这些资产由CDN提供。

我需要：

  • ng serve应服务于包含在文件夹./assets-non-build中的文件

但是：

  • ng build 不应在最终构建中包括文件夹./assets-non-build

我已经阅读了10个类似的问题和5个GitHub上的问题，它们都涉及排除文件，但没有解决我的情况。

你可能需要从angular.json配置中排除你的assets文件夹，你已经移除了吗？ - Pardeep Jain
如果我从 angular.json 中删除它，该资产文件夹中的文件将不再由 ng serve 提供服务（我通过 ajax 请求加载它们）。 - Tobias Gassmann
尚未尝试，但有两个选项，一个是用于构建，另一个是用于服务，因此可能需要根据要求设置它们。 - Pardeep Jain
听起来很有趣！我如何设置构建和服务的选项？ - Tobias Gassmann
4个回答
14

在你的angular.json文件中，有一个名为projects.{project-name}.architect.build.configurations的配置对象。

将prod条目中的assets设置为[]。

"production": {
  //...
  "assets": []
}

虽然未经测试，但从配置文件中所了解的判断，这应该是可行的。

这将使任何使用生产标志进行构建和服务的内容都会排除资产。如果您真的希望所有构建，无论环境如何，都不包括资产，则需要将assets数组从projects.{project-name}.architect.build.options移动到projects.{project-name}.architect.serve.options中，并将其在build中设置为空数组。

但是资产只能在“serve”模式下使用？ - Pardeep Jain
1
当使用"prod"时，它显示："在项目中找不到配置 'production'"。我可以通过将"prod"重命名为"production"来解决这个问题。 - Tobias Gassmann
1
这取决于您如何命名配置，但默认设置是prod :) 这就是我还原它的原因。 - Poul Kruijt
架构师->构建->选项->资产: ["my-dev-only-asset.css"] 将可用于服务。 - Tobias Gassmann
6
在Angular 9或之前版本中（此处为CLI 9.1.1），设置属性projects.{project-name}.architect.serve.options.assets已经不再起作用了。 当运行ng serve时，会输出以下错误信息：Data path "" should NOT have additional properties(assets)。 - rslemos
3
这篇答案介绍了如何在使用 GCP 的 dev + production（使用 angular 12+）中处理大型资产，但是您可以轻松地将此答案适应于其他云或环境。
主要思路：
  • Localhost：使用存储在 src/local-assets/ 本地的资源。Gitignore 此文件夹中的文件（除了可能的 .keep 文件），或者使用 git-lfs 避免将二进制文件污染您的代码库
  • Production：将资源上传到 CDN，并通过 CDN 主机名替换链接

1-设置 Angular 以提供本地资产

Angular 文档参考

这假定您有一些大型或仅限 localhost 的资产位于 src/large-assets 下。我们使用 angular 对象语法使它们在 assets/ 下可用 (还要确保 src/large-assets 被 Gitignore 或在 git-lfs 下)
# angular.json
"projects": {
    "[your-project-name]": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
            "development": {
              "assets": [
                "src/favicon.ico",
                "src/assets",
                {
                  "glob": "**/*",
                  "input": "src/large-assets/",
                  "output": "/assets/"
                }

2-将资产URL与环境相对应

# src/environments/environment.ts
export const environment = {
  ...
  assetsUrl: 'https://localhost:4200/assets/',
  ...
};
# src/environments/environment.prod.ts
const GCP_PROJECT_NAME = 'gcp-project-name';
export const environment = {
  ...
  assetsUrl: `https://storage.googleapis.com/${GCP_PROJECT_NAME}.appspot.com/assets/`,
  ...
};

3 - 设置 Angular 以替换生产环境

# angular.json
"projects": {
    "[your-project-name]": {
     "architect": {
        "build": {
          "configurations": {
            "production": {
             "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],

4 - 在组件中使用
# src/components/mycomponent.ts
import { environment } from './environments/environment';


# src/components/mycomponent.html
<img [src]="environment.assetsUrl + 'images/myimage.jpeg'" alt="alt">

5 - 将本地大型资产上传到CDN以供生产使用

这是一个使用GCP的示例。

gsutil cp -r src/large-assets gs://${GCP_PROJECT_NAME}.appspot.com/
gsutil iam ch allUsers:objectViewer gs://${GCP_PROJECT_NAME}.appspot.com/

如果您需要检索之前上传到您的存储桶中的资产（新开发人员、更换计算机等），请执行以下操作。
gsutil -m cp -r gs://${GCP_PROJECT_NAME}.appspot.com/assets/\* frontend/src/local-assets/
0

附注：代码尚未尝试，但是由于评论过长，因此在此发布为答案。

"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        ....
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                             ...
                        ],
                        "scripts": []
                    }
                    }
                },
                "serve": {
                        "assets": [
                            "src/assets"
                        ],
                }
3
我也尝试了这种方法，因为在“serve”下似乎不允许使用“assets”。但还是谢谢你的帮助！ :-) - Tobias Gassmann
@TobiasGassmann 没关系，但是被接受的答案和我的有些相似吧？ - Pardeep Jain
哈哈，我的运气不好 :P 无论如何，感谢您对已接受答案的评论，现在我有了新的东西 :) - Pardeep Jain
0

看起来Poul Kruijt的答案对于旧版本的Angular是正确的。 在Angular 9中，prod条目对我不起作用。你必须使用production代替。 所以这就是在Angular 9中适用于我的方法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接