安装Angular QR Code Generator时依赖缺失编译报错问题求助

AI 小北

2026-8-30

问题描述

尝试安装angularx-qrcode（Angular二维码生成组件）时，发现当前最新Angular版本为v14，该组件要求运行在Angular v13环境下，因此执行以下命令切换全局Angular版本：

ng version
npm uninstall -g @angular/cli
npm cache clean --force

npm install -g @angular/cli@13
ng version

执行后成功安装Angular v13.3.7，环境信息如下：

>ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.3.7
Node: 14.17.5
Package Manager: npm 8.5.5
OS: win32 x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.7
@angular-devkit/build-angular   13.3.7
@angular-devkit/core            13.3.7
@angular-devkit/schematics      13.3.7
@angular/cli                    13.3.7
@schematics/angular             13.3.7
rxjs                            7.5.5
typescript                      4.6.4

随后执行命令安装angularx-qrcode组件：

>npm install angularx-qrcode --save

added 5 packages, removed 1 package, and audited 927 packages in 9s

109 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

当时误以为组件安装成功，于是执行ng new project_name新建名为project_name的项目，分别修改两个文件引入二维码功能：

修改app.module.ts，配置代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { QRCodeModule } from 'angularx-qrcode';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    QRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

修改app.component.html，添加二维码标签代码如下：

<qrcode [qrdata]="'Your data string'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

最后执行ng serve启动项目，构建过程中报错编译失败，构建日志如下：

>ng serve
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   3.03 MB |
polyfills.js          | polyfills     | 294.85 kB |
styles.css, styles.js | styles        | 173.23 kB |
runtime.js            | runtime       |   6.52 kB |
main.js               | main          |   6.13 kB |

                      | Initial Total |   3.50 MB

Build at: 2022-06-10T02:31:02.657Z - Hash: 8ce9711c8f9d65cc - Time: 4168ms

Warning: C:\Users\fsloke\node_modules\angularx-qrcode\fesm2015\angularx-qrcode.mjs depends on '@cordobo/qrcode'. CommonJS or AMD dependencies can cause optimization bailouts.


../../../../node_modules/angularx-qrcode/fesm2015/angularx-qrcode.mjs:5:0-48 - Error: Module not found: Error: Can't resolve '@angular/platform-browser' in 'C:\Users\fsloke\node_modules\angularx-qrcode\fesm2015'

Error: ../../../../node_modules/angularx-qrcode/lib/angularx-qrcode.component.d.ts:2:39 - error TS2307: Cannot find module '@angular/platform-browser' or its corresponding type declarations.

2 import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


× Failed to compile.

经排查发现系统存在两处node_modules文件夹：

Windows用户目录下的C:/Users/fsloke/node_modules
新建project_name项目根目录内的node_modules
报错根源是Windows用户目录下的node_modules中存在依赖文件缺失，手动移动缺失文件到该目录会触发其他文件缺失的连锁报错，该方案不可行。

修复方案

报错核心原因是执行npm install angularx-qrcode --save时终端路径不在项目根目录，导致组件被错误安装到了用户根目录的node_modules下，npm解析依赖时会从当前目录向上逐级查找node_modules，优先命中了用户目录下残缺的组件包，最终报依赖缺失错误。按以下步骤操作即可修复：

清理用户目录下的错误依赖
进入C:/Users/fsloke路径，执行命令卸载错误安装的包：

cd C:/Users/fsloke
npm uninstall angularx-qrcode

如果该目录下存在package.json、package-lock.json文件，直接手动删除，避免后续依赖查找时命中该目录的依赖树。
2. 在项目本地重新安装对应版本的组件
进入你新建的project_name项目根目录，执行命令安装兼容Angular 13的angularx-qrcode版本：

cd 你的project_name文件夹实际存放路径
npm install angularx-qrcode@13 --save

确认项目本地node_modules中存在angularx-qrcode文件夹后，重新执行ng serve启动项目即可正常编译运行。

补充：启动时出现的CommonJS依赖警告不影响功能运行，如果需要消除警告，在angular.json文件的构建配置项allowedCommonJsDependencies中添加@cordobo/qrcode即可。

内容的提问来源于stack exchange，提问作者henryloke