Ionic 2 Can't resolve all parameters for InAppBrowser - javascript

I don't understand why I get the following error when I use the native InAppBrowser plugin : Can't resolve all parameters for InAppBrowser
import { Component } from '#angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { InAppBrowser } from 'ionic-native';
#Component({
selector: 'page-sign-in',
templateUrl: 'sign-in.html',
providers: [ InAppBrowser ]
})
export class SignInPage {
constructor(public navCtrl: NavController, public platform: Platform, public inAppBrowser: InAppBrowser ) {
};
}

You don't need to add InAppBrowser to the providers array and you also don't need to inject it in the constructor.
Simply import it in the beginning of the page (as you did), and then use it anywhere in the code like that:
openPage() {
new InAppBrowser('https://google.com', '_system');
}

Related

Angular/Typescript - Getting Warning for Circular dependency

I am facing circular dependency warning in my current project. I need some help to fix this warning issue. I have searched StackOverflow or tech blogs to fix this issue. Unfortunately, I am ending with no proper solution. It will greater if someone helps me with this.
Below is the project folder structure.
src
app
services
slice
slice.service.ts
slices
home
help
help.component.html
help.component.ts
home.module.ts
index.ts
WARNING in Circular dependency detected:
src\app\slices\home\help\help.component.ts -> src\app\services\slice\slice.service.ts ->
src\app\slices\index.ts -> src\app\slices\home\help\help.component.ts
help.component.ts
import { ChangeDetectionStrategy, Component, OnInit } from '#angular/core'
import { select, Store } from '#ngrx/store'
import { Observable } from 'rxjs'
// components
import { BaseSliceComponent } from '#app/components/slice/base-slice.class'
// services
import { SliceService } from '#app/services/slice/slice.service'
// models
import { SliceOptions } from '#app/models/slice/slice.model'
// selectors
import config from './store/victims.selector'
#Component({
selector: 'app-help',
templateUrl: './help.component.html',
styleUrls: ['./help.component.scss'],
})
export class HelpComponent extends BaseSliceComponent implements OnInit {
config: Observable<SliceOptions> = this.store.pipe(select(config))
constructor(private store: Store<any>, private sliceService: SliceService) {
super()
}
ngOnInit(): void {}
}
slice.service.ts
import {
ComponentRef,
Injectable,
ViewContainerRef
} from '#angular/core'
import { Router } from '#angular/router'
import { Store } from '#ngrx/store'
import SliceMap from '#app/slices'
import { SliceNameKeys } from '#app/models/slice/slice.model'
#Injectable({
providedIn: 'root'
})
export class SliceService {
private sliceStack: ComponentRef<any>[] = []
private sliceHost!: ViewContainerRef
constructor(
private store: Store<any>,
private router: Router,
) { }
create(
name: SliceNameKeys,
id?: string | undefined,
shouldClear?: boolean,
index?: number
) {
id = id ?? name // if no id specified keep name as id
const slice = SliceMap[name]
}
}
slices/index.ts
import { SliceNames } from '#app/models/slice/slice.model'
// components
import { AboutUsComponent } from './home/aboutus/aboutus.component'
import { HelpComponent } from './home/help/help.component'
const SliceMap: SliceNames = {
help: HelpComponent,
aboutUs: AboutUsComponent
}
export default SliceMap
base-slice.class.ts
export abstract class BaseSliceComponent {
id = ''
}
There is no right solution or tool that can find circulation dependency automatically in your project.
You just need to carefully check each service and injectable that is not circularly dependent.
Like
A->B and B->A
You need to check-in each service dependency as well.

Meterial Design javascript method from Angular 7 component

