Angular 2 Meteor change route reactively - meteor

I'm playing with angular2 and meteor (i'm new with both) and i'd like to change route if i can find a certain document in a collection. I read in the Angular 2 Meteor tutorial that the class MeteorComponent has methods subscribe and autorun so i'm trying to use this methods to get the job done (not sure if this is the best way to do it - i didn't remove autopublish).
But right now it isn't working.
My component is:
import {View, OnInit, Component} from 'angular2/core'
import {MeteorComponent} from 'angular2-meteor'
import {Navbar} from 'client/navbar/navbar'
import {FakePlayground} from 'client/intro/fake-playground/fake-playground'
import {PlayerList} from 'client/player-list/player-list'
import {PlayerService} from 'client/player/player-service'
import {Player} from 'client/player/player'
import {ProtectedDirective} from 'client/directives/protected-directive'
import {SentInvitation} from 'client/invitation/sent-invitation'
import {ReceivedInvitation} from 'client/invitation/received-invitation'
import {Invitations} from 'lib/invitations'
import {Router} from 'angular2/router'
#Component({
selector: 'intro'
})
#View({
templateUrl: 'client/intro/intro.html',
directives: [
Navbar,
PlayerList,
FakePlayground,
ProtectedDirective,
SentInvitation,
ReceivedInvitation
]
})
export class Intro extends MeteorComponent implements OnInit {
currentPlayer: Player
invitation: Mongo.Cursor<Object>
constructor(
public playerService: PlayerService,
private _router:Router
) {
super()
}
getInvitation() {
this.subscribe('invitations', () => {
this.invitation = Invitations.find({$or: [
{$and: [
{"sender._id": this.currentPlayer._id},
{status: 1}
]},
{$and: [
{"recipient._id": this.currentPlayer._id},
{status: 1}
]}
]})
this.autorun(() => {
console.log('autorun')
if(this.invitation){
console.log('game started')
this._router.navigate(['Game'])
}
})
})
}
getPlayer() {
this.currentPlayer = this.playerService.getCurrentPlayer()
}
ngOnInit() {
this.getPlayer()
this.getInvitation()
}
}
And in my fantasy getInvitation() called in ngOnInit should subscribe to
'invitations' collection and autorun() should check if the document is found and if it's found should change route.
But i'm not getting errors neither the route change.
Which should be the right way to change the route reactively to collection change?

Well, i was using this.autorun() the worng way.
It was much simpler:
import {View, OnInit, Component} from 'angular2/core'
import {MeteorComponent} from 'angular2-meteor'
import {Navbar} from 'client/navbar/navbar'
import {FakePlayground} from 'client/intro/fake-playground/fake-playground'
import {PlayerList} from 'client/player-list/player-list'
import {PlayerService} from 'client/player/player-service'
import {Player} from 'client/player/player'
import {ProtectedDirective} from 'client/directives/protected-directive'
import {SentInvitation} from 'client/invitation/sent-invitation'
import {ReceivedInvitation} from 'client/invitation/received-invitation'
import {Invitations} from 'lib/invitations'
import {Router} from 'angular2/router'
#Component({
selector: 'intro'
})
#View({
templateUrl: 'client/intro/intro.html',
directives: [
Navbar,
PlayerList,
FakePlayground,
ProtectedDirective,
SentInvitation,
ReceivedInvitation
]
})
export class Intro extends MeteorComponent implements OnInit {
currentPlayer: Player
constructor(
public playerService: PlayerService,
private _router:Router
) {
super()
}
getPlayer() {
this.currentPlayer = this.playerService.getCurrentPlayer()
}
ngOnInit() {
this.getPlayer()
this.autorun(() => {
if (Invitations.findOne({
$or: [
{$and: [{"sender._id": this.currentPlayer._id},{status: 1}]},
{$and: [{"recipient._id": this.currentPlayer._id},{status: 1}]}
]
})) {
this._router.navigate(['Game'])
}
})
}
}

Related

Difficulties in calling a method for an http request

