How to implementing SSL pinning in ionic 3 - ssl

Iam new in Ionic 3 and i want to implement SSL pinning in my application. I am using this plugins https://ionicframework.com/docs/native/http/ and my home.ts looks like this
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {HTTP} from '#ionic-native/http';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public http:HTTP) {
}
ionViewDidLoad() {
this.load();
}
load(){
this.http.get('https://www.dashboard.mambowallet.com', {}, {})
.then(data => {
console.log("connection successful");
console.log(data.status);
console.log(data.data); // data received by server
console.log(data.headers);
})
.catch(error => {
console.log("connection not successful");
console.log(error.status);
console.log(error.error); // error message as string
console.log(error.headers);
});
}
}
And my app.modules.ts looks like this
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import {HTTP} from '#ionic-native/http';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
HTTP,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
I have saved the server SSL certificate at the src/assets folder and when i do ionic serve, on the browser the console outputs this
Am I missing something?

You need to test on a real device. You won't be able to use any cordova or native plugin within Chrome browser/emulator i.e. you cannot use "ionic serve"
Run this command below and use Safari to debug your app.
ionic cordova run ios --device -l --debug --verbose

Related

How to integrate CK-editor with angular 5. I am trying to integrate ck-editor v4 with application, i am getting 'Element Ref is not generic'

I tried integrating ck-editor version5, but so many options are not working. I tried with ck-editor version4, since there are more options but i got "Element Ref is not generic".
I am attaching reference code here....
installed ck-editor through npm
---->> npm install --save ckeditor4-angular
added module to my module
---->> import { CKEditorModule } from 'ckeditor4-angular';
My Code ::
{
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from "#angular/router";
import { HttpClientModule, HTTP_INTERCEPTORS } from
"#angular/common/http";
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
import { CKEditorModule } from 'ckeditor4-angular';
#NgModule({
declarations: [],
imports: [
NgxDatatableModule, ModalModule.forRoot(),
BrowserModule,
HttpClientModule,
FormsModule,
TooltipModule.forRoot(),
RouterModule.forRoot(
appRoutes,
{ useHash: true }
),
CKEditorModule
],
providers: [],
bootstrap: []
})
export class AppModule { }
}

Nativescript angular - module that contains dataform exits in ios without error! lazy loading module

I am developing nativescript-angular app that contains dataform in a module and calling this module using in lazy loading technique. Life is beautiful in Android, but the application exits immediately when I open this module in ios wihtout any error log!
The code is very simple and forward, I can't see where is the problem!
test.component.ts
import { Component, OnInit } from "#angular/core";
import { ActivatedRoute } from "#angular/router";
import { RadDataForm, DataFormEventData } from "nativescript-ui-dataform";
import { UserAddress } from "../../shared/data-services/address";
#Component({
selector: "test",
moduleId: module.id,
templateUrl: "./test.component.html",
styleUrls:["./test.component.css"]
})
export class TestComponent implements OnInit {
private _userAddress: UserAddress;
constructor() {
}
ngOnInit() {
this._userAddress = new UserAddress();
}
get userAddress(): UserAddress {
return this._userAddress;
}
}
test.component.html
<ActionBar class="action-bar">
<NavigationButton [nsRouterLink]="['../../home']" android.systemIcon="ic_menu_back"></NavigationButton>
<Label class="action-bar-title" text="Test"></Label>
</ActionBar>
<ScrollView tkExampleTitle tkToggleNavButton>
<StackLayout>
<RadDataForm tkExampleTitle tkToggleNavButton [source]="userAddress">
</RadDataForm>
</StackLayout>
</ScrollView>
Routing of this module
signup-routing.module.ts
import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { ItemsComponent } from "./test/test.component";
export const COMPONENTS = [ItemsComponent ];
const routes: Routes = [
{ path: "", redirectTo: "testInfo" },
{ path: "testInfo", component: testComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forChild(routes)], // set the lazy loaded routes using forChild
exports: [NativeScriptRouterModule]
})
export class SignupRoutingModule {}
Then we have
signup.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { COMPONENTS, SignupRoutingModule } from "./signup-routing.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
#NgModule({
imports: [
NativeScriptCommonModule, // for rednering actionbar with lazy laoding
NativeScriptFormsModule,
SignupRoutingModule,
NativeScriptUIDataFormModule
],
declarations: [
...COMPONENTS
],
// providers: [SignupService],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class SignupModule { }
And the module is called using lazy loading in the basic routing file like this:
{ path: "signup", loadChildren: "~/app/signup/signup.module#SignupModule", outlet: "homeTab" }
Help is appreciated!
CODE ON GitHub
https://github.com/lighttiger/lazy

Ionic 4 using components on multiple pages

Starting from a clean ionic 4 project (using ionic start --type=angular and the template blank), I'm trying to create a custom angular component that can be used on multiple pages.
However if I use ionic generate component and try too use the generated component test in homepage.html by inserting <app-test></app-test> I get the error:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-test' is not a known element:
1. If 'app-test' is an Angular component, then verify that it is part of this module.
2. If 'app-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("="_blank" rel="noopener" href="https://ionicframework.com/docs">docs will be your guide.
ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-test' is not a known element:
1. If 'app-test' is an Angular component, then verify that it is part of this module.
2. If 'app-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("="_blank" rel="noopener" href="https://ionicframework.com/docs">docs will be your guide.
Here is what my files look like: app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TestComponent } from './test/test.component';
#NgModule({
declarations: [AppComponent, TestComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
test.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
home.page.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
}
home.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { IonicModule } from '#ionic/angular';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HomePage } from './home.page';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage]
})
export class HomePageModule {}
home.page.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
<app-test></app-test>
</ion-content>
And the folder structure as an image
I have tried out several things by now and one work around I found is creating a src/app/shared.module.ts file and declaring and exporting the TestComponent there, and then importing the SharedModule in every page I want to use the component.
However I feel like this work around is not ideal, and there is something I am missing in how to do it cleaner. Any ideas?
Your shared module workaround is actually a good practice in angular and you should stick with that.
For reference: https://angular.io/guide/sharing-ngmodules

