I generated my first Angular library via the CLI in Angular 13 (v13.1.0) that mainly used services, and that was no problem. Now I created another one the same way, a Loader Module, but I intend to use a component. When it gets generated, it only shows component.ts and component.spec.ts files. When I build the library, everything works as intended, no problems. But I need to apply styles to the component. So I have tried 3 different ways:
- Importing a .css file in styleUrls
- Importing a .scss file in styleUrls
- Adding inline styles
Each time I try to build the library, I get the following error:
Compiling with Angular sources in Ivy partial compilation mode.
X [ERROR] Cannot start service: Host version "0.14.11" does not match binary version "0.14.2
The only time it completely works is if I don't include any styles. I don't know if I'm missing something in my project to make this work, if I need to update something, or what. The configurations include:
// 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
}
}
If anybody can help me out here, that will be greatly appreciated!