These are chat archives for angular/angular-2-ionic-2

27th
Sep 2016
amay0048
@amay0048
Sep 27 2016 02:53
Has anyone got angular2 setup for e2e testing. I'm trying to configure bootstrapModule to inject Http with MockBackend but I'm having no luck
ronaksbhavsar
@ronaksbhavsar
Sep 27 2016 07:14
HI all , how to capure image for pwa in ionic 2?
even in browser also in devices
i have implemented cordova native capture camera plugins it works on devices but not in web browsers
Dimitris
@skoubin
Sep 27 2016 11:07

Hi guys. I am working on an Ionic 2 application.

I have created an interceptor for the Http provider which works fine. The problem starts when I need to inject another service(UserService) to the CustomHttp provider. When I do that I get null for UserService during injection. This kind of makes sense as the UserService has a dependency back to Http provider..

Is there any "Injector" provider that I can inject to CustomHttp provider so I can get the UserService on Run time?
If not, is there any workaround pattern that I can avoid this circular dependency issue?

This message was deleted

This is how I inject the CustomHttp provider:

ionicBootstrap(MyApp,
  // null,
  [UserService,
    HTTP_PROVIDERS,
  provide(Http, {
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, userService: UserService) => new CustomHttp(backend, defaultOptions, userService),
    deps: [XHRBackend, RequestOptions]
  })],
  {tabsHideOnSubPages:"true"});

and this is how the CustomHttp looks like..

.....

@Injectable()
export class CustomHttp extends Http {

