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-06T06: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.

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