在应用程序中使用来自 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

但库目录中的资产文件似乎不起作用。

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 的任何引用。解决方法是遵循this。如果 scss 根本不解析，您可以在 angular.json 中添加 schematics 信息（参见下面的示例）。

接下来，如果要添加额外的样式，则需要在angular.json 中添加它们的位置。

下面是一个示例，我在项目中添加了其他样式并编译了 SCSS。请参阅 cmets 以了解查看位置（我添加了一些内容，希望适合该额外的 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"
    }
  }
}