Implementing a Chrome extension using Angular 21 and TypeScript

4 weeks ago 26
ARTICLE AD BOX

I’m trying to implement a chrome extension using Angular21. I need to compile background script, that is written using TypeScript. For this I need to compile background script inside Angular build. I tried to install @angular-builders/custom-webpack builder as it was worked with Angular 20. But unfortunately, it is not supporting Angular 21. Are there some other options?

npm i -D @angular-builders/custom-webpack npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: [email protected] npm error Found: @angular/[email protected] npm error node_modules/@angular/compiler-cli npm error dev @angular/compiler-cli@"^21.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer @angular/compiler-cli@"^20.0.0" from @angular-builders/[email protected] npm error node_modules/@angular-builders/custom-webpack npm error dev @angular-builders/custom-webpack@"*" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution.

package.json

{ "name": "angular-v21-webex", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch", "test": "ng test" }, "prettier": { "printWidth": 100, "singleQuote": true, "overrides": [ { "files": "*.html", "options": { "parser": "angular" } } ] }, "private": true, "packageManager": "[email protected]", "dependencies": { "@angular/common": "^21.0.0", "@angular/compiler": "^21.0.0", "@angular/core": "^21.0.0", "@angular/forms": "^21.0.0", "@angular/platform-browser": "^21.0.0", "@angular/router": "^21.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.0.4", "@angular/cli": "^21.0.4", "@angular/compiler-cli": "^21.0.0", "@types/chrome": "^0.1.32", "jsdom": "^27.1.0", "typescript": "~5.9.2", "vitest": "^4.0.8" } }
Read Entire Article