带有组件样式的 Angular 库主机版本错误答案

【问题标题】：Angular Library Host Version Error with Component Styles带有组件样式的 Angular 库主机版本错误
【发布时间】：2022-01-14 18:37:52
【问题描述】：

我通过主要使用服务的 Angular 13 (v13.1.0) 中的 CLI 生成了我的第一个 Angular 库，这没问题。现在我以同样的方式创建了另一个加载器模块，但我打算使用一个组件。当它生成时，它只显示 component.ts 和 component.spec.ts 文件。当我建立图书馆时，一切都按预期工作，没有问题。但我需要将样式应用于组件。所以我尝试了 3 种不同的方法：

在 styleUrls 中导入 .css 文件
在 styleUrls 中导入 .scss 文件
添加内联样式

每次我尝试构建库时，都会收到以下错误：

在 Ivy 部分编译模式下使用 Angular 源进行编译。
X [错误] 无法启动服务：主机版本“0.14.11”与二进制版本“0.14.2”不匹配

唯一完全有效的情况是我不包含任何样式。我不知道我是否在我的项目中遗漏了一些东西来完成这项工作，如果我需要更新一些东西，或者什么。配置包括：

// tsconfig.lib.json
{
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../out-tsc/lib",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

// tsconfig.lib.prod.json
{
  "extends": "./tsconfig.lib.json",
  "compilerOptions": {
    "declarationMap": false
  },
  "angularCompilerOptions": {
    "compilationMode": "partial"
  }
}

// library package.json
{
  "name": "loader",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^13.1.0",
    "@angular/core": "^13.1.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  }
}

// angular.json for library
"loader": {
  "projectType": "library",
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },
  "root": "projects/loader",
  "sourceRoot": "projects/loader/src",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:ng-packagr",
      "options": {
        "project": "projects/loader/ng-package.json"
      },
      "configurations": {
        "production": {
          "tsConfig": "projects/loader/tsconfig.lib.prod.json"
        },
        "development": {
          "tsConfig": "projects/loader/tsconfig.lib.json"
        }
      },
      "defaultConfiguration": "production"
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "projects/loader/src/test.ts",
        "tsConfig": "projects/loader/tsconfig.spec.json",
        "karmaConfig": "projects/loader/karma.conf.js"
      }
    },
    "lint": {
      "builder": "@angular-eslint/builder:lint",
      "options": {
        "lintFilePatterns": [
          "projects/loader/**/*.ts",
          "projects/loader/**/*.html"
        ]
      }
    }
  }
}

// main tsconfig.ts file
{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "loader": [
        "dist/loader/app-loader",
        "dist/loader"
      ]
    },
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

如果有人可以在这里帮助我，将不胜感激！

【问题讨论】：

标签： angular components styles angular-library

【解决方案1】：

我将@angular/cli 和@angular-devkit/build-angular 从 13.1.2 升级到 13.1.5 后收到相同的错误消息。

删除现有的dist、node_modues 和.angular 文件夹为我解决了这个问题。

【讨论】：