So i'm using the official documentation to setup and install angularfire2.
https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md
This works fine, my data is coming in but when building for production i get this error:
It looks like you're using the development build of the Firebase JS
SDK. When deploying Firebase apps to production, it is advisable to
only import the individual SDK components you intend to use.
For the CDN builds, these are available in the following manner
(replace with the name of a component - i.e. auth, database,
etc):
I tried every suggestion out there but nothing is working.
Any Ideas?
thx,
Root module
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { NoopAnimationsModule } from '#angular/platform-browser/animations';
import { RootComponent } from './rootComponent.component';
import { ROOT_ROUTES } from './root.routes';
import { BrowserModule, Title } from '#angular/platform-browser';
import { AngularFireModule } from '#angular/fire';
import { AngularFirestoreModule } from '#angular/fire/firestore';
import { environment } from '../environments/environment';
#NgModule({
declarations: [RootComponent],
imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
NoopAnimationsModule,
BrowserModule,
RouterModule.forRoot(ROOT_ROUTES)
],
providers: [Title],
bootstrap: [RootComponent]
})
export class RootModule {}
Component
import { Component, OnInit } from '#angular/core';
import { MatTableDataSource } from '#angular/material';
import { AngularFirestore } from '#angular/fire/firestore';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '#angular/router';
import { Seal } from '../seals.types';
import { StudioService } from '../../../service/studio.service';
#Component({
selector: 'seals-component',
templateUrl: './seals.component.html'
})
export class SealsComponent implements OnInit {
constructor(private db:AngularFirestore, private studioService: StudioService) {
this.getData();
}
items: Observable<any[]>;
dataSource = new MatTableDataSource<Seal[]>();;
displayedColumns: string[] = ['description', 'language', 'seal', 'type'];
pID:string = 'flsjezlijlsfj';
ngOnInit() {}
getData() {
this.items = this.db.collection(`sealsDB/TNDorQMQOzoqY6P6Ej0i/seal/${this.pID}/seal/`).valueChanges();
this.items.subscribe(seals => {
this.dataSource.data = seals
})
}
}
I was having the same warning and it took me a while to figure it out that I was using the User interface from firebase/auth, along with Timestamp.fromDate() in other file.
So I added:
import * as firebase from 'firebase/app';
import { User } from 'firebase/auth';
and just
import * as firebase from 'firebase/app';
where I used
firebase.firestore.Timestamp.fromDate()
This got rid of the warning.
I have a provider having a method getWeather() and I want to call it from home component. When I am trying to call getWeather() from home component I am getting error in console like: ERROR TypeError: Cannot read property 'getWeather' of undefined
weather.ts
import { Http } from '#angular/http';
import { Injectable } from '#angular/core';
import "rxjs/add/operator/map";
#Injectable()
export class WeatherProvider {
constructor(public http: Http) {
console.log('Hello WeatherProvider Provider: ');
}
getWeather() {
return this.http.get('https://samples.openweathermap.org/data/2.5/forecast?q=London,us&appid=b6907d289e10d714a6e88b30761fae22').map(res=>res.json());
}
}
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { WeatherProvider } from "../../providers/weather/weather";
//import { HttpModule } from "#angular/http";
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
weather:any;
constructor(public navCtrl: NavController, private wp:WeatherProvider) {
}
ionViewWillEnter() {
this.weather.getWeather().subscribe(weather=>{
console.log(weather)
})
}
}
The error is gone after restarting the ionic dev server. I don't know why the ionic is behaving like this.
first of all iwant to apologize for my poor englis, im trying to resolve this by my own for few days and i couldn't, i really need to solve this for a school project.
I have a variable named "myAccountData", im trying to put GET HTTP request result on it but its not working here's my code:
Page.ts:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NativeStorage } from '#ionic-native/native-storage';
import { EditaccountPage } from '../editaccount/editaccount';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { Observable } from 'rxjs/Observable';
/**
* Generated class for the MyaccountPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-myaccount',
templateUrl: 'myaccount.html',
})
export class MyaccountPage {
public myAccountData;
constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage: NativeStorage, public authServiceProvider: AuthServiceProvider) {
}
setmyAccountData(data){
this.myAccountData=this.authServiceProvider.getData("userbyid/40").subscribe( myData => {
this.myAccountData=myData;
});
}
gotoEdit(){
this.navCtrl.push(EditaccountPage);
}
}
authServiceProvider.ts:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
let apiUrl = "http://192.168.1.2/api/v1/"
/*
Generated class for the AuthServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
#Injectable()
export class AuthServiceProvider {
constructor(public http: HttpClient) {
console.log('Hello AuthServiceProvider Provider');
}
public async postData(credentials, type): Promise<any> {
await this.http.post(apiUrl + type, JSON.stringify(credentials)).toPromise();
}
public getData(type): Observable<any> {
return this.http.get(apiUrl + type);
}
}
When i run "http://192.168.1.2/api/v1/userbyid/40" on postman this is what i get: {"id":"40","firstname":"Kebbab","lastname":"Walid","email":"walid#kebbab.fr","username":"walid","password":"a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3","sexe":"","birth":"2018-04-11","telephone":"0","type":"ouvrier","emailverified":"0"}
But on page.html if i use {{myAccountData.firstname}} it doesnt show anything
Error Log:
ERROR Error: Uncaught (in promise): TypeError: _co.myAccountData is undefined
View_MyaccountPage_0/<#ng:///AppModule/MyaccountPage.ngfactory.js:128:13
updateRenderer#http://localhost:8100/build/vendor.js:14342:20
checkAndUpdateView#http://localhost:8100/build/vendor.js:13866:5
callViewAction#http://localhost:8100/build/vendor.js:14211:21
execComponentViewsAction#http://localhost:8100/build/vendor.js:14143:13
checkAndUpdateView#http://localhost:8100/build/vendor.js:13867:5
ViewRef_.prototype.detectChanges#http://localhost:8100/build/vendor.js:11653:9
NavControllerBase.prototype._viewAttachToDOM#http://localhost:8100/build/vendor.js:51117:9
Tab.prototype._viewAttachToDOM#http://localhost:8100/build/vendor.js:77128:9
NavControllerBase.prototype._transition#http://localhost:8100/build/vendor.js:51197:13
NavControllerBase.prototype._nextTrns/<#http://localhost:8100/build/vendor.js:50918:40
F</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14974
onInvoke#http://localhost:8100/build/vendor.js:4982:24
F</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14901
F</c</r.prototype.run#http://localhost:8100/build/polyfills.js:3:10124
f/<#http://localhost:8100/build/polyfills.js:3:20240
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask#http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:10815
o#http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask#http://localhost:8100/build/polyfills.js:3:16823
p#http://localhost:8100/build/polyfills.js:2:27646
v#http://localhost:8100/build/polyfills.js:2:27893
Stack trace:
c#http://localhost:8100/build/polyfills.js:3:19752
c#http://localhost:8100/build/polyfills.js:3:19461
f/<#http://localhost:8100/build/polyfills.js:3:20233
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask#http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:10815
o#http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask#http://localhost:8100/build/polyfills.js:3:16823
p#http://localhost:8100/build/polyfills.js:2:27646
v#http://localhost:8100/build/polyfills.js:2:27893
core.js:1350
In my page.html i usef { { myAccountData?.firstname } } instead of { { myAccountData.firstname } } and it worked
My parent component is too large to manage so I want to move the the functions into the separated child classes that extend the parent.
The parent class contains variables that need to be updated in the child classes as well as I have injected providers into the parent as well.
#Component({
selector: 'events-list',
templateUrl: 'events-list.html'
})
export class EventsListComponent {
filterString: string;
infiniteScroll: any;
refresher: any;
eventsList: any[];
selectedCategoriesList: [Category];
pageNum: number;
pageSize: number;
searchText: string = '';
noEvents: boolean;
filterSearchText: string;
filterStartDate: string;
filterEndDate: string;
tabsFilterValue: string = 'all'
constructor(
public authSrvc: AuthSrvc,
public calendarSrvc: CalendarSrvc,
public eventsSrvc: EventsSrvc,
public helperSrvc: HelperSrvc,
public locationSrvc: LocationSrvc,
public pushSrvc: PushSrvc) {
}
Above is my parent class
import {Injectable} from '#angular/core';
import {Response} from '#angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/observable/of';
import {Observable} from 'rxjs/Observable';
import {ModalController, LoadingController, NavController, ToastController, Platform} from 'ionic-angular';
import {Storage} from '#ionic/storage';
import {DateFormatPipe} from 'angular2-moment';
import {Category} from '../../../app/app.interfaces';
import * as moment from 'moment';
/** Ionic Native **/
import {GoogleAnalytics} from '#ionic-native/google-analytics';
import {Network} from '#ionic-native/network';
/** Providers **/
import {AuthSrvc} from '../../../../providers/auth-srvc';
import {CalendarSrvc} from '../../../../providers/calendar-srvc';
import {EventsSrvc} from '../../../../providers/events-srvc';
import {HelperSrvc} from '../../../../providers/helper-srvc';
import {LocationSrvc} from '../../../../providers/location-srvc';
import {PushSrvc} from '../../../../providers/push-srvc';
/** Pages **/
import {AuthPage} from '../../../pages/auth/auth-page';
import {EventsListComponent} from '../../../events-components/events-list/events-list';
export class eventsInit extends EventsListComponent {
constructor(
loadingCtrl: LoadingController,
toastCtrl: ToastController,
modalCtrl: ModalController,
navCtrl: NavController,
platform: Platform,
storage: Storage,
ga: GoogleAnalytics,
network: Network,
authSrvc: AuthSrvc,
calendarSrvc: CalendarSrvc,
eventsSrvc: EventsSrvc,
helperSrvc: HelperSrvc,
locationSrvc: LocationSrvc,
pushSrvc: PushSrvc
) {
super(loadingCtrl,
toastCtrl,
modalCtrl,
navCtrl,
platform,
storage,
ga,
network,
authSrvc,
calendarSrvc,
eventsSrvc,
helperSrvc,
locationSrvc,
pushSrvc);
}
ngOnInit()
{
console.log('test')
}
}
Above is my child class
this is not working and is always failing with by parameters not being populated or the super call failing. What is the correct way to do this.
/** Update **/
If removing the injectable I always get the error Can't resolve all parameters for eventsInit: (?, ?, ?, ?, ?, ?).
Below is my main module
import {NgModule, ErrorHandler} from '#angular/core';
import {FormsModule} from '#angular/forms';
import {Ng2ImgFallbackModule} from 'ng2-img-fallback';
import {CloudSettings, CloudModule} from '#ionic/cloud-angular';
import {MomentModule,DateFormatPipe} from 'angular2-moment';
import { IonicStorageModule } from '#ionic/storage';
import {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';
import {EnvironmentsModule} from '../environment_variables/environment_variables.module'
import {AppConfig} from '../app/app.config';
import {MyApp} from '../app/app.component';
/** Ionic Native **/
import {Calendar} from '#ionic-native/calendar';
import { Diagnostic } from '#ionic-native/diagnostic';
import {Facebook} from '#ionic-native/facebook';
import {GooglePlus} from '#ionic-native/google-plus';
import { GoogleAnalytics } from '#ionic-native/google-analytics';
import { Keyboard } from '#ionic-native/keyboard';
import { LaunchNavigator, LaunchNavigatorOptions } from '#ionic-native/launch-navigator';
import {Network} from '#ionic-native/network';
import { SocialSharing } from '#ionic-native/social-sharing';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
/** Pages **/
import {AuthPage} from '../pages/auth/auth-page';
import {EventsPage} from '../pages/events/events-page';
import {EventPage} from '../pages/event/event-page';
import {ProfilePage} from '../pages/profile/profile';
import {SettingsPage} from '../pages/settings/settings';
/** Components **/
//Auth
import {LoginComponent} from '../components/auth-components/login/login';
import {ForgotPasswordDirective} from '../components/auth-components/forgot-password';
import {RegisterComponent} from '../components/auth-components/register/register';
import {SocialComponent} from '../components/auth-components/social/social';
import {WalkthroughComponent} from '../components/auth-components/walkthrough/walkthrough';
//Base
import {SidenavComponent} from '../components/sidenav/sidenav';
import {TimeslotFilterComponent} from '../components/timeslot-filter/timeslot-filter';
import {SettingsComponent} from '../components/settings/settings';
import {EventBookComponent} from '../components/event-book/event-book';
//Events
import {EventsFilterComponent} from '../components/events-components/events-filter/events-filter';
import {EventsListComponent} from '../components/events-components/events-list/events-list';
/** Events Extensions **/
import {eventsInit} from '../components/events-components/events-list/extensions/events-init';
import {EventsItemComponent} from '../components/events-components/events-item/events-item';
//Event
import {AttendeesListComponent} from '../components/event-components/attendees-list/attendees-list';
import {AttendeesItemComponent} from '../components/event-components/attendees-item/attendees-item';
//Profile
import {ProfileComponent} from '../components/profile/profile';
import {ParallaxHeaderDirective} from '../components/parallax-header';
/** Providers **/
import {EventsSrvc} from '../providers/events-srvc';
import {AuthSrvc} from '../providers/auth-srvc';
import {CalendarSrvc} from '../providers/calendar-srvc';
import {HelperSrvc} from '../providers/helper-srvc';
import {LocationSrvc} from '../providers/location-srvc';
import {PushSrvc} from '../providers/push-srvc';
/** Pipes **/
import {LimitToPipe} from '../pipes/limitTo'
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'df0d4e63'
}
};
class NetworkMock extends Network {
get type(): string {
return (super['type'] === null) ? "wifi" : super['type'];
}
}
#NgModule({
declarations: [
MyApp,
AuthPage,
LoginComponent,
ForgotPasswordDirective,
ParallaxHeaderDirective,
RegisterComponent,
SocialComponent,
WalkthroughComponent,
SidenavComponent,
EventsPage,
EventsListComponent,
eventsInit,
EventsItemComponent,
EventsFilterComponent,
AttendeesListComponent,
AttendeesItemComponent,
EventPage,
ProfilePage,
ProfileComponent,
SettingsPage,
SettingsComponent,
TimeslotFilterComponent,
EventBookComponent,
LimitToPipe,
],
imports: [
IonicModule.forRoot(MyApp,
{
backButtonText: 'Back',
backButtonIcon: 'arrow-back',
iconMode: 'md',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabsPlacement: 'bottom',
pageTransition: 'md',
mode: 'md'
}),
IonicStorageModule.forRoot(),
CloudModule.forRoot(cloudSettings),
FormsModule,
MomentModule,
EnvironmentsModule,
Ng2ImgFallbackModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AuthPage,
EventsPage,
EventPage,
ProfilePage,
SettingsPage,
EventBookComponent,
EventsFilterComponent,
SidenavComponent
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},
Calendar,
Diagnostic,
Facebook,
GooglePlus,
DateFormatPipe,
GoogleAnalytics,
Keyboard,
LaunchNavigator,
{ provide: Network, useClass: NetworkMock },
SocialSharing,
StatusBar,
SplashScreen,
EventsSrvc,
AuthSrvc,
CalendarSrvc,
HelperSrvc,
EventsSrvc,
LocationSrvc,
AppConfig]
})
export class AppModule {
}
I think you have to follow below mentioned implementation.I have implemented this in my app and it is working fine.
Note: This is just a structure.Please implement it as you wish.
your component class:
import { eventsInit } from "../../path-for-it";
export class EventsListComponent extends eventsInit {
constructor() {
super();
}
Base class:
export abstract class eventsInit {
protected YourMethodName(res: Response) {
}
}
Update:
It seems you have not followed the latest changes of provider implementation.You have to declare it inside the app.module.ts file.Please see this article: Providers
So after banging the extend class logic into my head and understanding that it wasnt the correct way to break up my code. I went with an attribute based directives with #Hostlistener and #Input variables.
I was able to break up the parent component into much smaller sections and allow the parent component to hold all the variables and pass the updated values to the directives. I went from 1 component over 500 lines to multiple that dont go over 120. Much easier to read, to test and to maintain.
I have been working on a project in Ionic and after running the file I got the the runtime error saying Cannot find module "../signup/signup". I then went into the project and checked to see if it the file and directory existed which it didn't. I then proceeded to create a directory and file to see if that would fix the problem and it did not. Here is the code for signup.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component(
{
templateUrl: 'signup.html'
})
export class SignupPage
{
static get parameters()
{
return [[NavController]];
}
constructor(public nav)
{
this.nav = nav;
}
}
Here is the page that I have made the import
import {Component} from '#angular/core';
import {NavController, AlertController} from 'ionic-angular';
import {SignupPage} from '../signup/signup';
import {TabsPage} from "../tabs/tabs";
import {FormBuilder, FormControl, FormGroup, AbstractControl, Validators, NgControl} from '#angular/forms';
import {AuthService} from '../../providers/auth-service';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
loginForm: FormGroup;
submitAttempt: boolean = false;
constructor(public navCtrl: NavController, public fb: FormBuilder, private _auth: AuthService, private alertCtrl: AlertController) {
this.loginForm = this.fb.group({
email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-z0-9]+(\\.[_a-z0-9]+)*#[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,15})$')])],
password: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(16)])]
});
}
}
Here are the files as it is setup in the directory
project directory
These are the errors I seem to be getting whenever I run ionic serve. This may also be adding to the cause of the problem
enter image description here
I have looked around and the solutions I have tried don't seem to work. I also seem to be getting an error on line 8 of my login file where it attempts to import '#angular/forms' which may be the cause of the problem. Help is gladly appreciated