Angular 9集成WebNFC报错：Cannot find name 'NDEFReader'

步骤1：确认类型包安装有效性 #

确保已正确安装适配Angular 9 TypeScript版本的@types/w3c-web-nfc，执行安装命令：

npm install @types/w3c-web-nfc --save-dev

步骤2：配置TypeScript类型引入 #

在项目根目录的tsconfig.json或tsconfig.app.json中，将w3c-web-nfc添加到compilerOptions的types数组：

{
  "compilerOptions": {
    // 其他原有配置
    "types": [
      "w3c-web-nfc"
    ]
  }
}

若使用tsconfig.app.json，需保证其继承根目录tsconfig.json的配置，避免类型覆盖。

步骤3：验证运行环境与浏览器支持 #

• WebNFC仅支持Chromium内核浏览器（Chrome/Edge等），且必须处于HTTPS安全上下文（本地开发可直接用localhost，浏览器默认信任该地址）
• 手动开启浏览器WebNFC实验功能：在地址栏输入chrome://flags/#enable-experimental-web-platform-features，启用选项后重启浏览器

步骤4：手动补充类型声明（兜底方案） #

若上述步骤无效，在项目src/typings.d.ts文件中添加基础类型声明：

declare class NDEFReader {
  constructor();
  scan(options?: NDEFReaderScanOptions): Promise<void>;
  write(message: NDEFMessage, options?: NDEFWriterOptions): Promise<void>;
  makeReadOnly(options?: NDEFMakeReadOnlyOptions): Promise<void>;
}

interface NDEFMessage {
  records: NDEFRecord[];
}

interface NDEFRecord {
  recordType: string;
  mediaType?: string;
  id?: string;
  data?: string | Uint8Array;
}

步骤5：添加浏览器支持检测 #

在使用NDEFReader前加入环境判断，避免运行时错误：

if ('NDEFReader' in window) {
  const ndef = new NDEFReader();
  // 后续NFC操作逻辑
} else {
  console.error('当前浏览器不支持WebNFC功能');
}

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