Failed to run Angular Library in a project in different versions

I made an Angular library which I wanted to support some older versions of Angular. But when I run in some Angular projects it fails to run In Angular 18, it returns this error

6:56:05 PM [vite] Internal server error: __dirname is not defined
at node_modules/yargs/build/index.cjs (/home/fredrick/PROJECTS/booksrepo/.angular/cache/18.2.16/booksrepo/vite/deps_ssr/@ngx-boilerplate-functions_forms.js:33172:23)
at __require2 (/home/fredrick/PROJECTS/booksrepo/.angular/cache/18.2.16/booksrepo/vite/deps_ssr/chunk-OUH66FP4.js:50:50)
at node_modules/yargs/index.cjs (/home/fredrick/PROJECTS/booksrepo/.angular/cache/18.2.16/booksrepo/vite/deps_ssr/@ngx-boilerplate-functions_forms.js:33211:9)
at __require2 (/home/fredrick/PROJECTS/booksrepo/.angular/cache/18.2.16/booksrepo/vite/deps_ssr/chunk-OUH66FP4.js:50:50)
at node_modules/@angular/cli/src/command-builder/command-module.js (/home/fredrick/PROJECTS/booksrepo/.angular/cache/18.2.16/booksrepo/vite/deps_ssr/@ngx-boilerplate-functions_forms.js:70662:35)
at __require2 (/home/fredrick/PROJECTS/booksrepo/.angular/cache/18.2.16/booksrepo/vite/deps_ssr/chunk-OUH66FP4.js:50:50)
at node_modules/@angular/cli/lib/cli/index.js (/home/fredrick/PROJECTS/booksrepo/.angular/cache/18.2.16/booksrepo/vite/deps_ssr/@ngx-boilerplate-functions_forms.js:169188:28)
at __require2 (/home/fredrick/PROJECTS/booksrepo/.angular/cache/18.2.16/booksrepo/vite/deps_ssr/chunk-OUH66FP4.js:50:50)
at eval (/home/fredrick/PROJECTS/booksrepo/.angular/cache/18.2.16/booksrepo/vite/deps_ssr/@ngx-boilerplate-functions_forms.js:169284:26)


These are the lines which return errors in generated @ngx-boilerplate-functions_forms.js file

y18n: oe({
directory: re(__dirname, "../locales"),
updateFiles: false
})


I tried to run it in Angular 11 these are the errors returned

Error: src/ngx-boilerplate-functions/lib/services/forms-functions.service.d.ts:29:21 - error TS2694: Namespace '"/home/fredrick/PROJECTS/my-project/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

29 static ɵfac: i0.ɵɵFactoryDeclaration<FormsFunctionsService, never>;
~~~~~~~~~~~~~~~~~~~~


Error: src/ngx-boilerplate-functions/lib/services/forms-functions.service.d.ts:30:22 - error TS2694: Namespace '"/home/fredrick/PROJECTS/my-project/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.

30 static ɵprov: i0.ɵɵInjectableDeclaration<FormsFunctionsService>;
~~~~~~~~~~~~~~~~~~~~~~~


Error: ./src/ngx-boilerplate-functions/fesm2022/ngx-boilerplate-functions-forms.mjs 7:19
Module parse failed: Unexpected token (7:19)
File was processed with these loaders:
* ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
* ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|
| class PackageUtils {
> static datePipe;
| constructor() {
| }



Here is the package.json of my library

{
"name": "@ngx-boilerplate-functions/forms",
"description": "@ngx-boilerplate-functions/forms is a utility package designed to simplify form handling in Angular applications. It provides helper functions for managing `FormGroup` and `FormControl` operations efficiently.",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/fredabisai/ngx-boilerplate-functions-workspace.git"
},
"private": false,
"types": "dist/index.d.ts",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" ,
"@angular/core": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"@angular/forms": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": ">=14.0.0"
},
"compilerOptions": {
"target": "es2020",
"lib": ["es2020", "dom"]
},
"sideEffects": false
}


tsconfig.lib.json

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


I tried to add this in tsconfig.lib.json

{
"module": "es2022",
"moduleResolution": "Node",
"esModuleInterop": true,
} ```
But I could not solve it

Continue reading...