*Solved it by using: 'declare var md:any;' after imports *
I am building a website in which I am using 'creative tim template for dashboard'
I am using date and time picker, the issue I am facing is the DateTime picker is initialized only once and 'it worked when the component and loaded for the first time but when I switch components then DateTime picker stop working',
the solution that I've found out is I have to initialize DateTime picker every time component is loaded by using the initialize method in the component
but then I receive the error src/app/components/booktrip/booktrip.component.ts(24,5): error TS2304: Cannot find name 'md'.
here's my code
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup,FormControl, Validators } from '#angular/forms';
import { Trip } from '../../mockups/trip.mockup';
#Component({
selector: 'app-book-trip',
templateUrl: './book-trip.component.html',
styleUrls: ['./book-trip.component.css']
})
export class BookTripComponent implements OnInit {
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
md.initFormExtendedDatetimepickers();
}
bookTrip(trip) {
console.log(trip);
}
}
My angular.json is
"scripts": [
"src/assets/js/core/jquery.min.js",
"src/assets/js/core/popper.min.js",
"src/assets/js/core/bootstrap-material-design.min.js",
"src/assets/js/plugins/perfect-scrollbar.jquery.min.js",
"src/assets/js/plugins/moment.min.js",
"src/assets/js/plugins/sweetalert2.js",
"src/assets/js/plugins/jquery.validate.min.js",
"src/assets/js/plugins/jquery.bootstrap-wizard.js",
"src/assets/js/plugins/bootstrap-selectpicker.js",
"src/assets/js/plugins/bootstrap-datetimepicker.min.js",
"src/assets/js/plugins/jquery.dataTables.min.js",
"src/assets/js/plugins/bootstrap-tagsinput.js",
"src/assets/js/plugins/jasny-bootstrap.min.js",
"src/assets/js/plugins/fullcalendar.min.js",
"src/assets/js/plugins/jquery-jvectormap.js",
"src/assets/js/plugins/nouislider.min.js",
"src/assets/cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js",
"src/assets/js/plugins/arrive.min.js",
"src/assets/buttons.github.io/buttons.js",
"src/assets/js/plugins/chartist.min.js",
"src/assets/js/plugins/bootstrap-notify.js",
"src/assets/js/material-dashboard.min40a0.js",
"src/assets/demo/demo.js",
"src/assets/demo/jquery.sharrre.js"
]
and the error i am getting is
Error
I am not able to generate production build.
I am stuck for too long.. is there any possible solution ??
I think it's only a TypeScript error, and that md is actually defined -it's just that TypeScript doesn't know about it-.
Have you tried importing it directly to the files where you use md?
import * as md from 'material-dashboard';
You can read more about it here: https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af
This is how I think your component should look like, in the end:
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup,FormControl, Validators } from '#angular/forms';
import { Trip } from '../../mockups/trip.mockup';
import * as md from 'material-dashboard';
#Component({
selector: 'app-book-trip',
templateUrl: './book-trip.component.html',
styleUrls: ['./book-trip.component.css']
})
export class BookTripComponent implements OnInit {
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
md.initFormExtendedDatetimepickers();
}
bookTrip(trip) {
console.log(trip);
}
}

Application Insights does not track unhandled browser exceptions in Angular app

I'm experiencing an issue with the Microsoft Application Insights SDK for JavaScript that was closed/fixed awhile ago: https://github.com/Microsoft/ApplicationInsights-JS/issues/282
I created a brand new Angular app using the Angular CLI. Then I made these changes, following this article.
Added a monitoring service:
import {Injectable} from '#angular/core';
import {AppInsights} from 'applicationinsights-js';
#Injectable()
export class MonitoringService {
private config: Microsoft.ApplicationInsights.IConfig = {
instrumentationKey: 'KEY_GOES_HERE',
enableDebug: true,
verboseLogging: true
};
constructor() {
if (!AppInsights.config) {
AppInsights.downloadAndSetup(this.config);
}
}
logPageView(name?: string, url?: string, properties?: any, measurements?: any, duration?: number) {
AppInsights.trackPageView(name, url, properties, measurements, duration);
}
logEvent(name: string, properties?: any, measurements?: any) {
AppInsights.trackEvent(name, properties, measurements);
}
trackException(exception: Error) {
AppInsights.trackException(exception);
}
}
Added it to my app.component.ts:
import {Component, OnInit} from '#angular/core';
import {MonitoringService} from './monitoring.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MonitoringService]
})
export class AppComponent implements OnInit {
title = 'app works!';
constructor(private monitoringService: MonitoringService) { }
ngOnInit() {
this.monitoringService.logPageView();
}
throwAnException() {
this.monitoringService.trackException(new Error('manually track exception'));
throw 'this should appear in app insights'; // but it doesn't
}
}
Made a simple button for throwing the exception in my app.component.html:
<h1>
{{title}}
</h1>
<div (click)="throwAnException()">Click to throw an exception</div>
Logging a page view works, as does tracking the exception by explicitly calling trackException. From reading the documentation and various articles, I was under the impression that uncaught exceptions would always automatically get sent to Application Insights. However, I am not seeing any of those show up in the portal.
What could I be missing here?
Using these versions:
applicationinsights-js: 1.0.11
#types/applicationinsights-js: 1.0.4
I've struggles with the same thing and here is the things you need to know to hack it through:
What is happenning?
Angular catches all the exceptions (swallows them!) and just logs them inside console. I have not seen this behavior being explicitly told in any documentation, but I've tested this in code, so trust me. On the other hand only uncaught exceptions are autocollected! (see here). For collecting caught exceptions ( as is mostly the case when using angular framework) you have to call trackException() explicitly in your code.
How to solve it :
We will implement a service (called MonitoringService in code below) to communicate with azure application insights. Then we will tell angular to use this service to log exceptions in azure ai, instead of logging just into browser console, by extending ErrorHandler class.
1) implement MonitoringService:
We'll be using a service named MonitoringService to communicate with azure application insights. Implement that service like this:
import { Injectable } from "#angular/core";
import { ApplicationInsights } from "#microsoft/applicationinsights-web";
import { environment } from "#env/environment";
#Injectable({
providedIn: "root",
})
export class MonitoringService {
private appInsights: ApplicationInsights;
constructor() {}
startMonitoring(): void {
this.appInsights = new ApplicationInsights({
config: {
instrumentationKey: environment.appInsights.instrumentationKey,
},
});
this.appInsights.loadAppInsights();
this.appInsights.trackPageView();
}
logException(exception: Error, severityLevel?: number) {
this.appInsights.trackException({
exception: exception,
severityLevel: severityLevel,
});
}
}
startMonitoring() should be called on app start up.
2) start monitoring on app start up:
Angular projects mostly have a app.component.ts file which belongs to the root module and is bootstrapped/initialized as the first component. By the term "on app start up", I actually mean the time this component is being initialized.
We'll create an instance of MonitoringService and have it start its job:
import { Component } from '#angular/core';
import { MonitoringService } from 'services/monitoring.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(
private monitoringService: MonitoringService
) {
this.monitoringService.startMonitoring();
}
}
3) Log errors into application insights, before they are swallowed by framework:
Extend ErrorHandler class in your project. This class is actually a hook for centralized exception handling in angular spa. Use this hook, to log exceptions before they are swallowed by framework:
import { Injectable, ErrorHandler } from '#angular/core';
import { MonitoringService } from './monitoring.service';
#Injectable({
providedIn: 'root'
})
export class GlobalErrorHandlerService implements ErrorHandler {
constructor(private monitoringService: MonitoringService) { }
handleError(error: any): void {
console.error(error);
this.monitoringService.logException(error);
}
}
4) Register the ErrorHandler with Angular:
In the AppModule make sure to register this Handler with Angular:
#NgModule({
providers: [{provide: ErrorHandler, useClass: GlobalErrorHandlerService}]
})
class AppModule {}
I don't think AppInsights has any knowledge of Angular and the other way around, Angular doesn't know about app insights so you'll probably have to add this in by yourself using a custom ErrorHandler. Have a look at the ErrorHandler official documentation. If you put your this.monitoringService.trackException call in the handleError there it should work fine.

