Angular 8 和 Stripe.js V3 的 loadStripe：找不到模块：错误：无法解析 '@stripe/stripe-js/types/index'答案

【问题标题】：Angular 8 and Stripe.js V3's loadStripe: Module not found: Error: Can't resolve '@stripe/stripe-js/types/index'Angular 8 和 Stripe.js V3 的 loadStripe：找不到模块：错误：无法解析 '@stripe/stripe-js/types/index'
【发布时间】：2020-07-11 10:02:39
【问题描述】：

我使用 Stripe 作为支付处理器，它们提供了一个库，允许开发人员创建安全的“元素”（信用卡输入等）。为了保持 A 级 PCI 兼容，他们提供的库 Stripe.js 不能捆绑：它必须包含在他们的站点中：https://js.stripe.com/v3。因此，它们提供了一个辅助函数loadStripe，可用于动态包含上述脚本。（它只是添加了一个<script> 标签并等待它在引擎盖下加载。没什么特别的。）

https://github.com/stripe/stripe-js

我能够通过 NPM 安装该库并让 Stripe 在我的 Angular 8 项目中工作。我将loadStripe 函数设为提供程序，以便在测试期间对其进行模拟。这是我正在做的精简版。

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

import { loadStripe } from '@stripe/stripe-js';

import { AppComponent } from './app.component';

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

它工作正常。我可以在我的服务中使用loadStripe，我可以在我的单元测试中模拟它。但是当我尝试进行 production 构建 (ng build --prod) 时，我遇到了一个令人讨厌的、神秘的错误。

ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@stripe/stripe-js/types/index' in '/home/<MY-USER>/temp/test-stripe/src/app'
resolve '@stripe/stripe-js/types/index' in '/home/<MY-USER>/temp/test-stripe/src/app'
  Parsed request is a module
  using description file: /home/<MY-USER>/temp/test-stripe/package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /home/<MY-USER>/temp/test-stripe/
        using description file: /home/<MY-USER>/temp/test-stripe/package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /home/<MY-USER>/temp/test-stripe/package.json (relative path: ./@stripe/stripe-js/types/index)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index.js doesn't exist
            as directory
              /home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index doesn't exist
      /home/<MY-USER>/temp/test-stripe/src/app/node_modules doesn't exist or is not a directory
      /home/<MY-USER>/temp/test-stripe/src/node_modules doesn't exist or is not a directory
      /home/<MY-USER>/temp/node_modules doesn't exist or is not a directory
      /home/<MY-USER>/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /home/<MY-USER>/temp/test-stripe/node_modules
        using description file: /home/<MY-USER>/temp/test-stripe/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/package.json (relative path: ./types/index)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.js doesn't exist
            as directory
              /home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index doesn't exist
[/home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index]
[/home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index.ts]
[/home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index.tsx]
[/home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index.mjs]
[/home/<MY-USER>/temp/test-stripe/@stripe/stripe-js/types/index.js]
[/home/<MY-USER>/temp/test-stripe/src/app/node_modules]
[/home/<MY-USER>/temp/test-stripe/src/node_modules]
[/home/<MY-USER>/temp/node_modules]
[/home/<MY-USER>/node_modules]
[/home/node_modules]
[/node_modules]
[/home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index]
[/home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.ts]
[/home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.tsx]
[/home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.mjs]
[/home/<MY-USER>/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.js]
 @ ./src/app/app.module.ngfactory.js 13:0-52 14:2720-2733
 @ ./src/main.ts
 @ multi ./src/main.ts

如果需要，我可以提供 StackBlitz，但上面引用的应用实际上是默认的 ng new test-stripe 和 npm install @stripe/stripe-js@1.2.x。

FWIW、ng build 和 ng serve 按预期工作，只是产品构建失败。如果我删除了应用程序构建的loadStripe 提供程序（即，如果我直接在我的服务中导入loadStripe）。

感谢您的帮助。

【问题讨论】：

似乎与此讨论有关github.com/angular/angular-cli/issues/11392。抱歉，对 Angular 不太熟悉，但这看起来与您遇到的问题完全一样

标签： angular stripe-payments

【解决方案1】：

我找到了三种方法来解决这个问题。

根据Angular Package Format，将“类型”条目添加到@stripe/stripe-js 模块更正了问题。（模块的 package.json 文件中已经有一个“类型”条目，但显然 Angular 8 不支持。）
在tsconfig.json 文件的compilerSettings 部分手动添加@stripe/stripe-js 的路径。

"paths": {
  "@stripe/stripe-js": [
    "node_modules/@stripe/stripe-js/dist/stripe.js"
  ]
}

升级到 Angular 9，这是我最终选择的路径。

【讨论】：