prime ng as root angular5

i am working with project in angular5 , where i have different
modules for different entities.
i need to use primeng for component ui ,i installed it properly, test
with demo angular project with single app module :
i have following module:
app (angular generated , app.module.ts)
user(user.module.ts)
1. create user component
2 update user component
admin(admin.module.ts)
1. create admin component
2 . update user component
problem :
when i am working with multiple modules , how to set up primeng in app.module.ts file ?
i am using primeng button in createuser.component with
> <button pButton type="button" label="Click" ></button> <p-button
> label="Click" ></p-button>
i got following error
'p-button' is not a known element:
1. If 'p-button' is an Angular component, then verify that it is part of this module.
2. If 'p-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
(" [ERROR
->]"): ng:///PreMeritModule/AddformComponent.html#1:0
my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
//prime ng needs following modules with browser animation module and froms module
import { PanelModule } from 'primeng/components/panel/panel';
import { ButtonModule } from 'primeng/components/button/button';
import { AppComponent } from './app.component';
import { userModule } from './user/user.module';
import { adminModule } from './admin/admin.module';
// Routing Module
import { AppRoutingModule } from './app.routing';
#NgModule({
imports: [
userModule,
adminModule
BrowserModule,
FormsModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
PanelModule,
ButtonModule
],
declarations: [
AppComponent,
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [AppComponent]
})
export class AppModule { }
Modify this import:
import { NgModule } from '#angular/core';
...to add...
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
...then:
#NgModule({
imports: ...
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
In full:
import { BrowserModule } from '#angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
//prime ng needs following modules with browser animation module and froms module
import { PanelModule } from 'primeng/components/panel/panel';
import { ButtonModule } from 'primeng/components/button/button';
import { AppComponent } from './app.component';
import { userModule } from './user/user.module';
import { adminModule } from './admin/admin.module';
// Routing Module
import { AppRoutingModule } from './app.routing';
#NgModule({
imports: [
userModule,
adminModule
BrowserModule,
FormsModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
PanelModule,
ButtonModule
],
declarations: [
AppComponent,
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Angular 5: 'flash-messages' is not a known element

I'm trying to use the Angular flash message module as shown in this post:
https://www.npmjs.com/package/angular-flash-message
However, I get this error:
> compiler.js:485 Uncaught Error: Template parse errors:
> 'flash-messages' is not a known element:
>
> 1. If 'flash-messages' is an Angular component, then verify that it is part of this module.
> 2. If 'flash-messages' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component
> to suppress this message. ("<app-navbar></app-navbar><div
> class="container">[ERROR
> ->]<flash-messages></flash-messages><router-outlet></router-outlet> </div>"): ng:///AppModule/AppComponent.html#2:8
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { Routes, RouterModule } from '#angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ProfileComponent } from './components/profile/profile.component';
import { RegisterComponent } from './components/register/register.component';
import { ValidateService } from './services/validate.service';
import {FlashMessageModule} from 'angular-flash-message'
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
HomeComponent,
DashboardComponent,
ProfileComponent,
RegisterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule,
FormsModule,
FlashMessageModule
],
providers: [ValidateService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<app-navbar></app-navbar>
<div class="container">
<flash-messages></flash-messages>
<router-outlet></router-outlet>
</div>
registration.component.ts
import { Component, OnInit } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { ValidateService } from '../../services/validate.service';
import { FlashMessage } from 'angular-flash-message';
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
name: String;
username: String;
email: String;
password: String;
constructor(
private validateService: ValidateService,
private flashMessage: FlashMessage
) { }
ngOnInit() {
}
onRegisterSubmit(){
const user = {
name: this.name,
username: this.username,
email: this.email,
password: this.password
}
//Required fields
if(!this.validateService.validateRegister(user)){
//fill in all fields
this.flashMessage.info("Incorrect!")
return false;
}
if(!this.validateService.validateEmail(user.email)){
//email incorrect
return false;
}
}
}
I'm trying to display a flash message after validating the user's input.
I'm new to Angular and MEAN apps and this is actually an app shown in a tutorial using Angular 2.
Can someone help me out? Thanks!
I'm not sure if the
import {FlashMessageModule} from 'angular-flash-message'
works properly. I would suggest using
import {FlashMessageModule} from 'angular2-flash-messages'`.
Their documentation is here: https://www.npmjs.com/package/angular2-flash-messages
I went through the angular-flash messages docs, angular2-flash-message docs (without the 's' at the end), and also angular2-flash-messages (with the 's' at the end), and the only one that worked for me was the last one.
Also, in addition to your imports, I've also found that it helps to make sure you have #angular/common installed, just in case:
npm install #angular/common --save
Hope this helps
ooh i think it shouldn't be
ERRONEOUS
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(fireBase),
FlashMessagesModule
],
it should be
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(fireBase),
FlashMessagesModule.forRoot()
],
I too had the same problem and solved it by adding FlashMessageModule.forRoot() in my imports