How to import js file in typescript?

I want to import js file in typescript.
And I want to access object and function in the js files.
Also I added js file in index.html but It doesn't working too.
so I find a clue that "import '[js file path]'" but it doesn't working.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { NavParams } from 'ionic-angular';
import '../../pages/mobile.js';
#Component({
selector: 'page-success',
templateUrl: 'success.html'
})
export class SuccessPage {
constructor(public navCtrl: NavController, public navParms: NavParams) {
let centerPos = new atlan.maps.UTMK(953933.75, 1952050.75);
}
}
This is success.ts file. I want to find 'atlan' object.
Give me a solution please. Thx a lot!
You have to use the declare keyword so you do not get any compilation errors. You can do the following
import { Component } from '#angular/core';
....
/* Here you are telling typescript compiler to
ignore this variable it did not originate with typescript.*/
declare var atlan: any;
#Component({
selector: 'page-success',
templateUrl: 'success.html'
})
export class SuccessPage {
....
}
In your file ../../pages/mobile.js, you must export your atlan object (if you can edit this file of course), then, you import it the same way you do with everything.

How to access parent navController ionic 2

I'm learning Ionic 2 by building a simple app, but I've ran into a problem I can't solve.
The app has a ion-nav for the login page, after logging in it goes into a tabs navigator. So the app nav would be something like:
app<Nav> {
LoginPage,
restrictedTabs<Nav> {
Page1,
...
}
}
My problem is I don't know how to access appNav while I'm inside Page1, so that I can, for example, logout the user and block him from "restrictedTabs".
I've tried as the docs say with #ViewChild
import {Component, ViewChild} from '#angular/core';
import {NavController} from 'ionic-angular';
#Component({
templateUrl: 'page1url...'
})
export class ProfilePage {
#ViewChild('appNav') appNav : NavController
constructor(private _nav: NavController) {
}
pushNewPlace() {
console.log(this._nav.rootNav);
console.log(this._nav.parent);
}
ngAfterViewInit() {
console.log(this.appNav);
}
}
But appNav is always undefined, as is rootNav (which I've seen in some tutorial...). If I try #ViewChild('appNav') on LoginPage controller it works good
Because your navcontroller is local, you need to get access to the rootNav.
that is done thanks to the appController.
Tabs are creating a view inside the 'root' view.
In the page loaded inside one of the tabs :
First, import Nav from ionic-angular, same place as navController
import { App, NavController } from 'ionic-angular';
Be sure to have your loginPage also
import { LoginPage } from 'pages/login/login';
then provide it in your constructor :
constructor(public navCtrl: NavController, public appCtrl: App)
now you can acces the rootnav:
this.appCtrl.getRootNav().setRoot(myLoginPage);

Categories