Basic angular app fails to run, Error module build failed : cannot find module ../@angular-devkit/src/babel/X

Question

I am new to angular and was following the documentation to build a basic app.

Node - v14.7.3
npm - 7.22.0
Angular CLI: 12.2.4
OS: win32 x64
@angular-devkit/architect 0.1202.4
@angular-devkit/build-angular 12.2.4
@angular-devkit/core 12.2.4
@angular-devkit/schematics 12.2.4
@schematics/angular 12.2.4
rxjs 6.6.7
typescript 4.3.5

So far all I have done is

npm install @angular/cli

followed by ng new firstApp

and ng serve

Following is the error that I am receiving,

√ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
runtime.js | runtime | 4.89 kB
main.js | main | 3.56 kB
polyfills.js | polyfills | 3.55 kB
styles.js | styles | 3.54 kB
 | Initial Total | 15.54 kB
Build at: 2021年09月06日T06:20:42.162Z - Hash: f81b11c218148f716cf3 - Time: 10951ms
../../../../#Development/Files/angularProjects/firstApp/src/main.ts - Error: Module build failed: Error: Cannot find module 'F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-angular\src\babel\webpack-loader.js'
Require stack:
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\ProgressPlugin.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-webpack\src\webpack\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-webpack\src\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-angular\src\dev-server\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\architect\node\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\models\architect-command.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\commands\serve-impl.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\schematics\tools\export-ref.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\schematics\tools\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\utilities\json-schema.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\models\command-runner.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
 at Function.Module._load (internal/modules/cjs/loader.js:746:27)
 at Module.require (internal/modules/cjs/loader.js:974:19)
 at require (internal/modules/cjs/helpers.js:92:18)
 at F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\ProgressPlugin.js:412:9
 at Hook.eval [as call] (eval at create (F:\#Development\Files\angularProjects\firstApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
 at NormalModule.doBuild (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:768:24)
 at NormalModule.build (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:920:15)
 at F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\Compilation.js:1322:12
 at NormalModule.needBuild (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:1192:32)
../../../../#Development/Files/angularProjects/firstApp/src/polyfills.ts - Error: Module build failed: Error: Cannot find module 'F:\#Development\Files\angularProjects\firstApp\node_modules\@ngtools\webpack\src\ivy\index.js'
Require stack:
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\ProgressPlugin.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-webpack\src\webpack\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-webpack\src\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-angular\src\dev-server\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\architect\node\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\models\architect-command.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\commands\serve-impl.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\schematics\tools\export-ref.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\schematics\tools\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\utilities\json-schema.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\models\command-runner.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
 at Function.Module._load (internal/modules/cjs/loader.js:746:27)
 at Module.require (internal/modules/cjs/loader.js:974:19)
 at require (internal/modules/cjs/helpers.js:92:18)
 at F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\ProgressPlugin.js:412:9
 at Hook.eval [as call] (eval at create (F:\#Development\Files\angularProjects\firstApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
 at NormalModule.doBuild (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:768:24)
 at NormalModule.build (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:920:15)
 at F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\Compilation.js:1322:12
 at NormalModule.needBuild (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:1192:32)
../../../../#Development/Files/angularProjects/firstApp/src/styles.css - Error: Module build failed: Error: Cannot find module 'F:\#Development\Files\angularProjects\firstApp\node_modules\mini-css-extract-plugin\dist\loader.js'
Require stack:
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\ProgressPlugin.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-webpack\src\webpack\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-webpack\src\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-angular\src\dev-server\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\architect\node\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\models\architect-command.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\commands\serve-impl.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\schematics\tools\export-ref.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\schematics\tools\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\utilities\json-schema.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\models\command-runner.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
 at Function.Module._load (internal/modules/cjs/loader.js:746:27)
 at Module.require (internal/modules/cjs/loader.js:974:19)
 at require (internal/modules/cjs/helpers.js:92:18)
 at F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\ProgressPlugin.js:412:9
 at Hook.eval [as call] (eval at create (F:\#Development\Files\angularProjects\firstApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
 at Hook.CALL_DELEGATE [as _call] (F:\#Development\Files\angularProjects\firstApp\node_modules\tapable\lib\Hook.js:14:14)
 at NormalModule.doBuild (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:768:24)
 at NormalModule.build (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:920:15)
 at F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\Compilation.js:1322:12
../../../../#Development/Files/angularProjects/firstApp/src/app/app.component.css - Error: Module build failed (from ../../../../#Development/Files/angularProjects/firstApp/node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'F:\#Development\Files\angularProjects\firstApp\node_modules\postcss-loader\dist\cjs.js'
Require stack:
- F:\#Development\Files\angularProjects\firstApp\node_modules\loader-runner\lib\loadLoader.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\loader-runner\lib\LoaderRunner.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModuleFactory.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\Compiler.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\ProgressPlugin.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-webpack\src\webpack\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-webpack\src\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\build-angular\src\dev-server\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\architect\node\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\models\architect-command.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\commands\serve-impl.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\schematics\tools\export-ref.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular-devkit\schematics\tools\index.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\utilities\json-schema.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\models\command-runner.js
- F:\#Development\Files\angularProjects\firstApp\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
 at Function.Module._load (internal/modules/cjs/loader.js:746:27)
 at Module.require (internal/modules/cjs/loader.js:974:19)
 at require (internal/modules/cjs/helpers.js:92:18)
 at loadLoader (F:\#Development\Files\angularProjects\firstApp\node_modules\loader-runner\lib\loadLoader.js:19:17)
 at iteratePitchingLoaders (F:\#Development\Files\angularProjects\firstApp\node_modules\loader-runner\lib\LoaderRunner.js:182:2)
 at runLoaders (F:\#Development\Files\angularProjects\firstApp\node_modules\loader-runner\lib\LoaderRunner.js:397:2)
 at NormalModule.doBuild (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:773:3)
 at NormalModule.build (F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\NormalModule.js:920:15)
 at F:\#Development\Files\angularProjects\firstApp\node_modules\webpack\lib\Compilation.js:1322:12
Error: Module not found: Error: Can't resolve 'F:\#Development\Files\angularProjects\firstApp\node_modules\webpack-dev-server\client\index.js?http://0.0.0.0:0&sockPath=/sockjs-node' in 'F:\#Development\Files\angularProjects\firstApp'
Error: Module not found: Error: Can't resolve 'F:\#Development\Files\angularProjects\firstApp\node_modules\webpack-dev-server\client\index.js?http://0.0.0.0:0&sockPath=/sockjs-node' in 'F:\#Development\Files\angularProjects\firstApp'
Error: Module not found: Error: Can't resolve 'F:\#Development\Files\angularProjects\firstApp\node_modules\webpack-dev-server\client\index.js?http://0.0.0.0:0&sockPath=/sockjs-node' in 'F:\#Development\Files\angularProjects\firstApp'
Error: node_modules/@angular/platform-browser/platform-browser.d.ts:45:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/platform-browser) which declares BrowserModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
45 export declare class BrowserModule {

I have tried the following approaches to fix this issue,

1. Tried deleting node_modules, deleted packacge-lock, cleared npm cache, and then finally npm installed, This approach has worked on many previous stack-overflow problems however for me the problem still persists.
2. I have tried installing different versions of angular-cli, tried to match their compatibility with different node versions and different npm versions, that however I wasn't able to do properly because of multiple broken dependencies.

Please suggest some solutions, thank you

Answer 1

I had the same issue as yours, and as strange as it might be, the problem is the # symbol on your file path (ex. F:\#Development).

I moved the Angular application to another path that does not contain # and no errors were produced anymore.

• Shekar Reddy: Good observation. I've been facing an issue from past two days. # in path was root cause. Thankyou very much
• icepicker: THANK YOU SO MUCH!!! I couldn't work out why 1 project was working but every new project I tried in a different folder had this problem. Does anyone know where the bug is? This has wasted so much of my time.
• oxalicacid: I had switched laptops and had forgotten about this issue, I switched back to the previous laptop and tried to create a basic template react app only to find the same problem but with react's html-webpack-plugin/lib/loader.js. Your solution did work great observation dude.

Answer 2

Try to install those modules separately npm install:

npm i @angular-devkit/build-angular

npm i @ngtools/webpack

npm i mini-css-extract-plugin

npm i postcss-loader