Angular2 - routing error - Type 'string' is not assignable to type 'Type<any>' - angular-ui-router

Trying to create a simple routing in Angular2:
ERROR in
C:/projects/gamefication/src/app/app.routing.ts (8,7):
Type '({ path: string; redirectTo: string; pathMatch: string; } |
{ path: string; component: string; })[]'
is not assignable to type 'Route[]'.
Type '{ path: string; redirectTo: string; pathMatch: string; } |
{ path: string; component: string; }' is not assignable to type 'Route'.
Type '{ path: string; component: string; }' is not assignable to type 'Route'.
Types of property 'component' are incompatible.
Type 'string' is not assignable to type 'Type<any>'
app.routing.ts as below:
const routes: Routes = [
{ path: '', redirectTo:'/login', pathMatch: 'full' },
{ path: 'explorer', component:'ExplorerQuizComponent' },
{ path:'login', component: 'LoginComponent'}];
#NgModule({imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ]})`

Remove ' , Please Try:
const routes: Routes = [
{ path: '', redirectTo:'/login', pathMatch: 'full' },
{ path: 'explorer', component:ExplorerQuizComponent },
{ path:'login', component: LoginComponent}];

Related

Nativescript/Angular Navigating Back is not working in Children Page

I navagate from main/tv-theke-page to main-tvtheke/main-tvtheke-home-page,
but when i press back in android does not navigate back to main/tv-theke-page it exits from app
It seems is something wrong with route history
const routes: Routes = [
{ path: '', redirectTo: '/main', pathMatch: 'full' },
{ path: 'main', component: MainComponent ,
children : [
{ path: '', component: HomePageComponent},
{ path: 'search-page', component: SearchPageComponent},
{ path: 'home-page', component: HomePageComponent},
{ path: 'live-tv-page', component: LiveTvPageComponent},
{ path: 'tvtheke-page', component: TvThekePageComponent},
{ path: 'music-page', component: MusicPageComponent},
{ path: 'movie-page', component: MoviePageComponent},
{ path: 'tv-show-page', component: TvShowPageComponent},
{ path: 'favorite-page', component: FavoritePageComponent},
]},
{ path: 'main-movie', component: MainMoviePageComponent},
{ path: 'main-tvshow', component: MainTVShowPageComponent},
{ path: 'main-tvtheke', component: MainTVThekeComponent ,
children : [
{ path: '', component: MainTVThekeHomePageComponent},
{ path: 'main-tvtheke-home-page', component: MainTVThekeHomePageComponent},
{ path: 'main-tvtheke-dailyvdeos-page', component: MainTVThekeDailyVideosComponent},
{ path: 'main-tvtheke-rubric-page', component: MainTVThekeRubricComponent},
{ path: 'main-tvtheke-az-page', component: MainTVThekeAZComponent},
]},
]
That really depends on how you navigation logic looks.
I would suggest you create a playground with your sample here:
https://play.nativescript.org/
Also, you might get more info by enabling router tracing in you app-routing.module
#NgModule({
imports: [
NativeScriptRouterModule.forRoot(routes, {
enableTracing: true,

What is the correct way to nest data within a graphql?

I have an address in my database that I've put into a location hash. The hash contains separate keys for streetAddress, city, state, and zipCode. I've nested the data like so in my graphql schema file:
location: {
streetAddress: {
type: String,
required: true,
unqiue: true
},
city: {
type: String,
required: true
},
state: {
type: String,
required: true
},
zipCode: {
type: Number,
required: true
}
}
And I've implemented the schema type like this:
fields: () => ({
id: { type: GraphQLID },
name: { type: GraphQLString },
id: {type: GraphQLID},
phoneNum: { type: GraphQLString },
location: {
streetAddress: { type: GraphQLString },
city: { type: GraphQLString },
state: { type: GraphQLString },
zipCode: { type: GraphQLInt }
}
...
However, I get an error message saying that the output type is undefined when I try to do a query in graphql:
"message": "The type of RestaurantType.location must be Output Type but got: undefined."
I believe I understand where the error is coming from; I'm assuming that it expects location to have a type as well. What would be the correct syntax for doing this/fixing this error message?
As you guessed, you cannot have nested fields like that. You need to create a separate type for every object in your schema. First create the type:
const Location = new GraphQLObjectType({
name: 'Location',
fields: () => ({
streetAddress: { type: GraphQLString },
city: { type: GraphQLString },
state: { type: GraphQLString },
zipCode: { type: GraphQLInt }
}),
})
Then use it:
const Restaurant = new GraphQLObjectType({
name: 'Restaurant',
fields: () => ({
id: { type: GraphQLID },
name: { type: GraphQLString },
location: { type: Location },
}),
})
or if you don't need to reuse the type, you can define it inline like this:
const Restaurant = new GraphQLObjectType({
name: 'Restaurant',
fields: () => ({
id: { type: GraphQLID },
name: { type: GraphQLString },
location: {
type: new GraphQLObjectType({
name: 'Location',
fields: () => ({
streetAddress: { type: GraphQLString },
city: { type: GraphQLString },
state: { type: GraphQLString },
zipCode: { type: GraphQLInt }
}),
})
},
}),
})

How to add canActivate: [AuthGuard], in loadChildren in the same route

I have app-routing.module.ts
const routes: Routes = [
{ path: "", redirectTo: "/fp", pathMatch: "full" },
{ path: "home", loadChildren: "~/app/home/home.module#HomeModule" },
{ path: "login", loadChildren: "~/app/accounts/login/login.module#LoginModule" },
{ path: "register", loadChildren: "~/app/accounts/registers/registers.module#RegistersModule" },
{ path: "fp", loadChildren: "~/app/accounts/first_page/first_page.module#FirstPageModule" },
];
export const routing = NativeScriptRouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules});
In Home Component I have home-routing.module.ts
const routes: Routes = [
{ path: "", component: HomeComponent }
];
In LoginComponent I have login-routing.module.ts
const routes: Routes = [
{ path: "", component: LoginComponent }
];
In RegisterComponent I have resgister-routing.module.ts
const routes: Routes = [
{ path: "", component: RegistersComponent }
];
In RegisterComponent I have first_page-routing.module.ts
const routes: Routes = [
{ path: "", component: FirstPageComponent }
];
I create a authguard like this:
canActivate(): boolean {
if (this.auth.isAuthenticated()) {
console.log('true')
return true;
}
this.router.navigate(['/login']);
console.log('false')
return false;
}
My question is, how to use AuthGuard in my routing?
You can try and add the guard in the app routing module:
const routes: Routes = [
{ path: '', redirectTo: '/fp', pathMatch: 'full' },
{ path: 'home', loadChildren: '~/app/home/home.module#HomeModule' },
{
path: 'login',
loadChildren: '~/app/accounts/login/login.module#LoginModule'
},
{
path: 'register',
loadChildren:
'~/app/accounts/registers/registers.module#RegistersModule'
},
{
path: 'fp',
loadChildren:
'~/app/accounts/first_page/first_page.module#FirstPageModule',
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
}
];
... assuming you only want to protect the fp path.

native script , How to fix problems with navigation in mobile apps?

I have an application in nativescript which when you are browsing, has delay. then its operation is correct but then it stops when you are navigating.
I do not know the reason for the delay of the application since it is simple navigation
this is the routing
const routes: Routes = [
{
path: "", redirectTo: "/login", pathMatch: "full",
},
{
path: "login", loadChildren: "./login/login.module#LoginModule"
// path: "login", component: LoginComponent,
},
{
path: "mesas", loadChildren: "./mesas/mesas.module#MesasModule"
// path: "mesas", component: MesasComponent,
},
{
// path: "home", loadChildren: "./home/home.module#HomeModule"
path: "home", component: HomeComponent,
},
{
path: "comanda", loadChildren: "./comanda/comanda.module#ComandaModule"
// path: "comanda", component: ComandaComponent,
},
{
// path: "subP-Mod", loadChildren: "./comanda/modificadores.module#ModificadoresModule"
path: "subP-Mod", component: ModificadoresComponent,
},
{
// path: "nOrden", loadChildren: "./orden/nueva.module#NuevaModule"
path: "nOrden", component: NOrdenComponent
},
{
// path: "meseros", loadChildren: "./meseros/meseros.module#MeserosModule"
path: "meseros", component: MeserosComponent
},
{
// path: "comensales", loadChildren: "./comensales/comensales.module#ComensalesModule"
path: "comensales", component: ComensalesComponent
},
{
//path: "prodlibre", loadChildren: "./productoLibre/prodlibre.module#ProdLModule"
path: "prodlibre", component: ProdLComponent
},
{
// path: "razonDet", loadChildren: "./razonesCancela/razonDetC.module#razonDetModule"
path: "razonDet", component: RazonesComponent
},
];
Try using "markingMode": "none", as described here. There are a few drawbacks, but the navigation should feel much snappier

GeoCode filter in mongoose elasticsearch

I am trying to do geo point filter in mongodb in meanjs. i have used mongoosastic modules but i am not able to perform geo point filter.
here below are the mongoose schema and controller code for filter.
Mongoose schema
'use strict';
/**
* Module dependencies.
*/
var mongoose = require('mongoose'),
Schema = mongoose.Schema,
mongoosastic = require('mongoosastic');
var BusinessSchema = new Schema({
name: {type: String, unique: 'Name already exists', trim: true, required: 'Name is required.', es_indexed: true},
searchTags: {type: [String], es_indexed: true},
alias: {type: Array, es_indexed: true},
// geoLocation: { type: [Number], /*/ [<longitude>, <latitude>]*/ index: '2d', /*/ create the geospatial index,*/ required: 'GeoLocation is required.', es_indexed:true,es_type:'geo_point'},
geo_cords: {
type: Array
},
address: {
address1: {type: String, required: 'Address is required', trim: true},
address2: String,
city: {type: String, required: 'City is required', trim: true},
// state: {type: String, required: 'State is required', trim: true},
country: {type: String, required: 'Country is required', trim: true},
postalCode: {type: String, required: 'Postal code is required', trim: true},
neighbourhood: String
},
isActive: {
type: Boolean,
default: true,
es_indexed: true
},
dateUpdated: {
type: Date
, es_indexed: true
},
dateCreated: {
type: Date,
default: Date.now
, es_indexed: true
}
});
controller code for filter and query
var mongoose = require('mongoose'),
Business = mongoose.model('Businesses');
var query = {
"query_string": {
"multi_match": {
"query": categoryIds.join(' OR '),
"fields": ["categoryIds", "relatedCategoryIds"]
}
},
"filter": {
"bool": {
"should": [
{"term": {"address.postalCode": "110016"}},
{"geo_distance": {
"distance": "50km",
"geo_cords": [-122.3050, 37.9174]
}
}
],
}
}
}
Business.search(query, function (err, results) {
// sendResponse(req, res, err, results)
if (!err) {
res.json(results);
} else {
res.status(400).send({message: 'Business Not Found'})
}
});
while doing this i am getting a long error saying
QueryParsingException[[businessess] failed to find geo_point field [geo_cords]
According to the documentation of mongoosastic
Geo mapping
Prior to index any geo mapped data (or calling the synchronize), the mapping must be manualy created with the createMapping (see above).
First, in your schema, define 'geo_cords' this way:
geo_cords: : {
geo_point: {
type: String,
es_type: 'geo_point',
es_lat_lon: true
},
lat: { type: Number },
lon: { type: Number }
}
Add an es_type: 'object' to each Array or embbeded type
alias: {type: Array, es_indexed: true, es_type: 'object'}
Then call .createMapping() on the model just after you've created it.

Resources