  constructor(backend: ConnectionBackend,
              defaultOptions: RequestOptions,
              private userService: UserService
  ) {
    super(backend, defaultOptions);

    console.log("custom http init");
    console.log(userService);
  }
    ......
}
acorduan
@acorduan
Sep 27 2016 12:25
@jspenc72 Thanks for you anwser ! Actually, i already did an ionic 1 application which is communicating with an kind of scale ! So, i do get the weight value via bluetooth on my app, but it's quite slow ! So i was wondering if ionic2 is better on this point ? So if it's not, i won't waste time and directly go on a native app :) !
Nishchit
@Nishchit14
Sep 27 2016 18:51
Any idea when Ionic2 supports stable Angular2 ?
carlosnat
@carlosnat
Sep 27 2016 19:37
hello everyone
plase can you help me with this topic. ionic2 with leaflet?
some post that can i read?
tips?
freshdev1
@freshdev1
Sep 27 2016 20:18
Hello Everybody.
I am faced with a frustrating issue.
I have a component:
export class ComparePage extends BaseController {
This is the definition of BaseController:
export abstract class BaseController {
BaseController has two properties:
public serverRecord: any;
public clientRecord: any;
I have binded them in the HTML of the ComparePage component.
The problem is, these values are populated in a Promise
But the changes are not reflected on the UI, until I click anything on UI which invokes some backend logic.
carlosnat
@carlosnat
Sep 27 2016 20:22
and how do you put the bind in your html?
freshdev1
@freshdev1
Sep 27 2016 20:23
<ion-item-group>
  <ion-item [ngStyle]="{'color': ApplyComparison(serverRecord.id,clientRecord.id)}">{{clientRecord.id}}</ion-item>
  <ion-item [ngStyle]="{'color': ApplyComparison(serverRecord.contactName,clientRecord.ContactName)}">{{clientRecord.ContactName}}</ion-item>
  <ion-item [ngStyle]="{'color': ApplyComparison(serverRecord.contactPhone,clientRecord.ContactPhone)}">{{clientRecord.ContactPhone}}</ion-item>
  <ion-item [ngStyle]="{'color': ApplyComparison(serverRecord.issueText,clientRecord.IssueText)}">{{clientRecord.IssueText}}</ion-item>
  <ion-item [ngStyle]="{'color': ApplyComparison(serverRecord.key,clientRecord.Key)}">{{clientRecord.Key}}</ion-item>
  <ion-item [ngStyle]="{'color': ApplyComparison(serverRecord.showKey,clientRecord.ShowKey)}">{{clientRecord.ShowKey}}</ion-item>
  <ion-item [ngStyle]="{'color': ApplyComparison(serverRecord.customerKey,clientRecord.CustomerKey)}">{{clientRecord.CustomerKey}}</ion-item>
  <ion-item>
    <ion-checkbox [(ngModel)]="localValueSaving" (click)="SetRecordSaving(false)"></ion-checkbox>
  </ion-item>

</ion-item-group>
simple binding is there
the values are not shown on the UI, until I invoke the (click)="SetRecordSaving(false)"
carlosnat
@carlosnat
Sep 27 2016 20:26
did you try to set the values in the constructor?
freshdev1
@freshdev1
Sep 27 2016 20:26
constructor of? ComparePage?
I cannot do that. The values are not there at the time of class initiation.
carlosnat
@carlosnat
Sep 27 2016 20:29
i know, your values come from the server in the promise. is for check that everything is fine
freshdev1
@freshdev1
Sep 27 2016 20:29
my understanding is the following:
  • Promise is invoked.
  • Method process is completed shortly.
  • Meanwhile UI is rendered.
  • Then Promise is resolved.
  • When I click anything on the UI which invokes the backend logic.
  • The binding engine checks if something is changed from the last time and renders the change
Sorry but I can't understand you clearly, can you elaborate a little?
carlosnat
@carlosnat
Sep 27 2016 20:32
Sorry i'm not a expert, i was looking if i can help you but i cant understand well your problem
can you paste your code with the promise?
freshdev1
@freshdev1
Sep 27 2016 20:32
Hmmmm doing..
carlosnat
@carlosnat
Sep 27 2016 20:33
..uhmm and you have any idea using leaflet with ionic2?
i was working with 1 but we want to upgrade
freshdev1
@freshdev1
Sep 27 2016 20:33
No I have not used leaflet currently. Let me google and see if I can help you on that.
whats happening?
carlosnat
@carlosnat
Sep 27 2016 20:34
i do a lot search, one day in that
i find this place in the process
freshdev1
@freshdev1
Sep 27 2016 20:35
Are you able to integrate it in your project?
where are you currently, what issue you are facing. Won't be able to help you before knowing that. :smile:
carlosnat
@carlosnat
Sep 27 2016 20:38
i think, i do this step:
first: npm install -g typings
second: npm install -g typescript
third: in my folder npm install leaflet.
fourth: Rename typings/index.d.ts to typings/main.d.ts.
in my .ts
import * as Leaflet from 'leaflet'
and cool no error
well not said that module dont find
freshdev1
@freshdev1
Sep 27 2016 20:39
did you install the typings for the leaflet?
carlosnat
@carlosnat
Sep 27 2016 20:40
uhhhh.... what did you mind?
freshdev1
@freshdev1
Sep 27 2016 20:40
can you paste your typings/main.d.ts?
well first you should have not renamed the typings/index.d.ts to main.d.ts.
carlosnat
@carlosnat
Sep 27 2016 20:41
yes i can wait
i renamed.. xD
/// <reference path="globals/es6-shim/index.d.ts" />
/// <reference path="globals/leaflet/index.d.ts" />
if i dont rename the file, the console said that the module can't be found
freshdev1
@freshdev1
Sep 27 2016 20:43
hmmm. Seems reasonable. but if you created your project by running:
ionic start cutePuppyPics --v2
then I believe you should have not done that.
carlosnat
@carlosnat
Sep 27 2016 20:44
but when i run the service said index.d.ts dont found
so i make a copy then i hace index.d.ts and main.d.ts
and both error disapier
no with, ionic start testUrba blank --v2
freshdev1
@freshdev1
Sep 27 2016 20:46
I see. If you had created without using the blank then you would have got the typings folder and with appropriate files.
Nevermind. You should have index.d.ts. and all other modules' index.d.ts files are referenced in it
so as to satisfy the tsc.
After that, if you are getting module cannot be found by doing what I said above, it means the problem is somewhere else.
Frank Cooke
@platypusrex
Sep 27 2016 20:49
Hey everyone. Has anyone has attempted using PostCSS in an ionic project?
freshdev1
@freshdev1
Sep 27 2016 20:49
The method of including the JS libraries is what I said above.
carlosnat
@carlosnat
Sep 27 2016 20:50
uhhh do you suggest that i have to build without blank?
with other ionic template?
freshdev1
@freshdev1
Sep 27 2016 21:09
yes
carlosnat
@carlosnat
Sep 27 2016 21:10
well i wil try, is a demo that i have to build to see is all tech work fine in ionic2
thanks a lot for your time
are you uisng the new http obj ?
carlosnat
@carlosnat
Sep 27 2016 21:17
i dont know what is happend
BUT IS WORKING XDDDDDD
thanks a lot
freshdev1
@freshdev1
Sep 27 2016 22:05
:smile:
@carlosnat working in your old project?
No I am not using new HTTP Object.
Basically I am using Azure Mobile Cordova SDK, so I do not need to use the native things for various things.
carlosnat
@carlosnat
Sep 27 2016 22:11
uhhhh well that is tuff man
i didnt use azure
i didnt have the oportunity
freshdev1
@freshdev1
Sep 27 2016 22:13
Hmmm. You didn't answer my first question? Where did you get that working? :smile:
Leaflet I mean to ask.
carlosnat
@carlosnat
Sep 27 2016 22:14
ahhh ok ok
freshdev1
@freshdev1
Sep 27 2016 22:14
:laughing:
carlosnat
@carlosnat
Sep 27 2016 22:14
xD i erase the main.d.ts
leave alone the index.d.ts
and re run the server
is crazy is something already do
now i'm figthing with the leaflet's css
i put @import 'leaflet' inside the theme->app.core.scss
the system didnt find it
freshdev1
@freshdev1
Sep 27 2016 22:16
Awesome!
:smile:
carlosnat
@carlosnat
Sep 27 2016 22:16
yes conclusion
freshdev1
@freshdev1
Sep 27 2016 22:17
Sorry but I won't be able to help you in the scss.... :smile:
I do not know anything about it. :worried:
carlosnat
@carlosnat
Sep 27 2016 22:17
install typings = npm install -g typings
install typescript = npm install -g typescripts
in your folder: install you javaScript library
freshdev1
@freshdev1
Sep 27 2016 22:18
We have a separate guy that takes care of that.
carlosnat
@carlosnat
Sep 27 2016 22:18
after @import in your ts file the library
jejejejeje dont worry body
thanks a lot
Frank Cooke
@platypusrex
Sep 27 2016 22:32
Has anyone attempted using PostCSS in an ionic project?
?
?
?
?
Fucking crickets anytime I've asked a question here...awesome and done
freshdev1
@freshdev1
Sep 27 2016 22:38
@platypusrex what are you stuck into?
have you integrated it or stuck in that?
carlosnat
@carlosnat
Sep 27 2016 22:40
what is postCSS?
Frank Cooke
@platypusrex
Sep 27 2016 22:40
@freshdev1 I actually just discovered it today. Need a solution for theming multiple apps. Colors configs are stored as data in api. Need a way to apply them app wide.
@freshdev1 I created a solution using css variables and appending a style node to the head, but css variables aren't widely supported yet.
@freshdev1 Found this and it looks promising: https://github.com/lemonmade/postcss-custom-colors
carlosnat
@carlosnat
Sep 27 2016 22:41
are you in ionic1 or 2?
Frank Cooke
@platypusrex
Sep 27 2016 22:41
ionic 2
carlosnat
@carlosnat
Sep 27 2016 22:41
it s jsLibrary?
Frank Cooke
@platypusrex
Sep 27 2016 22:42
from github read.me:
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
freshdev1
@freshdev1
Sep 27 2016 22:43
@platypusrex see if you are stuck in understanding PostCSS. You are in the wrong room.
Frank Cooke
@platypusrex
Sep 27 2016 22:43
apparently a lot of people are opting for this over sass/less
just wanted to see if anyone has tried using this in a project alongside sass
freshdev1
@freshdev1
Sep 27 2016 22:44
We can only help you with Ionic 2 stuff.
I see.
carlosnat
@carlosnat
Sep 27 2016 22:44
wow not me sorry
Frank Cooke
@platypusrex
Sep 27 2016 22:46
well...this would be related to an ionic project, as I'm seeing if anyone has incorporated it into an ionic project. But thanks anyway man. I've posted legit ionic questions here before and no one has ever even answered
freshdev1
@freshdev1
Sep 27 2016 22:46
Yes thats been the case with me too.
Frank Cooke
@platypusrex
Sep 27 2016 22:47
Yeah...I've been reading through the docs for the past hour or so
freshdev1
@freshdev1
Sep 27 2016 22:47
i cannot help you much, since I do not know much about scss... :smile:
Else I must have helped you.
Frank Cooke
@platypusrex
Sep 27 2016 22:48
Figured asking if anyone else has attempted it was a shot in the dark. Thanks for responding though
Basically much of the community have moved to slack.
Frank Cooke
@platypusrex
Sep 27 2016 22:50
ahh...very cool. Use slack daily so very good to know. Thanks again man!
freshdev1
@freshdev1
Sep 27 2016 22:51
:+1:
carlosnat
@carlosnat
Sep 27 2016 22:58
blob
awesome
freshdev1
@freshdev1
Sep 27 2016 22:59
@carlosnat :+1: Awesome! :)
You've done that, finally!