When I am trying to run my app, it is saying
Type IonicApp is part of the declarations of 2 modules: IonicModule and AppModule! Please consider moving IonicApp to a higher module that imports IonicModule and AppModule. You can also create a new NgModule that exports and includes IonicApp then import that NgModule in IonicModule and AppModule.
How do I get rid of this error ?
Copying entire error coming in console below:
ionic-app-script task: "build"
[11:51:25] Error: Type IonicApp in F:/D/IONIC/quicktask/quicktask-web-froala -
test/node_modules/ionic-angular/components/app/app-root.d.ts is part of the declarations of 2 modules:
IonicModule in F:/D/IONIC/quicktask/quicktask-web-froala - test/node_modules/ionic-angular/module.d.ts and
AppModule in F:/D/IONIC/quicktask/quicktask-web-froala - test/src/app/app.module.ts! Please consider moving
IonicApp in F:/D/IONIC/quicktask/quicktask-web-froala -
test/node_modules/ionic-angular/components/app/app-root.d.ts to a higher module that imports IonicModule in
F:/D/IONIC/quicktask/quicktask-web-froala - test/node_modules/ionic-angular/module.d.ts and AppModule in
F:/D/IONIC/quicktask/quicktask-web-froala - test/src/app/app.module.ts. You can also create a new NgModule
that exports and includes IonicApp in F:/D/IONIC/quicktask/quicktask-web-froala -
test/node_modules/ionic-angular/components/app/app-root.d.ts then import that NgModule in IonicModule in
F:/D/IONIC/quicktask/quicktask-web-froala - test/node_modules/ionic-angular/module.d.ts and AppModule in
F:/D/IONIC/quicktask/quicktask-web-froala - test/src/app/app.module.ts.
What should I do?
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { App, NavController, IonicErrorHandler, IonicModule,IonicApp } from 'ionic-angular'; // removed IonicApp from here
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login';
import { NewtaskPage } from '../pages/newtask/newtask';
//import { DashboardPage } from '../pages/dashboard/dashboard';
import { TaskgivenPage } from '../pages/taskgiven/taskgiven';
import { MytaskPage } from '../pages/mytask/mytask';
import { CommunicationPage } from '../pages/communication/communication';
import { CommunicationgivenPage } from '../pages/communicationgiven/communicationgiven';
import { CommunicationreportPage } from '../pages/communicationreport/communicationreport';
import { GivencommunicationclosedPage } from '../pages/givencommunicationclosed/givencommunicationclosed';
import { TestPage } from '../pages/test/test';
import { LogoutPage } from '../pages/logout/logout';
import { MyclosedtaskPage } from '../pages/myclosedtask/myclosedtask';
import { GivenclosedtaskPage } from '../pages/givenclosedtask/givenclosedtask';
import { ReporttoPage } from '../pages/reportto/reportto';
import { SlidePage } from '../pages/slide/slide';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
//import { Firebase } from '#ionic-native/firebase';
import { SpeechRecognition } from '#ionic-native/speech-recognition';
import { Headers, Http, HttpModule ,Response } from '#angular/http';
import { IonicStorageModule } from '#ionic/storage';
import { TimeAgoPipe } from 'time-ago-pipe';
import {Commopen} from '../pages/givencommunicationclosed/commopen';
import { Userimage } from '../pages/dashboard2/userimage';
import { MycommclosedPage } from '../pages/mycommclosed/mycommclosed';
import { Dashboard2Page } from '../pages/dashboard2/dashboard2';
import { MytaskuserwisePage } from '../pages/mytaskuserwise/mytaskuserwise';
import { ProfilePage } from '../pages/profile/profile';
import { PaymentPage } from '../pages/payment/payment';
import { InAppBrowser } from '#ionic-native/in-app-browser';
import { InfoPage } from '../pages/info/info';
import { PerformancePage } from '../pages/performance/performance';
import { PopoverPage } from '../pages/communicationgiven/popover';
import { Updatepopup} from '../pages/communicationgiven/updatepopup';
import { TimelinePage } from '../pages/timeline/timeline';
import { Commpopup } from '../pages/timeline/commpopup';
import {SearchPage} from '../pages/search/search';
import {SuggestionPage} from '../pages/suggestion/suggestion';
import {Mytaskpopup} from '../pages/mytask/mytaskpopup';
import {Userwisepopup} from '../pages/mytaskuserwise/userwisepopup';
import {Taskgivenpopup} from '../pages/taskgiven/taskgivenpopup';
import {Reportpopup} from '../pages/reportto/reportpopup';
import {FollowerPage} from '../pages/follower/follower';
import {CommfollowerPage} from '../pages/commfollower/commfollower';
import { CommPage } from '../pages/comm/comm';
import {ReportsPage} from '../pages/reports/reports';
import { DashmodalPage } from '../pages/dashmodal/dashmodal';
import { Dashmodal1Page } from '../pages/dashmodal1/dashmodal1';
import { LabelPage } from '../pages/label/label';
import { SortPage } from '../pages/sort/sort';
import { SortuserwisePage } from '../pages/sortuserwise/sortuserwise';
import { LastseenPage } from '../pages/lastseen/lastseen';
import { MemolistPage } from '../pages/memolist/memolist';
import { OfcmemoPage } from '../pages/ofcmemo/ofcmemo';
import { CommadminPage } from '../pages/commadmin/commadmin';
import { AdminpcPage } from '../pages/adminpc/adminpc';
import {AiPage} from '../pages/ai/ai';
import { Autosize } from '../directives/autosize/autosize';
// Import Froala Editor.
import "froala-editor/js/froala_editor.pkgd.min.js";
import { NoSanitizePipe } from '../pipes/no-sanitize/no-sanitize';
// Import Angular2 plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import {Nl2BrPipeModule} from 'nl2br-pipe';
import {LinkyModule} from 'angular-linky';
//Search
import { SelectSearchableModule } from 'ionic-select-searchable';
// for ionic build --prod errors or aot compilation
// import { OverlayPortal } from '../../node_modules/ionic-angular/umd/components/app/overlay-portal.d';
//import { IonicApp } from '../../node_modules/ionic-angular/umd/components/app/app-root.d';
//import { ClickBlock } from '../../node_modules/ionic-angular/umd/components/app/click-block.d';
//import { Slides } from '../../node_modules/ionic-angular/umd/components/slides/slides.d';
import { FilterArrayPipe } from '../pages/dashboard2/filterpipe';
import {IonicPage, NavParams, Slides} from 'ionic-angular';
#NgModule({
declarations: [
// OverlayPortal, //for aot compilation
// IonicApp , //for aot compilation for app-root.d
// ClickBlock, //for aot compilation
// Slides, //for aot compilation
IonicApp,
FilterArrayPipe, //for aot compilation
TimeAgoPipe,
MyApp,
HomePage,
ListPage,
LoginPage,
NewtaskPage,
// DashboardPage,
TaskgivenPage,
MytaskPage,
CommunicationPage,
CommunicationgivenPage,
CommunicationreportPage,
GivencommunicationclosedPage,
TestPage,
LogoutPage,
MyclosedtaskPage,
GivenclosedtaskPage,
ReporttoPage,
Dashboard2Page,
MytaskuserwisePage,
MycommclosedPage,
ProfilePage,
PaymentPage,
InfoPage,
SlidePage,
PerformancePage ,
PopoverPage,
Updatepopup,
SearchPage,
TimelinePage,
Commpopup,
SuggestionPage,
Mytaskpopup,
Userwisepopup,
Taskgivenpopup,
Reportpopup,
AiPage,
Autosize,
NoSanitizePipe,
FollowerPage,
CommfollowerPage,
CommPage,
ReportsPage,
DashmodalPage,
Dashmodal1Page,
LabelPage,
SortPage,
SortuserwisePage,
LastseenPage,
MemolistPage,
OfcmemoPage,
CommadminPage,
AdminpcPage,
//OverlayPortal
],
imports: [
BrowserModule,
HttpModule,
Nl2BrPipeModule,
LinkyModule,
SelectSearchableModule,
IonicModule.forRoot(MyApp),
FroalaEditorModule.forRoot(),
FroalaViewModule.forRoot(),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
LoginPage,
NewtaskPage,
// DashboardPage,
TaskgivenPage,
MytaskPage,
CommunicationPage,
CommunicationgivenPage,
CommunicationreportPage,
GivencommunicationclosedPage,
TestPage,
LogoutPage,
MyclosedtaskPage,
GivenclosedtaskPage,
ReporttoPage,
Dashboard2Page,
MytaskuserwisePage,
MycommclosedPage,
ProfilePage,
PaymentPage,
InfoPage,
SlidePage,
PerformancePage,
PopoverPage,
Updatepopup,
SearchPage,
TimelinePage,
Commpopup,
SuggestionPage,
Mytaskpopup,
Userwisepopup,
Taskgivenpopup,
Reportpopup,
AiPage,
FollowerPage,
CommfollowerPage,
CommPage,
ReportsPage,
DashmodalPage,
Dashmodal1Page,
LabelPage,
SortPage,
SortuserwisePage,
LastseenPage,
MemolistPage,
OfcmemoPage,
CommadminPage,
AdminpcPage
],
providers: [
StatusBar,
SplashScreen,
//Firebase,
Commopen,
GivenclosedtaskPage,
Userimage,
InAppBrowser,
SpeechRecognition,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
You dont have to add IonicApp in declarations array which is what your error message seems to saying:
Type IonicApp is part of the declarations of 2 modules: IonicModule and AppModule!
declarations: [
// OverlayPortal, //for aot compilation
// IonicApp , //for aot compilation for app-root.d
// ClickBlock, //for aot compilation
// Slides, //for aot compilation
IonicApp,// <-- remove this.
It should only be in bootstrap array.
IonicApp is a component and already declared inside IonicModule and needed only for bootstrapping. It is not a component to be added into declarations.
#NgModule({
declarations: [
// OverlayPortal, //for aot compilation
// IonicApp , //for aot compilation for app-root.d
// ClickBlock, //for aot compilation
// Slides, //for aot compilation
IonicApp ----> delete This line.
Related
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.
How do I create 5 star rating in ionic 3, I visited https://github.com/andrucz/ionic2-rating but it is not working. Also read some tutorial but not found anything clean and clear for ionic 3.
Just for clear, I want to get rating value and display rating.
Any help would be appreciated.
Thankyou
Demo: https://stackblitz.com/edit/ionic3-star-rating
Use github.com/melwinVincent/ionic3-star-rating npm package.
Step 1. Add the ionic3-star-rating component in your page (parent component) as follows
<ionic3-star-rating
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#488aff"
defaultColor = "#f4f4f4"
readonly="false"
[rating]="3">
</ionic3-star-rating>
Step 2.
You have to import the StarRatingModule in the module.ts of your parent component as follows
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { StarRatingModule } from 'ionic3-star-rating';
#NgModule({
declarations: [
ParentPage,
],
imports: [
StarRatingModule,
IonicPageModule.forChild(ParentPage),
],
})
export class ParentPageModule {}
Step 3.
To get the changed rating in the parent component,
You need to use events from ionic package.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Events } from 'ionic-angular';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController,
public events: Events) {
events.subscribe('star-rating:changed', (starRating) => {console.log(starRating)});
}
}
When I am trying to run npm run ionic:build --prod, it is giving me below errors:
Error: Cannot determine the module for class OverlayPortal in
F:/D/IONIC/quicktask/quicktask-web-froala/node_modules/ionic-angular/umd/components/app/overlay-portal.d.ts!
Add OverlayPortal to the NgModule to fix it. Cannot determine the module for class IonicApp in
F:/D/IONIC/quicktask/quicktask-web-froala/node_modules/ionic-angular/umd/components/app/app-root.d.ts! Add
IonicApp to the NgModule to fix it. Cannot determine the module for class ClickBlock in
F:/D/IONIC/quicktask/quicktask-web-froala/node_modules/ionic-angular/umd/components/app/click-block.d.ts!
Add ClickBlock to the NgModule to fix it. Cannot determine the module for class Slides in
F:/D/IONIC/quicktask/quicktask-web-froala/node_modules/ionic-angular/umd/components/slides/slides.d.ts! Add
Slides to the NgModule to fix it.
What do I do to build using --prod. I have done npm install again, updated app/scripts, don't know what else is needed.
Find below my app.module.ts
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { App, NavController, IonicErrorHandler, IonicModule,IonicApp } from 'ionic-angular'; // removed IonicApp from here
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login';
import { NewtaskPage } from '../pages/newtask/newtask';
//import { DashboardPage } from '../pages/dashboard/dashboard';
import { TaskgivenPage } from '../pages/taskgiven/taskgiven';
import { MytaskPage } from '../pages/mytask/mytask';
import { CommunicationPage } from '../pages/communication/communication';
import { CommunicationgivenPage } from '../pages/communicationgiven/communicationgiven';
import { CommunicationreportPage } from '../pages/communicationreport/communicationreport';
import { GivencommunicationclosedPage } from '../pages/givencommunicationclosed/givencommunicationclosed';
import { TestPage } from '../pages/test/test';
import { LogoutPage } from '../pages/logout/logout';
import { MyclosedtaskPage } from '../pages/myclosedtask/myclosedtask';
import { GivenclosedtaskPage } from '../pages/givenclosedtask/givenclosedtask';
import { ReporttoPage } from '../pages/reportto/reportto';
import { SlidePage } from '../pages/slide/slide';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
//import { Firebase } from '#ionic-native/firebase';
import { SpeechRecognition } from '#ionic-native/speech-recognition';
import { Headers, Http, HttpModule ,Response } from '#angular/http';
import { IonicStorageModule } from '#ionic/storage';
import { TimeAgoPipe } from 'time-ago-pipe';
import {Commopen} from '../pages/givencommunicationclosed/commopen';
import { Userimage } from '../pages/dashboard2/userimage';
import { MycommclosedPage } from '../pages/mycommclosed/mycommclosed';
import { Dashboard2Page } from '../pages/dashboard2/dashboard2';
import { MytaskuserwisePage } from '../pages/mytaskuserwise/mytaskuserwise';
import { ProfilePage } from '../pages/profile/profile';
import { PaymentPage } from '../pages/payment/payment';
import { InAppBrowser } from '#ionic-native/in-app-browser';
import { InfoPage } from '../pages/info/info';
import { PerformancePage } from '../pages/performance/performance';
import { PopoverPage } from '../pages/communicationgiven/popover';
import { Updatepopup} from '../pages/communicationgiven/updatepopup';
import { TimelinePage } from '../pages/timeline/timeline';
import { Commpopup } from '../pages/timeline/commpopup';
import {SearchPage} from '../pages/search/search';
import {SuggestionPage} from '../pages/suggestion/suggestion';
import {Mytaskpopup} from '../pages/mytask/mytaskpopup';
import {Userwisepopup} from '../pages/mytaskuserwise/userwisepopup';
import {Taskgivenpopup} from '../pages/taskgiven/taskgivenpopup';
import {Reportpopup} from '../pages/reportto/reportpopup';
import {FollowerPage} from '../pages/follower/follower';
import {CommfollowerPage} from '../pages/commfollower/commfollower';
import { CommPage } from '../pages/comm/comm';
import {ReportsPage} from '../pages/reports/reports';
import { DashmodalPage } from '../pages/dashmodal/dashmodal';
import { Dashmodal1Page } from '../pages/dashmodal1/dashmodal1';
import { LabelPage } from '../pages/label/label';
import { SortPage } from '../pages/sort/sort';
import { SortuserwisePage } from '../pages/sortuserwise/sortuserwise';
import { LastseenPage } from '../pages/lastseen/lastseen';
import { MemolistPage } from '../pages/memolist/memolist';
import { OfcmemoPage } from '../pages/ofcmemo/ofcmemo';
import { CommadminPage } from '../pages/commadmin/commadmin';
import { AdminpcPage } from '../pages/adminpc/adminpc';
import {AiPage} from '../pages/ai/ai';
import { Autosize } from '../directives/autosize/autosize';
// Import Froala Editor.
import "froala-editor/js/froala_editor.pkgd.min.js";
import { NoSanitizePipe } from '../pipes/no-sanitize/no-sanitize';
// Import Angular2 plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import {Nl2BrPipeModule} from 'nl2br-pipe';
import {LinkyModule} from 'angular-linky';
//Search
import { SelectSearchableModule } from 'ionic-select-searchable';
// for ionic build --prod errors or aot compilation
// import { OverlayPortal } from '../../node_modules/ionic-angular/umd/components/app/overlay-portal.d';
//import { IonicApp } from '../../node_modules/ionic-angular/umd/components/app/app-root.d';
//import { ClickBlock } from '../../node_modules/ionic-angular/umd/components/app/click-block.d';
//import { Slides } from '../../node_modules/ionic-angular/umd/components/slides/slides.d';
import { FilterArrayPipe } from '../pages/dashboard2/filterpipe';
import {IonicPage, NavParams, Slides} from 'ionic-angular';
#NgModule({
declarations: [
// OverlayPortal, //for aot compilation
// IonicApp , //for aot compilation for app-root.d
// ClickBlock, //for aot compilation
// Slides, //for aot compilation
IonicApp,
FilterArrayPipe, //for aot compilation
TimeAgoPipe,
MyApp,
HomePage,
ListPage,
LoginPage,
NewtaskPage,
// DashboardPage,
TaskgivenPage,
MytaskPage,
CommunicationPage,
CommunicationgivenPage,
CommunicationreportPage,
GivencommunicationclosedPage,
TestPage,
LogoutPage,
MyclosedtaskPage,
GivenclosedtaskPage,
ReporttoPage,
Dashboard2Page,
MytaskuserwisePage,
MycommclosedPage,
ProfilePage,
PaymentPage,
InfoPage,
SlidePage,
PerformancePage ,
PopoverPage,
Updatepopup,
SearchPage,
TimelinePage,
Commpopup,
SuggestionPage,
Mytaskpopup,
Userwisepopup,
Taskgivenpopup,
Reportpopup,
AiPage,
Autosize,
NoSanitizePipe,
FollowerPage,
CommfollowerPage,
CommPage,
ReportsPage,
DashmodalPage,
Dashmodal1Page,
LabelPage,
SortPage,
SortuserwisePage,
LastseenPage,
MemolistPage,
OfcmemoPage,
CommadminPage,
AdminpcPage,
//OverlayPortal
],
imports: [
BrowserModule,
HttpModule,
Nl2BrPipeModule,
LinkyModule,
SelectSearchableModule,
IonicModule.forRoot(MyApp),
FroalaEditorModule.forRoot(),
FroalaViewModule.forRoot(),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
LoginPage,
NewtaskPage,
// DashboardPage,
TaskgivenPage,
MytaskPage,
CommunicationPage,
CommunicationgivenPage,
CommunicationreportPage,
GivencommunicationclosedPage,
TestPage,
LogoutPage,
MyclosedtaskPage,
GivenclosedtaskPage,
ReporttoPage,
Dashboard2Page,
MytaskuserwisePage,
MycommclosedPage,
ProfilePage,
PaymentPage,
InfoPage,
SlidePage,
PerformancePage,
PopoverPage,
Updatepopup,
SearchPage,
TimelinePage,
Commpopup,
SuggestionPage,
Mytaskpopup,
Userwisepopup,
Taskgivenpopup,
Reportpopup,
AiPage,
FollowerPage,
CommfollowerPage,
CommPage,
ReportsPage,
DashmodalPage,
Dashmodal1Page,
LabelPage,
SortPage,
SortuserwisePage,
LastseenPage,
MemolistPage,
OfcmemoPage,
CommadminPage,
AdminpcPage
],
providers: [
StatusBar,
SplashScreen,
//Firebase,
Commopen,
GivenclosedtaskPage,
Userimage,
InAppBrowser,
SpeechRecognition,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
My ionic info:
cli packages: (C:\Users\jessica\AppData\Roaming\npm\node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
#ionic/app-scripts : 3.1.9
Cordova Platforms : android 6.2.3 browser 5.0.1
Ionic Framework : ionic-angular 3.8.0
System:
Android SDK Tools : 25.2.5
Node : v6.10.3
npm : 5.4.2
OS : Windows 8.1
Environment Variables:
ANDROID_HOME : C:\Program Files (x86)\Android\android-sdk
Misc:
backend : legacy
The issue with AOT build is that, you have many plugins which are outdated and do not support AOT compilation.
In order to optimize, you can check for GZIP. This should reduce your load time significantly. GZIP needs to be done from server side and has nothing to do with your Frontend code.
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'm trying to use filetransfer as a provider in my app, but I'm getting this problem.
"No provider for Transfer!"
I can't find the solution.
This is my code.
My provider
import { Injectable } from '#angular/core';
import { Transfer, FileUploadOptions, TransferObject } from '#ionic-native/transfer';
// import { File } from '#ionic-native/file';
#Injectable()
export class FileTransfer {
options: FileUploadOptions = {}
fileTransfer: any;
constructor(private transfer: Transfer) {
console.log('Hello FileTransfer Provider');
}
I already imported my provider to the app.module
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { FileTransfer } from "../providers/file-transfer";
And added it to my providers in the same app.module
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }, Storage, FileTransfer]
And finally, I'm importing the provider to my page.
import { Component } from '#angular/core';
import { FileTransfer } from '../../providers/file-transfer';
----
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public storage: Storage,
public platform: Platform,
public alertCtrl: AlertController,
public modal: ModalController,
public loadingCtrl: LoadingController,
public fileTransfer: FileTransfer
)
So i dont know, where the problem is, I hope, you can help me.
Thanks!!
Try:
import { Transfer } from "../providers/file-transfer";
in your app.module.
And,
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }, Storage, Transfer]
in your providers.
The error is
"No provider for Transfer!"
Your import syntax is for ionic-native 2.8.1 here.
Change import to
import { Transfer} from '#ionic-native';
Or change ionic-native version to 2.8.1.