I have an error message when I try to make an HTTP request:
"Cannot read property 'get' of undefined"
import {Component} from '#angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from "#angular/common/http";
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";
#IonicPage()
#Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
constructor(private apiGdz: ApiGdz, public http: HttpClient) {
this.apiGdz.callApi().then(
(data) => {
console.log('ok', data);
},
(error) => {
console.log('!ok', error);
}
);
}
}
import {HttpClient} from "#angular/common/http";
export class ApiGdz {
public http: HttpClient;
constructor() {}
callApi() {
return new Promise(
(resolve, reject) => {
this.http.get('https://swapi.co/api/films').subscribe(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
}
);
}
}
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 {HomePage} from '../pages/home/home';
import {AuthService} from "../services/auth.service";
import {DashboardPage} from "../pages/dashboard/dashboard";
import {ConnectionPage} from "../pages/connection/connection";
import {HelpPage} from "../pages/help/help";
import {ContactGdzPage} from "../pages/contact-gdz/contact-gdz";
import {ListeServicePage} from "../pages/liste-service/liste-service";
import {ApiGdz} from "../services/apiGdz.service";
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthService,
ApiGdz,
]
})
export class AppModule {
}
The problem may be that 'HttpClient' must come from the constructor ... In this case how to instantiate the 'http' object in 'DashboardPage' with parameters?
Thanks for your help
Let me start by saying I am not an Ionic developer so there may well be something specific required for that environment that I am unaware of, I can only speak to the Angular portion of your code.
Given that, I have to make the assumption from what you have posted in your question above that in spite of how it appears, in reality you posted code from 3 DIFFERENT files. My assumption is that file #1 is the component, probably has a name like dashboard.component.ts and looks like the first part of what you posted:
import {Component} from '#angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from "#angular/common/http";
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";
#IonicPage()
#Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
constructor(private apiGdz: ApiGdz, public http: HttpClient) {
this.apiGdz.callApi().then(
(data) => {
console.log('ok', data);
},
(error) => {
console.log('!ok', error);
}
);
}
}
Then there is a separate service file (which appears to be imported in the component above), is called apiGdz.service.ts, and looks like this:
import {HttpClient} from "#angular/common/http";
export class ApiGdz {
public http: HttpClient;
constructor() {}
callApi() {
return new Promise(
(resolve, reject) => {
this.http.get('https://swapi.co/api/films').subscribe(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
}
);
}
}
And finally you also included your base module file, probably called something like app.module.ts, which looks like this:
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 {HomePage} from '../pages/home/home';
import {AuthService} from "../services/auth.service";
import {DashboardPage} from "../pages/dashboard/dashboard";
import {ConnectionPage} from "../pages/connection/connection";
import {HelpPage} from "../pages/help/help";
import {ContactGdzPage} from "../pages/contact-gdz/contact-gdz";
import {ListeServicePage} from "../pages/liste-service/liste-service";
import {ApiGdz} from "../services/apiGdz.service";
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DashboardPage,
ConnectionPage,
HelpPage,
ContactGdzPage,
ListeServicePage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthService,
ApiGdz,
]
})
export class AppModule {
}
If all that is correct, then I would suggest a minor change to both the component and the service.
First the service. One of the benefits of using services in Angular is that they can hide details from the component such as the fact that you are getting real data from the back-end server via http. Therefore your service would look something like this:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable({ providedIn: 'root' })
export class ApiGdz {
constructor(private http: HttpClient) {}
callApi() {
return new Promise(
(resolve, reject) => {
this.http.get('https://swapi.co/api/films').subscribe(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
}
);
}
}
Now your component can be changed to know nothing about http, just rely on the injected service to handle those details. It would now look something like this:
import {Component} from '#angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
// import {HttpClient} from "#angular/common/http"; // <-- DELETE THIS LINE
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";
#IonicPage()
#Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
constructor(private apiGdz: ApiGdz) {
this.apiGdz.callApi().then(
(data) => {
console.log('ok', data);
},
(error) => {
console.log('!ok', error);
}
);
}
}

Not able to query through the list in firebase using angularfire2

I want to get the list of users where text=Groomers from firebase database
I am getting firebase warning about .indexOn, but not getting the list of users.
Below is my code:
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { AuthService } from '../../services/auth.service';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
#Component({
selector: 'app-animal-services',
templateUrl: './animal-services.component.html',
styleUrls: ['./animal-services.component.css']
})
export class AnimalServicesComponent implements OnInit {
users: Observable<any[]>;
constructor(public _firebaseAuth: AngularFireAuth, private db: AngularFireDatabase, private router: Router) {
this.users = db.list('/professionals', ref => ref.orderByChild('text').equalTo("Groomers")).valueChanges();
}
ngOnInit() {
}
}
Below is the image of my database:
orderByChild("text") should be orderByChild("qualification")
Phew! I figured out my way by changing the database in the following way:
Below is the image of my database:

Routing when nested components are used on AppComponent

