template parse error is not a known element (ionic) - list

thanks for the help since now!
I'm having trouble with this problem, i'm doing an expensable list, follow the code from my app.module.ts:
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 { MyApp } from './app.component';
import { ExpansivoComponent } from '../components/expansivo/expansivo';
#NgModule({
declarations: [
MyApp,
ExpansivoComponent
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
this is my code from html page:
<ion-header>
<ion-navbar>
<ion-title>listacli</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let item of items">
<ion-thumbnail item-start>
<img src="assets/img/listacli.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<expansivo></expansivo>
<button ion-button clear item-end>View</button>
</ion-item>
</ion-list>
</ion-content>
i already tryied a lot of answers from stackoverflow, but anything could help :(
this is the error
If you guys need any code, just ask, thanks !

you have to add your ExpansivoComponent to the entryComponents
#NgModule({
declarations: [
MyApp,
ExpansivoComponent
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
ExpansivoComponent
],

Related

How to use vue development mode with Django

I don't know how to run development mode with Django. I'm running webpack and when I finish all the Vuejs work I just bundle all to a folder where Django serves It as a static file. I know taht I've to run webpack with mode development but that doens't work, It gives me a cannot found error.
I'd like to run Vuejs in development mode alongside with Django, how can I do that?
I'll share to you my project structure, my package.json and webpack config.
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './frontend/Vue/main.js',
output: {
filename: 'build.js',
path: path.resolve(__dirname, './static/js'),
publicPath: '/static/js'
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules)/,
use: [
{ loader: 'babel-loader' }
]
},
{
test: /\.(css|scss)/,
use: [
'style-loader'
]
},
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader'
}
]
},
devServer: {
// contentBase: ponerle la ruta del index de django
contentBase: path.join(__dirname, 'templates'),
watchContentBase: true,
historyApiFallback: true,
noInfo: true
},
plugins: [
new VueLoaderPlugin()
]
}
package.json
{
"name": "TuDistribuidora",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development --port 9000 --open",
"build": "webpack --progress"
},
"repository": {
"type": "git",
"url": "git+https://github.com/EmiBuffet/TuDistribuidora.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/EmiBuffet/TuDistribuidora/issues"
},
"homepage": "https://github.com/EmiBuffet/TuDistribuidora#readme",
"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.4.5",
"vuex": "^3.5.1"
},
"devDependencies": {
"#babel/core": "^7.11.1",
"babel-loader": "^8.1.0",
"babel-preset-es2015": "^6.24.1",
"node-sass": "^4.14.1",
"sass-loader": "^9.0.3",
"style-loader": "^1.2.1",
"vue-loader": "^15.9.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"bulma": "^0.9.1"
}
}
project structure:
Using django-webpack-loader in your Django project in combination with webpack-bundle-tracker in your webpack build will provide the connection needed to alternate between production/dev Vue builds quickly. The bundle information will be recorded by webpack into a webpack-stats.json which will then be used by Django to fetch/load the correct bundles for a given view.
I have an article explaining step-by-step how to set up a project with the above techniques.
Good hacking!

Unit testing in browser for NativeScript fails because of .tns. files

I have an Angular flavoured Nativescript project, which must be tested with "vanila" Jasmine, in a browser (so not in mobile) with ng test.
By default, with "naked" tests, it works. But the problem is, if I try to test/import anything, that has a ".tns" alternative, in some cases it loads that, and the build fails.
My problem is similar to this thread but there were no good solution described there.
So for instance:
I have two files:
app.component.tns.ts
app.component.ts
and I try to import it for testing in app.component.spec.ts:
import {AppComponent} from "#src/app/app.component";
it loads the .tns. file, and the build fails, as it cannot load the mobile-specific libraries.
ERROR in ./src/app/app.component.tns.ts
Module not found: Error: Can't resolve 'nativescript-ui-sidedrawer' in '/home/..../src/app'
resolve 'nativescript-ui-sidedrawer' in '/home/...../src/app'
Parsed request is a module
using description file: /home/...../src/package.json (relative path: ./app)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
...
# ./src/app/app.component.tns.ts 25:35-72
# ./src/app/app.module.spec.ts
# ./src sync \.spec\.ts$
# ./src/test.ts
is there any solution to "remove" the .tns. files, just as if I were running a simple ng serve?
update: My tsconfig.spec.json should exclude these files, but it does not work either ...
"exclude": [
"**/*.tns.ts",
"**/*.android.ts",
"**/*.ios.ts"
]
}
it seems the problem was with tsconfig.json. Specificly this part:
"compilerOptions": {
...
"paths": {
"#src/*": [
"src/*.android.ts",
"src/*.ios.ts",
"src/*.tns.ts",
"src/*.web.ts",
"src/*.ts"
]
},
As this was extended by the tsconfig.spec.json.
I modified the tsconfig.spec.json to this:
{
"compilerOptions": {
"target": "es5",
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom",
"es6",
"es2015.iterable"
],
"baseUrl": ".",
"resolveJsonModule": true,
"esModuleInterop": true,
"paths": {
"#src/*": [
"src/*.ts"
]
},
"outDir": "../out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
],
"exclude": [
"**/*.tns.ts",
"**/*.android.ts",
"**/*.ios.ts"
]
}
and now the tests run, and the correct components are imported.

