I am working on an app (ionic/angular) and now need to include payment via credit card using Stripe.
After much research on the internet I decided to use Stripe.js (https://stripe.com/docs/stripe-js).
In the index.html of the project, I made the inclusion of Stripe.js and it looks like this:
<body>
<app-root></app-root>
<script src="https://js.stripe.com/v3/"></script>
</body>
</html>
How do I now import Stripe into app/app.module.ts to use Stripe on another page (Example: in pages/payment/payment.page.ts)?
You can use npm install ngx-stripe
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
// Import your library
import { NgxStripeModule } from 'ngx-stripe';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxStripeModule.forRoot('***your-stripe-publishable key***'),
LibraryModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Read more
no need to import in app/app.module.ts,
in pages/payment/payment.page.ts;u need declare let Stripe
Related
I am trying to use Angular flex-layout in one of my modules but I cannot make it work.
When I import flex-layout in app module it works just fine but only in the app component.
When I import flex-layout in another module it doesn't work at all. I don't get any errors, it just doesn't work.
My code:
// App module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FlexLayoutModule } from '#angular/flex-layout';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FlexLayoutModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
.
// AppComponent HTML - WORKS
<div fxLayout="row" fxLayoutAlign="center center">
<div fxFlex="30%">
example
</div>
</div>
.
// Other module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FlexLayoutModule } from '#angular/flex-layout';
import { SomeRoutingModule } from './some-routing.module';
import { SomeComponent } from './pages/some-component/some-component.component';
#NgModule({
declarations: [SomeComponent],
imports: [
CommonModule,
FlexLayoutModule,
SomeRoutingModule
]
})
export class GameModule { }
.
// SomeComponent HTML - DOESN'T WORK
<div fxLayout="row" fxLayoutAlign="center center">
<div fxFlex="30%">
example
</div>
</div>
Try importing the GameModule in the AppModule under the imports.
But, I would recommend you to create a shared module and place the flex-layout there beacuse latest Angular versions support shared module and is considered as best practice. More instructions on how to create a shared module is as follows:
https://angular.io/guide/styleguide#shared-feature-module
I’m using Angular 8 with ASP.NET Core 2.2.
I have two pages Index.cshtml and Job newlist.cshtml
In page index.cshtml I use tag <app-job-newlist></app-job-newlist>.
Then in page newlist.cshtml I use tag <app-jobpicload></app-jobpicload>
When loading page newlist.cshtml, I see error:
ERROR Error: "The selector "app-job-newlist" did not match any elements"
this my code app-modules.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
//import { CommnetComponent } from './commnet/commnet.component';
import { CommentComponent } from './comment/comment.component';
import { JobListComponent } from './job-list/job-list.component';
import { JobServiceService } from './services/job-service.service';
import { JobLoadFileComponent } from './job-load-file/job-load-file.component';
#NgModule({
declarations: [
CommentComponent,
JobListComponent,
JobLoadFileComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [JobServiceService],
bootstrap: [ JobListComponent]
})
export class AppModule { }
Explain:
Every component you want to use in your angular app have to explicit
import in correct module or else you will see that error because
angular cant find selector tag for that component
Fix
Make sure to import your app-job-newlist to your module
I'm using angular6-json-schema-form in Angular v6 project. I installed it with command:
$ yarn add angular6-json-schema-form
I imported Bootstrap4FrameworkModule like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { Bootstrap4FrameworkModule } from 'angular6-json-schema-form';
import { AppComponent } from './app.component';
#NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule
Bootstrap4FrameworkModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And my component is like the following:
<json-schema-form
loadExternalAssets="true"
[schema]="schema"
(onSubmit)="submit($event)">
</json-schema-form>
The generated forms works fine but the Bootstrap4 styling doesn't work. I have no styling only plain html.
Never mind I found the solution in Documentation. I need to specify the template/framwork in the component HTML:
<json-schema-form
loadExternalAssets="true"
[schema]="schema"
framework="bootstrap-4"
(onSubmit)="submit($event)">
</json-schema-form>
I am new on angular 2. I was following the legacy quick-start application, Tour of Heroes.
I created services as mentioned in the application.
I have a service HeroService. Which is used to pull all the heroes data.
I have included the HeroService at the app.module file as provider to be able to access it through out the application for all application.
My app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'heroes',
component: HeroesComponent
}
])
],
declarations: [ AppComponent, HeroesComponent, HeroDetailComponent ],
providers: [ HeroService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And my Component File where I want to Access the HeroService to get data is:
export class HeroesComponent implements OnInit {
constructor(private heroService: HeroService) { }
}
The problem is I am getting an error like this, when i build the project :
Cannot find name 'HeroService'.
I have followed all the steps correctly. If I import the HeroService in my HeroesComponent, it seems to work. But fails when not imported.
Am I missing some step. As far as I understood declaring the provider on app.module will register it to use throughout the application/components without need of importing it each time.
Please correct me If I am wrong somewhere.
You need to import inside the component as well
import { HeroService } from './hero.service';
I am doing the Angular2 Heroes Tutorial:
https://angular.io/docs/ts/latest/tutorial/toh-pt1.html
in plain Javascript (not Typescript) and i am having trouble to Import the Forms Module as mentioned: (description is only for Typescript):
Before we can use two-way data binding for form inputs, we need to import the FormsModule package in our Angular module. We add it to the NgModule decorator's imports array. This array contains the list of external modules used by our application.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
#NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
When i am adding the Forms module to my app.module.js import array, it fails to find the module:
zone.js:129 Uncaught Error: Unexpected value 'undefined' imported by the module 'class2'
Here is my app.module.js:
(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule, ng.common.FORM_DIRECTIVES],
declarations: [ app.AppComponent],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
in my node_modules folder the Forms module exists. If i remove "ng.common.FORM_DIRECTIVES" from the imports array, no error is thrown.
The Content of console.dir(ng) is:
Object
common:Object
compiler:Object
core:Object
coreTokens:Object
platformBrowser:Object
platformBrowserDynamic:Object
probe
:
inspectNativeElement(element /** TODO #9100 */)
__proto__:Object
The content of console.dir(ng.forms) is:
undefined
I am sorry, i found the error. As so often it was nothing having to do with typescript or angular, i just had to add the script tag in the index.html file to load the forms.umd.js:
<script src="../node_modules/#angular/forms/bundles/forms.umd.js"></script>
now i can import the Forms Module with the following code and i can use the ngModule functionality:
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
declarations: [ app.AppComponent],
bootstrap: [ app.AppComponent ]
})
Try using import { FORM_DIRECTIVES } from 'angular2/common';
Source: Angular 2 two way binding using ngModel is not working
EDIT:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FORM_DIRECTIVES } from 'angular2/common';
import { AppComponent } from './app.component';
#NgModule({
imports: [
BrowserModule,
FORM_DIRECTIVES
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
If this doesn't work, post the console.dir(ng); again( with this code in use ).