在应用程序中使用 Angular 库中的资源

Question

我正在使用 Angular 8 并且我有一个单独的应用程序，它有自己的 CSS 样式和资产。我想将库组件嵌入到主应用程序中，如

<lib-landing-page-preview></landing-page-preview>

目录结构为

库资产位于 /projects/landing-page-preview/src/assets 中，其中 style.scss 是 scss 目录中的主要 CSS 文件。

根 angular.json 文件已更新

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    ... // main application project
    "landing-page-preview": {
      "projectType": "library",
      "root": "projects/landing-page-preview",
      "sourceRoot": "projects/landing-page-preview/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/landing-page-preview/tsconfig.lib.json",
            "project": "projects/landing-page-preview/ng-package.json",
            "assets": [
              {
                "glob": "*/*",
                "input": "projects/landing-page-preview/src/assets",
                "output": "src/assets"
              }
            ]
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/landing-page-preview/src/test.ts",
            "tsConfig": "projects/landing-page-preview/tsconfig.spec.json",
            "karmaConfig": "projects/landing-page-preview/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/landing-page-preview/tsconfig.lib.json",
              "projects/landing-page-preview/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }},
  "defaultProject": "qcg-frontend"
}

在开发过程中，我正在使用以下命令构建库

ng build landing-page-preview --watch

和运行主应用程序使用

ng serve

但是library目录下的assets文件好像不起作用

ng build landing-page-preview --watch命令给出

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(assets).

Answer 1

关于您的 angular.json 有几点似乎不对。

我在创建一个不是 SCSS 的项目时遇到了类似的问题。然后我需要转换它。我在您的 angular.json 中看不到任何对 SCSS 的引用。解决方法是遵循。如果 scss 根本没有解析，您可以在 angular.json 中添加 schematics 信息（参见下面的示例）。

接下来的事情是，如果您要添加额外的样式，则需要在 angular.json.

中添加它们的位置

下面是一个示例，其中我向项目添加了额外的样式并让 SCSS 进行编译。查看评论以了解在哪里查看（我添加了一些希望适合该额外 lib 文件夹的内容）。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myprojectname": {
      "projectType": "application",
      "schematics": {   /* SCHEMATICS INFO - REMOVE THIS COMMENT */
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              "src/lib" /* ADD EXTRA ASSETS LIKE THIS HERE AND REMOVE THIS COMMENT */
            ],
            "styles": [
              "src/styles.scss" /*<- ADD EXTRA STYLESHEETS HERE AND REMOVE THIS COMMENT */
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "...": "..."
            }
          }
        },
        "serve": {
          "...": "..."
        },
        "test": {
          "...": "..."
        },
        "lint": {
          "...": "..."
        },
        "e2e": {
          "...": "..."
        }
      }
    }
  },
  "defaultProject": "myprojectname",
  "schematics": { /* SCHEMATICS INFO - REMOVE THIS COMMENT */
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

在应用程序中使用 Angular 库中的资源

Use assets from the Angular library in the application

angular

angular-library