Angular 7, @angular-builders/custom-webpack - 7.5.2, rxjs - 6.3.3. Throws error when I run npm start.

[ss94866]

Describe the Bug

When I run "npm start", it throws error. Kindly find the error below https://github.com/iamsurajdc/Angular-Todo-Application

Minimal Reproduction

Install @angular-builders/custom-webpack change angular.json file

"builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "src/custom-webpack.config.ts" }, "builder": "@angular-builders/custom-webpack:dev-server",

create src/custom-webpack.config.ts const Dotenv = require("dotenv-webpack");

module.exports = { plugins: [new Dotenv()] }

run npm start to serve the application

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

Libs

• @angular/core version: 7.2.0
• @angular-devkit/build-angular version: 0.13.0
• @angular-builders/custom-webpack version: 7.5.2

For Tooling issues:

• Node version: 10.24.1 <!-- run node --version -->
• Platform: windows angular.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "angular-crash-todolist": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "src/custom-webpack.config.ts" }, "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [], "es5BrowserSupport": true }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] } } }, "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "browserTarget": "angular-crash-todolist:build" }, "configurations": { "production": { "browserTarget": "angular-crash-todolist:build:production" } } }, "extract-i18n": { "builder": "@angular-builders/custom-webpack:extract-i18n", "options": { "browserTarget": "angular-crash-todolist:build" } }, "test": { "builder": "@angular-builders/custom-webpack:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": [ "src/styles.scss" ], "scripts": [], "assets": [ "src/favicon.ico", "src/assets" ] } }, "lint": { "builder": "@angular-builders/custom-webpack:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }, "angular-crash-todolist-e2e": { "root": "e2e/", "projectType": "application", "prefix": "", "architect": { "e2e": { "builder": "@angular-builders/custom-webpack:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "angular-crash-todolist:serve" }, "configurations": { "production": { "devServerTarget": "angular-crash-todolist:serve:production" } } }, "lint": { "builder": "@angular-builders/custom-webpack:tslint", "options": { "tsConfig": "e2e/tsconfig.e2e.json", "exclude": [ "**/node_modules/**" ] } } } } }, "defaultProject": "angular-crash-todolist" }

[just-jeb]

Can you provide a link to a repo with minimal reproduction please?

[ss94866]

Please find my repo URL https://github.com/ss94866/angular7-webpack

[just-jeb]

I'm not getting the same error you are. This is what I get, and that's because v7 doesn't support TS webpack config.

Regardless, your issue is a non-compatible version of Angular CLI (and Custom Webpack builder) and @angular-devkit/build-angular. You're using v7 with v0.13.0 (which is compatible with v13).
If you wish to go for Angular 7 you should be using @angular-devkit/build-angular@~0.7.0.

I would highly recommend, however, to not use Angular 7 as it is waaaay outdated (we're at version 16 now).

[ss94866]

No, this isn't the error that I shared you above. import works for me. I am getting error as below.

Builder '@angular-builders/custom-webpack:dev-server' cannot be resolved. Error: Builder '@angular-builders/custom-webpack:dev-server' cannot be resolved. at MergeMapSubscriber._loadJsonFile.pipe.operators_1.concatMap [as project] (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\@angular-devkit\architect\src\architect-legacy.js:169:46) at MergeMapSubscriber._tryNext (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\operators\mergeMap.js:69:27) at MergeMapSubscriber._next (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\operators\mergeMap.js:59:18) at MergeMapSubscriber.Subscriber.next (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\Subscriber.js:67:18) at MergeMapSubscriber.notifyNext (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\operators\mergeMap.js:92:26) at InnerSubscriber._next (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\InnerSubscriber.js:28:21) at InnerSubscriber.Subscriber.next (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\Subscriber.js:67:18) at MergeMapSubscriber.notifyNext (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\operators\mergeMap.js:92:26) at InnerSubscriber._next (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\InnerSubscriber.js:28:21) at InnerSubscriber.Subscriber.next (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\Subscriber.js:67:18) at C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\util\subscribeTo.js:17:28 at Object.subscribeToResult (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\util\subscribeToResult.js:10:45) at MergeMapSubscriber._innerSub (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\operators\mergeMap.js:82:29) at MergeMapSubscriber._tryNext (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\operators\mergeMap.js:76:14) at MergeMapSubscriber._next (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\operators\mergeMap.js:59:18) at MergeMapSubscriber.Subscriber.next (C:\Users\SIVASANKAR\Downloads\Angular-Todo-Application-master (2)\angular7-webpack\node_modules\rxjs\internal\Subscriber.js:67:18) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! angular-crash-todolist@0.0.0 start:ng serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the angular-crash-todolist@0.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\SIVASANKAR\AppData\Roaming\npm-cache_logs\2023-09-06T06_26_38_777Z-debug.log `

[just-jeb]

Have you read the rest of my comment or just the beginning?

[arturovt]

Closing since the 7 version has been deprecated long time ago.