Custom TypeScript library import causes interference with Zone.js

I am working on a TypeScript project where I have a custom library that exports various services. The services are defined and exported in my

index.ts

file as shown below:

// Services
import { AITranslateService } from '@services/ai/ai-translate/ai-translate.service';
// ... other imports and exports


When I import any of these services into another library, they are being wrapped in a ZoneAwarePromise, which prevents me from using them as expected. Here is an example of how I am importing the services:

import { AITranslateService } from 'path-to-index-file';


Upon importing, the service is wrapped in a ZoneAwarePromise and I cannot use it directly. I suspect this issue is related to Angular's Zone.js library, which patches Promises to be zone-aware.

Questions:

1. Why are my services being wrapped in ZoneAwarePromise when imported?
2. How can I prevent Zone.js from interfering with my custom library imports?
3. Are there any best practices to avoid such issues when working with Angular and Zone.js?

Additional Information:

package.json:

{
"name": "mylib",
"version": "1.0.0",
"description": "MyLib",
"main": "dist/js/main.js",
"types": "dist/@types/index.d.ts",
"private": false,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"publish-lib": "npm run build && npm publish",
"publish-beta": "npm run build && npm publish --tag beta",
"publish-dryrun": "npm run build && npm publish --dry-run"
},
"files": [
"/dist"
],
"peerDependencies": {
"axios": "1.2.4"
},
"dependencies": {
"axios": "1.2.4"
},
"devDependencies": {
"@eslint/js": "^9.15.0",
"@types/node": "^22.10.1",
"clean-webpack-plugin": "^4.0.0",
"eslint": "^9.15.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-webpack-plugin": "^4.2.0",
"path-browserify": "^1.0.1",
"prettier": "^3.4.1",
"terser-webpack-plugin": "^5.3.10",
"ts-loader": "^9.5.1",
"typescript": "^5.2.2",
"typescript-eslint": "^8.16.0",
"webpack": "^5.96.1",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^5.1.4"
},
"license": "MIT",
}


tsconfig.json:

{
"compilerOptions": {
"module": "esnext",
"target": "es2019",
"strict": true,
"declaration": true,
"outDir": "./dist",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": ["node_modules/*"],
"@services/*": ["src/services/*"],
"@models/*": ["src/models/*"],
"@utils/*": ["src/utils/*"],
"@libs/*": ["src/libs/*"]
},
"typeRoots": ["./node_modules/@types", "./src/@types"],
"types": ["node"],
"removeComments": true,
"jsx": "react" // for react compatibility
},
"include": ["src/**/*"]
}


webpack.config.js:

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const ESLintPlugin = require('eslint-webpack-plugin');
const { ProgressPlugin } = require('webpack');
const DeclarationBundlerPlugin = require('./declaration-bundler-webpack-plugin');

module.exports = (env, argv) => {
const mode = argv.mode || 'production'; // Default to 'production' if mode is not provided

return {
mode: mode,
entry: path.resolve(__dirname, 'src/index.ts'),
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
library: 'DcServices'
},
resolve: {
extensions: ['.ts', '.js'],
alias: {
'@services': path.resolve(__dirname, 'src/services'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@libs': path.resolve(__dirname, 'src/libs'),
'@models': path.resolve(__dirname, 'src/models')
},
fallback: {
path: require.resolve('path-browserify'),
fs: false
}
},
module: {
rules: [
{
test: /\.ts$/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: mode === 'development' // Speed up development build
}
},
exclude: /node_modules/
}
]
},
optimization: {
minimize: mode === 'production', // Minify only in production
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: mode === 'production' // Remove console logs in production
}
}
})
],
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '-' // Makes chunk names more readable
},
usedExports: true, // Enable tree shaking
sideEffects: true // Enable tree shaking
},
performance: {
hints: mode === 'production' ? 'warning' : false, // Only show performance hints in production
maxAssetSize: 300000, // Set the maximum asset size to 300 KiB
maxEntrypointSize: 300000 // Set the maximum entry point size to 300 KiB
},
plugins: [
new CleanWebpackPlugin(),
// Only run BundleAnalyzerPlugin in production mode
...(mode === 'production' ? [new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false })] : []),
new ESLintPlugin({
extensions: ['.js', '.ts'],
exclude: 'node_modules',
emitWarning: mode === 'development', // Emit warnings in development mode
failOnError: mode === 'production' // Fail on errors in production mode
}),
new ProgressPlugin(),
new DeclarationBundlerPlugin({
out: './@types/index.d.ts',
moduleName: 'index',
mode: 'internal',
excludedReferences: ['node_modules']
})
],
devtool: mode === 'development' ? 'source-map' : false // Enable source maps in development mode
};
};


Any help or guidance on this issue would be greatly appreciated. Thank you!

Continue reading...