时间戳

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

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

问题描述

我使用 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在我的服务中使用它，也可以在我的单元测试中模拟它。但是当我尝试进行生产构建（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我的服务）。

感谢您的任何帮助。

标签： angularstripe-payments

解决方案

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

  1. 根据Angular Package Format，向模块添加“类型”条目可以@stripe/stripe-js纠正问题。（模块文件中已经有一个“类型”条目package.json，但显然 Angular 8 不支持。）
  2. compilerSettings在文件部分手动添加 @stripe/stripe-js 的路径tsconfig.json。
"paths": {
  "@stripe/stripe-js": [
    "node_modules/@stripe/stripe-js/dist/stripe.js"
  ]
}
  1. 升级到 Angular 9，这是我最终选择的路径。

推荐阅读