Couldn't access related models in ember.js 2.0 using ember-data

I'm trying to display a simple dynamic form using ember.js, im pretty new to ember and front-end frameworks in general.
I am using
Ember : 2.0.0
Ember Data : 2.0.0-beta.1
jQuery : 1.11.3
ember-cli : 1.13.6
The JSON payload is the following: some fields are to be generated and some elements have to be enabled.
JSON:
{
"create-fields": [{
"id": 1,
"field": "widgetName",
"label": "Widget Name",
"tooltip": "Widget Name",
"category": "textfield",
"url": "",
"required": true,
"widgetform_id": 1
}, {
"id": 2,
"field": "APIKey",
"label": "API Key",
"tooltip": "API Key",
"category": "textfield",
"url": "",
"required": true,
"widgetform_id": 1
}, {
"id": 3,
"field": "Campaign",
"label": "Select Campaign",
"tooltip": "Select Campaign",
"category": "select",
"url": "campaigns/",
"required": false,
"widgetform_id": 1
}, {
"id": 4,
"field": "checkbox",
"label": "Sample Checkbox",
"tooltip": "Sample Checkbox",
"category": "checkbox",
"url": "",
"required": false,
"widgetform_id": 1
}],
"enable-fields": [{
"id": 1,
"field": "showAdvanced",
"required": false,
"widgetform_id": 1
}, {
"id": 2,
"field": "notification",
"required": false,
"widgetform_id": 1
}, {
"id": 3,
"field": "enableNotif",
"required": false,
"widgetform_id": 1
}, {
"id": 4,
"field": "email",
"required": false,
"widgetform_id": 1
}, {
"id": 5,
"field": "phone",
"required": false,
"widgetform_id": 1
}, {
"id": 6,
"field": "reqType",
"required": false,
"widgetform_id": 1
}, {
"id": 7,
"field": "dataFormat",
"required": false,
"widgetform_id": 1
}, {
"id": 8,
"field": "appendUrlParams",
"required": false,
"widgetform_id": 1
}],
"widgetforms": [{
"id": 1,
"formname": "Edit Widget",
"enable-field_ids": [1, 2, 3, 4, 5, 6, 7, 8],
"create-field_ids": [1, 2, 3, 4]
}]
}
//models
widgetform.js:
import DS from 'ember-data';
export default DS.Model.extend({
formname: DS.attr(),
createFields: DS.hasMany('createFields'),
enableFields: DS.hasMany('enableFields')
});
create-field.js:
import DS from 'ember-data';
export default DS.Model.extend({
field: DS.attr(),
label: DS.attr(),
tooltip: DS.attr(),
category: DS.attr(),
url: DS.attr('string', {defaultValue: ""}),
required: DS.attr('boolean'),
widgetform: DS.belongsTo('widgetform')
});
enable-field.js:
import DS from 'ember-data';
export default DS.Model.extend({
field: DS.attr(),
required: DS.attr('boolean'),
widgetform: DS.belongsTo('widgetform')
});
template
widgetform.hbs: The hbs doesn't have all the fields it is just a mockup.
<div class="container-fluid">
{{#each model as |form|}}
<form class="form-horizontal">
<fieldset>
<header id="header">
<h1>{{form.formname}}</h1>
</header>
<section id="main">
<ul id="field-list">
{{form.createFields}}
{{#each form.createFields as |element|}}
<li>test1 {{element.field}}</li>
{{/each}}
</ul>
</section>
</fieldset>
</form>
{{/each}}
</div>
So far I've been able to see the data in the respective models using ember-inspector in chrome.
However, in the template when using the {{form.createFields}} I get a <DS.PromiseManyArray>, and the {{form.createFields.content}} is a <DS.ManyArray> object both of which I couldn't iterate through.
The test1 that I put in the template is not printing in the page. The {{form.formname}} property however is available and is printed in the page.
I've checked many questions like this, and the general suggestion is to add the id list but I've added them in the JSON but I don't see the difference
screenshot of ember-inspector data tab:
What am I doing wrong here? Any ideas?
Try createFields: DS.hasMany('createField') (singular)
You're not specifying the relation data that Ember Data needs to make the connection between your models.
In create-field.js and enable-field.js, you have widgetform: DS.belongsTo('widgetform'), but you're not specifying widgetform_id: 1 on the record payloads. You might be able to solve this by explicitly setting the inverse option in the belongsTo and hasMany definitions, but I would recommend just adding the relation IDs to your payload.
For some reason the RESTAdapter was not working for this particular data set or environment, so I decided to scrap it and embrace the new JSONAPI 1.0 specs and use the JSONAPIAdapter.
Models:
create-field.js:
import DS from 'ember-data';
export default DS.Model.extend({
field: DS.attr(),
label: DS.attr(),
tooltip: DS.attr(),
category: DS.attr(),
url: DS.attr('string', { defaultValue: ""}),
required: DS.attr('boolean')
});
enable-field.js
import DS from 'ember-data';
export default DS.Model.extend({
field: DS.attr(),
required: DS.attr('boolean')
});
widgetform.js
import DS from 'ember-data';
export default DS.Model.extend({
formname: DS.attr(),
createFields: DS.hasMany('create-field'),
enableFields: DS.hasMany('enable-field')
});
The JSON for the above model is formatted as per the JSONAPI 1.0 spec: http://jsonapi.org/format/
{
"data": [{
"type": "widgetform",
"id": 1,
"attributes": {
"formname": "Edit Widget"
},
"relationships": {
"create-fields": {
"data": [{
"type": "create-fields",
"id": "1"
}, {
"type": "create-fields",
"id": "2"
}]
},
"enable-fields": {
"data": [{
"type": "enable-fields",
"id": "1"
}, {
"type": "enable-fields",
"id": "2"
}]
}
}
}],
"included": [{
"type": "create-fields",
"id": "1",
"attributes": {
"field": "widgetName",
"label": "Widget Name",
"tooltip": "Widget Name",
"category": "textfield",
"required": true
}
}, {
"type": "create-fields",
"id": "2",
"attributes": {
"field": "APIKey",
"label": "API Key",
"tooltip": "API Key",
"category": "textfield",
"required": true
}
}, {
"type": "enable-fields",
"id": "1",
"attributes": {
"field": "showAdvanced",
"required": false
}
}, {
"type": "enable-fields",
"id": "2",
"attributes": {
"field": "notification",
"required": false
}
}]
}
adapter:
application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
namespace: 'api'
});
And I was able to access it from the template using the each block as usual
widgetform.hbs
<div class="container-fluid">
{{#each model as |form|}}
<form class="form-horizontal">
<fieldset>
<header id="header">
<h1>{{form.formname}}</h1>
</header>
<section id="main">
<ul id="field-list">
{{#each form.createFields as |element|}}
<li>
<input name="{{element.field}}" type="text">
</li>
{{/each}}
</ul>
</section>
</fieldset>
</form>
{{/each}}
</div>
I hope it helps someone...

How would be the JSON is in this example?

$('.example-films .typeahead').typeahead([{name: 'best-picture-winners',
remote: '../data/films/queries/%QUERY.json',prefetch: '../data/films/post_1960.json',
template: '{{value}} – {{year}}',engine: Hogan}]);
how would be the JSON file written on this example.
i get this from typeahead js examples
If you view the source of the page you can see that there is an attached javascript file at http://twitter.github.io/typeahead.js/js/examples.js
Here you can view how they bound the typeahead box:
$('.example-films .typeahead').typeahead([
{
name: 'best-picture-winners',
remote: '../data/films/queries/%QUERY.json',
prefetch: '../data/films/post_1960.json',
template: '<p><strong>{{value}}</strong> – {{year}}</p>',
engine: Hogan
}
]);
And you will see that you can access prefetch JSON data to see the formatting at http://twitter.github.io/typeahead.js/data/films/post_1960.json
[
{
"year": "1961",
"value": "West Side Story",
"tokens": [
"West",
"Side",
"Story"
]
},
{
"year": "1962",
"value": "Lawrence of Arabia",
"tokens": [
"Lawrence",
"of",
"Arabia"
]
}, {
"year": "2012",
"value": "Argo",
"tokens": [
"Argo"
]
}
]

Django fixtures for model from imported application (like django-allauth)

I know that is possible to create fixtures file like initial_data.json for my own model. I want to create similar file for tables which are created and used by imported django-allauth application.
I tried:
[
{
"model":"allauth.socialaccount.models.SocialApp",
"pk":1,
"fields":{
"id":"1",
"provider":"facebook",
"name":"facebook",
"client_id":"0011223344556677",
"key":"",
"secret":"012345678901234567890123456"
}
}
]
However it's ends up with error:
python manage.py syncdb
Creating tables ...
Installing custom SQL ...
Installing indexes ...
DeserializationError: Problem installing fixture 'initial_data.json':
Invalid model identifier: 'allauth.socialaccount.models.SocialApp'
I found here that table from model django.contrib.sites.models.Site can be populate using
[
{
"model": "sites.site",
"pk": 1,
"fields": {
"domain": "myproject.mydomain.com",
"name": "My Project"
}
}
]
So model allauth.socialaccount.models.SocialApp probably can by populated by:
[
{
"model":"socialaccount.socialapp",
"pk":1,
"fields":{
"id":"1",
"provider":"facebook",
"name":"facebook",
"client_id":"0011223344556677",
"key":"",
"secret":"012345678901234567890123456"
}
}
]
Full fixture example, tested with django-allauth 0.19 and Django 1.8:
[
{
"model": "sites.site",
"pk": 1,
"fields": {
"domain": "localhost",
"name": "localhost"
}
},
{
"model":"socialaccount.socialapp",
"pk":1,
"fields":{
"id":"1",
"provider":"facebook",
"name":"facebook",
"client_id":"0011223344556677",
"secret":"012345678901234567890123456",
"key":""
}
},
{
"model":"socialaccount.socialapp_sites",
"pk":1,
"fields":{
"id":1,
"socialapp_id":1,
"site_id":1
}
}
]