EDIT: I managed to make the plugin work, but when I test the app on my iPhone and click the button, Xcode sends me a warning: THREAD WARNING: ['QRScanner'] took '468.501953' ms. Plugin should use a background thread.
I tried so many things and follow so many articles and tutorials (also here, on SO) to get rid of this. I'm building an Ionic app, using the QR Scanner plugin that this framework provides. My app.module.ts is:
// Here are the basic Ionic import statements.
// Eventually, I import the plugin to scan QR codes.
import { QRScanner, QRScannerStatus } from '#ionic-native/qr-scanner';
#NgModule({
declarations: [ MyApp, HomePage ],
imports: [ BrowserModule, IonicModule.forRoot(MyApp) ],
bootstrap: [IonicApp],
entryComponents: [ MyApp, HomePage ],
providers: [ StatusBar, SplashScreen, QRScanner,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule { }
The folder structure is:
My app has only one page, HomePage, and the content of the src/pages/home/home.ts file is:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '#ionic-native/qr-scanner';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private qrScanner: QRScanner) { }
scanQrCode() {
this.qrScanner.prepare().then((status: QRScannerStatus) => {
if (status.authorized) {
let scanSub = this.qrScanner.scan().subscribe((text: string) => { console.log('Scanned something', text);
this.qrScanner.hide();
scanSub.unsubscribe();
});
} else if (status.denied) {
// ...
} else {
// ...
}
}).catch((e: any) => console.log('Error is', e));
}
}
Inside the src/pages/home/home.html file, I have:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="scanQrCode()"></button>
</ion-content>
I build the app and run it on my iPhone 5, but when I click the button to scan a code, Xcode sends this: Error is [Object object]. Do you know why?
Related
I created an Ionic 5 + Capacitor + Firebase project and added the latest version of AngularFire to it.
Everything works perfectly on Desktop but when I launch on my iPhone, there is an error (Well, there is no error but the redirection of my first page does not work).
So, no error in the logs but a white screen.
After much research, I came to the following conclusion.
I use AngularFireAuthGuard as follows :
{
path: '',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
...canActivate(() => redirectUnauthorizedTo(['landing']))
}
And my research made me realize that with latest version of AngularFire firebase Auth is not detected properly.
So I found a piece of code that solved the problem for me for a while :
import { Component } from '#angular/core';
import { Capacitor } from '#capacitor/core';
import { initializeApp } from 'firebase/app';
import { indexedDBLocalPersistence, initializeAuth } from 'firebase/auth';
import { environment } from 'src/environments/environment';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor() {
const app = initializeApp(environment.firebase);
if (Capacitor.isNativePlatform) {
initializeAuth(app, {
persistence: indexedDBLocalPersistence
});
}
}
}
As soon as I wanted to add the onAuthStateChanged in my app.component I got the following error :
auth/already-initialized
In my opinion, it might be because my app.module.ts looks like this :
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
AppRoutingModule,
AngularFireAuthModule,
AngularFireModule.initializeApp(environment.firebase)
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
My application is initialized here but if I delete it I get another injection error...
Do you have any ideas how I can fix the problem ?
Wondering if my problem is similarly related: signin link works on web and android, but in iOS the app opens, I see the link is received but then the signInWithEmailLink() promise neither resolves nor catches.
This is the code; I see the console.log and thereafter there's silence:
console.log(`incoming Passwordless Login Link for mail ${email}: ${uri}, ${originalLink}`);
signInWithEmailLink(this.auth, email, originalLink)
.then(cred => {
console.log("successfully logged in", email, cred);
window.localStorage.removeItem("emailForSignIn");
this.router.navigateByUrl("/home");
})
.catch((err) => {
console.error("signInLink err", JSON.stringify(err));
this.ngZone.run(() => this.router.navigateByUrl("/pwlsignup"));
});
After the call I do see a few lines of these though, looking into if it is related:
nw_protocol_boringssl_get_output_frames(1301) [C4.1:2][0x7fee0fe19300] get output frames failed, state 8196
2018-11-12 22:12:05.398615-0800 QQBCHAT[37807:7011607] TIC Read Status [4:0x0]: 1:57
EDIT: Yes, mine must be a different issue - and I found the solution too, just if anyone hits this with google search
https://github.com/angular/angularfire/issues/2979#issuecomment-940910213
import {
getAuth,
indexedDBLocalPersistence,
initializeAuth,
provideAuth,
} from '#angular/fire/auth';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
...
provideAuth(() => {
if (Capacitor.isNativePlatform()) {
return initializeAuth(getApp(), {
persistence: indexedDBLocalPersistence,
});
} else {
return getAuth();
}
}),
]
})
I am trying to navigate youtube channel when we click on button in ios, but it was not working, it is perfectly working in android …
Below are the my reference
HTML file
<ion-button class=“youtube_btn” (click)=“openYoutube()”>Our youtube channel</ionic-button>
TS file
import { DomSanitizer } from ‘#angular/platform-browser’;
constructor( private sanitizer: DomSanitizer) {
this.getSafeUrl(“https://www.youtube.com/embed/FSFTBf7frUs”);
}
openYoutube(){
window.open(‘https://www.youtube.com/channel/UCp7eM4-x4K4AeSkiRHfxDbQ’, ‘_system’, ‘location=yes’);
}
getSafeUrl(url) {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
In App Browser
ionic cordova plugin add cordova-plugin-inappbrowser
npm install #ionic-native/in-app-browser
App Availability
ionic cordova plugin add cordova-plugin-appavailability
npm install #ionic-native/app-availability
After installing both the Ionic native plugin we should enlist the InAppBrowser and AppAvailability provider with the principle application module.
After that add below code in app.module.ts
import { AppAvailability } from '#ionic-native/app-availability/ngx';
import { InAppBrowser } from '#ionic-native/in-app-browser/ngx';
import { Platform } from '#ionic/angular';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [],
providers: [
AppAvailability,
InAppBrowser
],
bootstrap: [AppComponent]
})
export class AppModule {}
After that import those two modules in your component Typescript file
import { AppAvailability } from '#ionic-native/app-availability/ngx';
import { InAppBrowser, InAppBrowserObject } from '#ionic-native/in-app-browser/ngx';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(
public platform: Platform,
private appAvailability: AppAvailability,
private inAppBrowser: InAppBrowser) { }
openYoutube() {
let app;
let channel = 'paste Url of your channel'
if (this.platform.is('ios')) {
app = 'youtube://';
} else if (this.platform.is('android')) {
app = 'com.google.android.youtube';
} else {
const browser: InAppBrowserObject = this.inAppBrowser.create('https://www.youtube.com/channel/' + channel, '_system');
return;
}
this.appAvailability.check(app)
.then(
(yes: boolean) => {
console.log(app + ' is available')
// Success
// App exists
const browser: InAppBrowserObject = this.inAppBrowser.create('youtube://channel?id=' + channel, '_system');
},
(no: boolean) => {
// Error
// App does not exist
// Open Web URL
const browser: InAppBrowserObject = this.inAppBrowser.create('https://www.youtube.com/channel/' + channel, '_system');
}
);
}
}
The picture above is the only display when I added Angular Calendar. Does it have conflict with Font Awesome? Because I installed Font Awesome in my Angular project with Angular Material as its main styling and component framework.
HTML:
<mwl-calendar-month-view [viewDate]="viewDate" [events]="events">
</mwl-calendar-month-view>
TS:
import { Component } from '#angular/core';
import { CalendarEvent, CalendarUtils } from 'angular-calendar';
#Component({
selector: 'app-creator-profile-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss'],
})
export class CalendarComponent {
viewDate: Date = new Date();
events: CalendarEvent[] = [];
}
Module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CalendarComponent } from './components/calendar/calendar.component';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import * as moment from 'moment';
import { adapterFactory } from 'angular-calendar/date-adapters/moment';
export function momentAdapterFactory() {
return adapterFactory(moment);
};
#NgModule({
declarations: [
CalendarComponent
],
imports: [
CommonModule,
CalendarModule.forRoot({ provide: DateAdapter, useFactory: momentAdapterFactory })
],
})
export class CreatorProfileModule { }
Oh okay. I forgot to add "./node_modules/angular-calendar/css/angular-calendar.css" in angular.json
That solved this problem when you manually install.
Add in your component encapsulation: ViewEncapsulation.None
. it will work
i'm working in an ASP.NET Core Web Application, using Angular 2 and VS 2015 as IDE. This is totally new for me, so i've been following every tutorial to get this page work. When i finally put everything together i face a routing problem: The page stays in the loading... tag and never show the content in the ModuleViewComponent. Read a lot of stackoverflow questions but I could not fix it.
My main.ts file looks like this:
// main entry point
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
the app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule, Routes } from '#angular/router';
import { NgForm } from '#angular/forms';
import { AppComponent } from './app.component';
import { ModuleViewComponent } from './components/CommonComponents/moduleView.component/moduleView.component';
const myRoutes: Routes = [
{
path: 'home',
component: ModuleViewComponent
},
{
path: '/',
redirectTo: 'home',
pathMatch: 'full'
}
];
#NgModule({
imports: [
RouterModule.forRoot(myRoutes),
BrowserModule,
FormsModule,
HttpModule
],
declarations: [
AppComponent,
NavbarComponent,
ModuleViewComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:'<router-outlet></router-outlet>'
})
export class AppComponent {
}
And the index.cshtml
#{
ViewData["Title"] = "Home Page";
}
<my-app>loading...</my-app>
How can i get this to work and show the component content? Any help is more than welcome, thanks in advance.
I have created a sample application which explains step by step details to create angular (Angular v4) applications with Asp.net MVC framework. Below is the link. Hope this helps you. You have to update route config file in your project so that angular can receive requests.
http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/
http://hive.rinoy.in/routing-in-angular-asp-net-mvc-application/
I am working on a ASP.NET MVC application that has several views that are serviced by a single Controller. The path of one of them is 'home/settings' and looks like this
With Angular2, I created a UserProfileComponent that basically renders a table containing list of the existing users and I would like it to render below User Profiles in the screenshot above:
user-profiles.component.ts
import { Component, Input } from '#angular/core';
import { UserService } from "../../services/userService";
#Component({
selector: 'user-profiles',
providers: [UserService],
template: `
...
`
})
export class UserProfilesComponent {
constructor(userService: UserService) {
userService.getUsers()
.subscribe(
users => this.users = users,
error => console.error('Error: ' + error),
() => console.log('Completedsfsdf!')
);
}
users = [];
}
Using Routing, I managed to render the UserProfileComponent when the settings view is rendered, but it only renders inside the tag inside the AppComponent template and I would like it to render inside my selector inside the settings view. It is also worth noting that the AppComponent is currently rendering inside the _Layout
app.ts
import { Component } from '#angular/core';
import { UserService } from './services/userService';
#Component({
selector: 'my-app',
providers: [UserService],
template: `
<p>Angular 2 is running...</p>
<!-- Routed views go here -->
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
Which causes the table to render only at a layout level (on top of the page) instead on the inside the settings view.
boot.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app';
import { UserProfilesComponent } from './components/settings/user- profiles.component';
import { HomeComponent } from './components/home/home.component';
import { HttpModule } from '#angular/http';
import {UserService} from './services/userService'
import {APP_BASE_HREF} from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
const appRoutes: Routes = [
{
path: 'home/settings',
component: UserProfilesComponent
},
{ path: '', component: HomeComponent }
];
#NgModule({
imports: [BrowserModule, HttpModule, RouterModule.forRoot(appRoutes)],
declarations: [AppComponent, HomeComponent, UserProfilesComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
bootstrap: [AppComponent]
})
export class AppModule { }
My initial approach here is have each section within the settings view to have its own component, so ideally RecordRollover will have its own component and so on. Is this possible?