I am new to ionic 2,by following this tutorial https://www.joshmorony.com/creating-a-custom-expandable-header-component-for-ionic-2/ i wanted to display the Expandable header component. Here i created the custom component naming ionic g component ExpandableHeader when i import it in app.module.ts.
Below is my app.module.ts code:
import { ExpandableHeader } from '../components/expandable-
header/expandable-header';
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#NgModule({
declarations: [
MyApp,
HomePage,
ExpandableHeader
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
When i try to import it shows the error.How can i solve this error
Try this providers: [StatusBar,SplashScreen,ErrorHandler]
and Try to define provide: and useClass in your page constructor.
Related
I'm trying to send data from Angular to Django and I keep getting the following error message in my browser:
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8000/polls/token", ok: false, …}
error:
error: SyntaxError: Unexpected token N in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:32795:51) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:6802:31) at Zone.runTask (http://localhost:4200/polyfills.js:6579:47) at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:6876:34) at invokeTask (http://localhost:4200/polyfills.js:8014:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:8051:21)
message: "Unexpected token N in JSON at position 0"
stack: "SyntaxError: Unexpected token N in JSON at position 0↵ at JSON.parse (<anonymous>)↵ at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:32795:51)↵ at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:6802:31)↵ at Zone.runTask (http://localhost:4200/polyfills.js:6579:47)↵ at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:6876:34)↵ at invokeTask (http://localhost:4200/polyfills.js:8014:14)↵ at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:8051:21)"
__proto__: Error
text: "None"
__proto__: Object
headers: HttpHeaders
lazyInit: () => {…}
lazyUpdate: null
normalizedNames: Map(0) {}
__proto__: Object
message: "Http failure during parsing for http://localhost:8000/polls/token"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:8000/polls/token"
__proto__: HttpResponseBase
I also get this error from django:
AttributeError at /polls/token
'NoneType' object has no attribute 'set_cookie'
Here is my Angular frontend:
data.service.ts:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
const httpOptions = {
withCredentials: true,
};
#Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
public sendPostRequest(data){
return this.http.post("//localhost:8000/polls/token", data, httpOptions);
}
}
here's an excerpt of myapp.component.ts:
...
constructor(
private dataService: DataService
) {}
...
this.auth2.attachClickHandler(
element,
{},
(googleUser) => {
let token = googleUser.getAuthResponse().id_token;
this.dataService.sendPostRequest(token).subscribe((data: any[])=>{
console.log(data);
});
},
(error) => {
alert(JSON.stringify(error, undefined, 2));
}
);
...
console.log(token) returns a long string of letters&numbers
And here's my Django backend:
polls/views.py:
from django.conf import settings
from django.shortcuts import render
from django.http import HttpResponse, HttpRequest
from django.views.decorators.csrf import ensure_csrf_cookie
#ensure_csrf_cookie
def access_token(request: HttpRequest) -> HttpResponse:
if request.method == 'POST':
token = request.POST.get('body')
return HttpResponse(token)
polls/urls.py:
from django.conf import settings
from . import views
from django.urls import path
urlpatterns = [
path('token', views.access_token, name='access_token')
]
I'm new to django and angular and have been trying to figure this out for a few days now. I can't seem to find out what exactly is wrong.
Would really appreciate the help, Thank you!
I'm using Ember 2.9 and would like to use the "paste" event.
How I can add paste as an customEvent on start up the application:
This is my current app.js:
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
let App;
Ember.MODEL_FACTORY_INJECTIONS = true;
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
I've setup a demo Ember.js 2.9 app at https://github.com/bartocc/stackoverflow-2176861 that demonstrates the code below.
Here's is an example app.js to configure the Ember.js to listen to the paste event:
// /app/app.js
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
let App;
Ember.MODEL_FACTORY_INJECTIONS = true;
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver,
// This is how you make your ember app listen the paste event
customEvents: {
paste: 'paste'
}
});
loadInitializers(App, config.modulePrefix);
export default App;
Find more information in the Ember.js 2.9 API.
Then, make any component listen to the paste event with:
import Ember from 'ember';
export default Ember.Component.extend({
paste(event) {
const text = event.originalEvent.clipboardData.getData('Text');
alert(`you've just pasted the text '${text}'`);
}
});
StackOverflow
I have a little problem with kivy when I'm trying to load a pic from atlas:
D:\Games\Projects\python>py -2 test.py
[INFO ] [Logger ] Record log in C:\Users\%username%\.kivy\logs\kivy_18-03-05_70.txt
[INFO ] [Kivy ] v1.10.0
[INFO ] [Python ] v2.7.14 (v2.7.14:84471935ed, Sep 16 2017, 20:25:58) [MSC v.1500 64 bit (AMD64)]
[INFO ] [Factory ] 194 symbols loaded
[INFO ] [Image ] Providers: img_tex, img_dds, img_sdl2, img_gif (img_pil, img_ffpyplayer ignored)
[INFO ] [Text ] Provider: sdl2
[DEBUG ] [App ] Loading kv <.\my.kv>
[DEBUG ] [App ] kv <.\my.kv> not found
[DEBUG ] [Atlas ] Load <images\a.atlas>
[DEBUG ] [Atlas ] Need to load 1 images
[DEBUG ] [Atlas ] Load <images\a-0.png>
[DEBUG ] [ImageSDL2 ] Load <D:\Games\Projects\python\images\a-0.png>
[TRACE ] [Image ] u'D:\\Games\\Projects\\python\\images\\a-0.png', populate to textures (1)
a.atlas:
{
"a-0.png": {
"logo": [1291, 728, 326, 93],
"jill": [0, 0, 644, 364]
}
}
test.py:
# -*- coding: utf-8 -*-
from kivy import resources
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.graphics import Color, Rectangle
from kivy.atlas import Atlas
from kivy.uix.image import Image
from kivy.config import Config
Config.set('graphics', 'width', '1280')
Config.set('graphics', 'height', '720')
Config.set('kivy', 'log_level', 'trace')
class MyApp(App):
def build(self):
tt = Atlas('./images/a.atlas')
return Image(source='atlas://images/a/logo', pos=[100, 100], size=[326, 93])
if __name__ == '__main__':
MyApp().run()
Now it's just a test. I am trying to learn kivy, but something going wrong
Anyone knows why this can happening?
This is a bug, and as one of the comments indicates:
i think the issue is that the saving in its current form requires the
creation of a texture, and in this test, it happens that no opengl
context have been created, a simple workaround is to add:
from kivy.core.window import Window or
from kivy.base import EventLoop EventLoop.ensure_window() at the top
of the script.
It works for me after that.
I don't think it's actually a bug, since we don't promise image
manipulation without the creation of an opengl context, but maybe we
could call ensure_window() in Image.save().
So you should only use the following:
# -*- coding: utf-8 -*-
from kivy.app import App
from kivy.atlas import Atlas
from kivy.uix.image import Image
from kivy.core.window import Window
class MyApp(App):
def build(self):
tt = Atlas('images/a.atlas')
return Image(texture=tt["logo"], pos=[100, 100], size=[326, 93])
if __name__ == '__main__':
MyApp().run()
Also if you do not want to use that you can eliminate the use of Atlas:
# -*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.image import Image
class MyApp(App):
def build(self):
return Image(source='atlas://images/a/logo', pos=[100, 100], size=[326, 93])
if __name__ == '__main__':
MyApp().run()
I am trying to add a new tab to the app, just as info page. The extra page is added and I created a new tab but it is not working at all. Not even displaying a basic ionic details. I have added the new page in app.module.ts and also in tabs folder.
tabs.ts
import { Component } from '#angular/core';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { InfoPage } from '../info/info';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
tab4root: any = InfoPage;
constructor() {
}
}
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Geo" tabIcon="md-globe"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="info" tabIcon="football"></ion-tab>
</ion-tabs>
app.module.ts
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
ScanPage,
TabsPage,
InfoPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
ScanPage,
TabsPage,
InfoPage
],
I am trying to read json file data to my Html page, but getting 'No provider for ConnectionBackend!
See below code
Home.ts
import { Component } from '#angular/core';
import { NavController ,Platform} from 'ionic-angular';
import { SampleDataService } from '../../providers/sample-data-service';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
myjsondata:any;
constructor(public navCtrl: NavController, platform: Platform,
sampleDataService:SampleDataService) {
sampleDataService.getJsonData().subscribe((data) => {
console.log("what is in the data ", data);
this.myjsondata = data;
});
}
ngOnInit(){}
}
app.component.ts
import { SampleDataService } from '../providers/sample-data-service';
import { Http } from '#angular/http';
#Component({
templateUrl: 'app.html',
providers:[SampleDataService,Http]
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public statusBar: StatusBar,
public splashScreen: SplashScreen, sampleDataService:SampleDataService,
http:Http) {
statusBar.styleDefault();
sampleDataService.getJsonData();
this.initializeApp();
app.module.ts
import { SampleDataService } from '../providers/sample-data-service';
import { Http} from '#angular/http';
#NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
About,
Contact,
AboutCity
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
//AutoCompleteModule,
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
About,
Contact,
AboutCity
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
SampleDataService,
Http
]
})
I tried a lot but not getting solution why this error is.
Can please anyone help me.
You have to import HttpModule in the imports section in the app.module.ts
Also, remove the Http from the providers.
import { SampleDataService } from '../providers/sample-data-service';
import { HttpModule} from '#angular/http';
#NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
About,
Contact,
AboutCity
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
//AutoCompleteModule,
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
About,
Contact,
AboutCity
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
SampleDataService,
]
})
Please see this highly voted answer as well.