Используйте ресурсы из библиотеки Angular в приложении

Я использую Angular 8, и у меня есть отдельное приложение со своими собственными стилями и ресурсами CSS. Я хочу встроить компонент библиотеки в основное приложение, например

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

Структура каталогов

введите описание изображения здесь

Ресурсы библиотеки находятся внутри /projects/landing-page-preview/src/assets, где style.scss - это основной файл CSS внутри каталога scss.

Корневой 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).

angular angular-library
person Anuj TBE    schedule 08.07.2020    source источник
comment
что вы имеете в виду, похоже, не работает? Они не отображаются, вы это имели в виду?   -  person Wahab Shah    schedule 08.07.2020
comment
Стили CSS не применяются   -  person Anuj TBE    schedule 08.07.2020

Ответы (1)


arrow_upward
0
arrow_downward

Есть пара моментов в вашем angular.json, которые кажутся неправильными.

У меня была аналогичная проблема, когда я создавал проект, который не был SCSS. Затем мне нужно было его преобразовать. Я не вижу ссылки на SCSS в вашем angular.json. Исправление для этого заключалось в том, чтобы следовать этому. Вы можете добавить schematics информацию в свой angular.json, если scss вообще не анализирует (см. Пример ниже).

Далее, если вы добавляете дополнительные стили, вам нужно добавить их расположение в 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"
    }
  }
}
person HockeyJ    schedule 08.07.2020