I am fairly new to Angular 2 and having a problem with Routing. I have just started to explore the Routing. I will explain the structure and what I have achieved so far,
app.router.ts
import { ModuleWithProviders } from '#angular/core'
import { Routes, RouterModule } from '#angular/router'
import { AppComponent } from './app.component';
import { LoginComponent } from "../app/login/login.component"
export const router: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: AppComponent }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {UiSwitchModule} from 'angular2-ui-switch'
import { AppComponent } from './app.component';
import { AllReportsComponent } from "../app/all-reports/all-reports.component"
import { AvailableReportsComponent } from "../app/available-reports/available-reports.component"
import { NextReportsComponent } from "../app/next-reports/next-reports.component"
import { UrlsComponent } from "../app/urls/urls.component"
import { LoginComponent } from "../app/login/login.component"
import { TaskApi } from "../app/api/TaskApi"
import { routes } from "../app/app.router"
#NgModule({
imports: [
BrowserModule,
FormsModule,
UiSwitchModule,
HttpModule,
routes
],
declarations: [
AppComponent,
AllReportsComponent,
AvailableReportsComponent,
NextReportsComponent,
UrlsComponent,
LoginComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.html
<div>
<all-reports></all-reports>
<available-reports></available-reports>
<next-reports></next-reports>
<urls></urls>
</div>
app.component.ts (very simple)
import { Component } from "#angular/core"
#Component({
templateUrl: '../app/app.html'
})
export class AppComponent {
}
and login.component.ts
import { Component } from '#angular/core';
import { TaskApi } from '../api/TaskApi';
import * as models from '../model/models';
#Component({
styleUrls: ['/app/css/login.css'],
templateUrl: '../../app/login/login.html',
providers: [TaskApi]
})
export class LoginComponent {
}
Now it can be seen that I am using multiple directives on app.html and all the respective components are working fine.
The problem I am facing is when I introduce Routing then I am able to understand where to use "router-outlet". I have used it on Index.html but it does not work and gives error about ng-component. So to just test around I have used following in Index.html,
<body>
<base href="/">
<ng-component></ng-component>
</body>
After I do this then my AppComponent is displayed by default where the LoginComponent should be displayed by default. On console, It also gives me error "Error: Cannot find primary outlet to load 'LoginComponent'"
Kindly guide me if I am using 4 directives on App.html as mentioned above then in that case how the routing will work. To summarize, I want to display Login page on localhost:3009/login and localhost:3009 and I want to display Home page (app.html) in localhost:3009/dashboard and app.html is using 4 directives to display 4 child components on it.
Angular Routing
Since Angular is single page application the routing functionality
helps to display different view in single page.
How to use router to change view?
since app.component.html is main view for most user. Iam also consider app.component.html as main view.
Router-outlet
Router-outer helps to load the change in our angular application.
app.component.html
<router-outlet></router-outlet>
Set AppComponent Default page as router-outlet and create new Dashboard.component.html in your main view.
router.ts
import { ModuleWithProviders } from '#angular/core'
import { Routes, RouterModule } from '#angular/router'
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard.component';
import { LoginComponent } from "../app/login/login.component"
export const router: Routes = [
{ path: '', component: LoginComponent },
{ path: 'login', redirectTo: '', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
The problem with your code is that there is no 'router-outlet', so angular doesn't understand where to display the view.
The 'router-outlet' directive marks where the router displays a view.
In your code, since in app.component.ts you are using app.html so you should use <router-outlet> </router-outlet> in that HTML file.
Your app.html file should look like this:
<router-outlet> </router-outlet>
These below things should not be used in the app component HTML file. They should be used in their the corresponding components.
<all-reports></all-reports>
<available-reports></available-reports>
<next-reports></next-reports>
<urls></urls>
For further understanding, please refer to the official documentation of Angular2. They have explained it pretty well here https://angular.io/docs/ts/latest/guide/router.html

Error while configuring routes in Angular 2

i have been working with a product list Project and while configuring routes to navigate between different views, I get a red squiggly under the '#Routes' decorator and when i hover over the Routes, it says 'Routes only refers to a type, but is being used as a value here'. I researched in so many sights including here and tried many different ways to resolve this but I could not find out the issue.
app.component.ts
import { Component } from '#angular/core';
import { ProductListComponent } from './products/product-list.Component';
import { ProductService } from './products/product.service'
import { Routes } from '#angular/router';
import 'rxjs/Rx'; // Load all features
import { WelcomeComponent } from './home/welcome.component'
#Component({
selector: 'pm-app',
template: `
<div>
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<a class='navbar-brand'>{{pageTitle}}</a>
<ul class='nav navbar-nav'>
<li><a>Home</a></li>
<li><a>Product List</a></li>
</ul>
</div>
</nav>
</div>
` ,
entryComponents : [ProductListComponent],
providers: [ProductService]
})
#Routes([
{ path: '/welcome' , name: 'Welcome' , component: WelcomeComponent, useAsDefault: true},
{ path: '/products' , name: 'Products' , component: ProductListComponent }
])
export class AppComponent {
pageTitle:string = 'Acme Product Management';
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { ProductListComponent } from './products/product-list.Component';
import { HttpModule } from "#angular/http";
import { RouterModule } from '#angular/router'
import { ProductFilterPipe } from './products/product-filter.pipe';
import { StarComponent } from './shared/star.component';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule,FormsModule,HttpModule,RouterModule],
declarations: [ AppComponent,ProductListComponent,ProductFilterPipe,StarComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
welcome.compnent.ts
import { Component } from '#angular/core';
#Component({
templateUrl: 'app/home/welcome.component.html'
})
export class WelcomeComponent {
public pageTitle: string = 'Welcome';
}
I think my coding is fine. But unable to get the expected result. Please Help!
Found out, the issue is... with RC5, Routes is an array of path's & is no more a Decorator, and you have to import 'RouterModule' instead of 'provideRouter'. While exporting you have to use 'RouterModule.forRoot'.
Also with RC5, we no longer specify the string name of the component while configuring routes instead we only specify the path & component only. And we no longer use the prefix '/' for the path. Also we no longer using useAsDefault instead we use redirectTo property to configure the default path.
I have used a separate module to do my route configurations instead of doing it in the root component as earlier. An updated version of my route configuration is given as below. Hope this will be helpful.
app.routes.ts
import { Routes, RouterModule } from '#angular/router';
import { ProductListComponent } from './products/product-list.Component';
import { WelcomeComponent } from './home/welcome.component'
import { ProductDetailComponent } from './products/product- detail.component';
const routes: Routes = [
{
path: 'welcome' ,
component: WelcomeComponent,
},
{
path: 'products' ,
component: ProductListComponent
},
{
path: 'product/:id' ,
component: ProductDetailComponent
},
{
path:'',
redirectTo:'/welcome',
pathMatch:'full'
},
];
export const routing = RouterModule.forRoot(routes);

