richnologies / ngx-stripe

Angular 6+ wrapper for StripeJS
MIT License
219 stars 77 forks source link

error TS2304: Cannot find name 'LibraryModule' #104

Closed masayashiki closed 4 years ago

masayashiki commented 4 years ago

Hi, there. I tried the plugin and got an error below on terminal.

ERROR in src/app/app.module.ts:23:5 - error TS2304: Cannot find name 'LibraryModule'.
[ng]     
[ng]     23     LibraryModule

I think the error comes from the code in app.module.ts.

NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    NgxStripeModule.forRoot('pk_test_51H90tKGMJKVJEHzlVkLpIrZQhhq2dPfGeeZQLimr8ExVsYolcSP37ZEmhOceRplD7toFZhYoiZFbJDMP5s4Qmlxh00mANSHuEf'),
    LibraryModule
],

Can you please how to fix this issue ?

I installed latest version for ver angular 9 with npm install ngx-stripe @stripe/stripe-js. My ionic version is below.

Ionic:

   Ionic CLI                     : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.0
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.0 (/usr/local/bin/node)
   npm    : 6.14.6
   OS     : macOS Catalina

Thank you in advance.

richnologies commented 4 years ago

Hi @masayashiki,

I'm assuming LibraryModule is yours and you're certain is available. Please try to use the v9 version of the library. There is a little breaking change between them.

npm install ngx-stripe@v9-lts

Let me know if that helps

R

masayashiki commented 4 years ago

Thank you for your kind reply @richnologies. Now I could get token with this library. For the new like me, let me describe what I did.

スクリーンショット 2020-07-27 21 20 32

・Since I use @angular/cli: 9.1.12, I installed the plugin with


npm install ngx-stripe@v9-lts
npm install @stripe/stripe-js 

・Added codes below in home.module.ts, not app.module.ts

import { NgxStripeModule } from 'ngx-stripe';
  imports: [
NgxStripeModule.forRoot('****'),
  ],

・Added codes below in app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
  imports: [
    ReactiveFormsModule,
  ],

・I used HTML below in home.page.html (https://richnologies.gitbook.io/ngx-stripe/core-concepts/element-components)

 <h2>Create Token Example</h2>
  <ngx-stripe-card
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
  ></ngx-stripe-card>
  <button type="submit" (click)="createToken()">
    CREATE TOKEN
  </button> 

・ts code was the one from https://github.com/richnologies/ngx-stripe on home.tapge.ts


import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { StripeService, StripeCardComponent } from 'ngx-stripe';
import {
  StripeCardElementOptions,
  StripeElementsOptions
} from '@stripe/stripe-js';

@Component({
  selector: 'app-create-token',
  templateUrl: 'stripe.html'
})
export class StripeCreateTokenComponent implements OnInit {
  @ViewChild(StripeCardComponent) card: StripeCardComponent;

  cardOptions: StripeCardElementOptions = {
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        fontWeight: '300',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '18px',
        '::placeholder': {
          color: '#CFD7E0'
        }
      }
    }
  };

  elementsOptions: StripeElementsOptions = {
    locale: 'en'
  };

  stripeTest: FormGroup;

  constructor(private fb: FormBuilder, private stripeService: StripeService) {}

  ngOnInit(): void {
    this.stripeTest = this.fb.group({
      name: ['', [Validators.required]]
    });
  }

  createToken(): void {
    const name = this.stripeTest.get('name').value;
    this.stripeService
      .createToken(this.card.element, { name })
      .subscribe((result) => {
        if (result.token) {
          // Use the token
          console.log(result.token.id);
        } else if (result.error) {
          // Error creating the token
          console.log(result.error.message);
        }
      });
  }
}

Thank you very much !!!

richnologies commented 4 years ago

Hi @masayashiki, than you for your replay , I will have a look and try to include it in the docs. If your problem is solved, please close the issue. Thanks again

masayashiki commented 4 years ago

Solved.