基本 angular 应用程序无法运行，错误模块构建失败：找不到模块 ../@angular-devkit/src/babel/X

Question

我是 angular 的新手，正在按照文档构建基本应用程序。

节点 - v14.7.3
npm - 7.22.0
Angular命令行界面：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
打字稿 4.3.5

到目前为止我所做的只是

npm install @angular/cli

其次是ng new firstApp

和ng serve

以下是我收到的错误，

√ 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 {

我尝试了以下方法来解决这个问题，

尝试删除 node_modules，删除 packacge-lock，清除 npm 缓存，然后最终安装 npm，这种方法已经解决了许多以前的堆栈溢出问题，但对我来说问题仍然存在。
我已经尝试安装不同版本的 angular-cli，试图匹配它们与不同节点版本和不同 npm 版本的兼容性，但是由于多个依赖项损坏，我无法正确完成。

请提出一些解决方案，谢谢

Answer 1

尝试单独安装这些模块npm install:

npm i @angular-devkit/build-angular

npm i @ngtools/webpack

npm i mini-css-extract-plugin

npm i postcss-loader

Answer 2

我遇到了和你一样的问题，尽管可能很奇怪，问题是你的文件路径上的 # 符号（例如 F:\#Development）。

我将 Angular 应用程序移动到另一个不包含 # 的路径，并且不再产生任何错误。

基本 angular 应用程序无法 运行，错误模块构建失败：找不到模块 ../@angular-devkit/src/babel/X

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

angular

angular-devkit

基本 angular 应用程序无法运行，错误模块构建失败：找不到模块 ../@angular-devkit/src/babel/X