Child routes error with RC6 upgrade

I am getting this runtime error with my routing when upgrading to RC6 (this includes child routes):
ListingComponent is not part of any NgModule or the module has not
been imported into your module
This error indicates that I have not added ListingComponent to ngModule but it is there as a declaration.
In app.module I have all my components as declarations. I also import my routing component. The routing component has a sub routing component called listing.routes.
Here is my app.module.ts:
import {NgModule, CUSTOM_ELEMENTS_SCHEMA, ReflectiveInjector } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import {FormsModule, FormBuilder} from '#angular/forms';
import { NgClass, NgStyle} from '#angular/common';
import { AppComponent } from './app.component';
import {routing} from './app.routes';
import {ListingModule} from './components/listing/listingmodule';
import {ListingComponent} from './components/listing/listing.Component';
#NgModule({
imports: [BrowserModule, routing],
providers: [],
declarations: [AppComponent, ListingComponent, ListingModule],
bootstrap: [AppComponent]
})
export class AppModule {
}
Here is my app.routes.ts (which I import as routes):
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {ListingRoutes} from './components/listing/listing.routes';
import {SplashComponent} from './components/splash/splash.component';
export const appRoutingProviders: Routes = ([
{ path: '', component: SplashComponent },
{ path: 'login', component: SplashComponent },
...ListingRoutes
]);
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutingProviders);
And here is my listing.routes.ts:
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {ListingModule} from './repairreturnmodule';
import {ListingComponent} from '../listing/listing.component';
export const ListingRoutes: Routes = [
{
path: '',
component: ListingModule,
children: [
{ path: 'listing', component: ListingComponent},
]
}
];
export const ListingRouting: ModuleWithProviders = RouterModule.forChild(ListingRoutes);
Have I missed anything?
EDIT: you are importing your ListingComponent from
import {ListingComponent} from './components/listing/listing.Component';
if you using the same convention from the AppComponent (which you should) you should import from
import {ListingComponent} from './components/listing/listing.component';
See what is the name of the file. The rest of the code looks right.
I'm not sure if this is the source of the problem, but you are declaring a module there in the AppModule, when you should be importing it...
Try moving the ListingModule from declarations array to the imports array.

Resources