I am using Ionic.
Cordova CLI: 6.4.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v7.10.0
Xcode version: Xcode 8.3.2 Build version 8E2002
I get the following error:
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Module build failed: Error: ENOENT: no such file or directory, open
'/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/model/ratingModel.js'
Error: Module build failed: Error: ENOENT: no such file or directory, open
'/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/model/ratingModel.js'
When I try access the following page:
review/review.ts
...
import { RatingModel } from '../model/ratingModel';
#IonicPage()
#Component({
templateUrl: 'review.html'
})
export class ReviewPage {
...
model/ratingModel.ts
import { Injectable } from "#angular/core";
import { PersonModel } from './personModel';
import { JobModel } from './jobModel';
#Injectable()
export class RatingModel {
public id: number = null;
public job: JobModel = null;
public review: string = null;
public rating: number = null;
public reviewDate: number = null;
public time: string = null;
public person: PersonModel = null;
public anonymous: number = null;
}
This was working until I changed my pages to use lazy loading.
review/review.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ReviewPage } from './review';
import { ControlMessagesModule } from '../validation/controlMessages.module';
import { RatingComponentUpdateableModule } from '../utils/rating/ratingComponentUpdateable.module';
#NgModule({
declarations: [ReviewPage],
imports: [IonicPageModule.forChild(ReviewPage), ControlMessagesModule, RatingComponentUpdateableModule],
exports: [ReviewPage]
})
export class ReviewPageModule { }
UPDATE
I find the error occurs because of the following:
this.ratingModel = navParams.get('ratingModel');
if (!this.ratingModel) {
this.ratingModel = new RatingModel();
when I remove the new RatingModel() line, I don't get any errors.
How are you supposed to create a new RatingModel?
The problem here is you are making the model class an injectable.
#Injectable()
export class RatingModel {
You dont have to make a model class as injectable.
If you do need to do so, you will have to set it as a provider.
Or try to get an object from the explicit injector.
constructor(private injector: Injector) { }
//..
this.ratingModel = this.injector.get(RatingModel)
Related
I have following data as per the below image in the file named: applicationType.ts and I want to seed that data in the table name: "netabe_application_type" in my database.
My seed.module.ts file code:
import { Module } from '#nestjs/common';
import { AppSeeder } from './seed';
import { ApplicationTypeModule } from './models/applicationType/applicationType.module';
#Module({
imports: [ApplicationTypeModule],
providers: [AppSeeder],
exports: [AppSeeder],
})
export class DatabaseSeedModule {}
seed.ts file code:
import { Injectable } from '#nestjs/common';
import { ApplicationTypeService } from './models/applicationType/applicationType.service';
import { applicationTypes } from './models/applicationType/applicationType';
#Injectable()
export class AppSeeder {
constructor(
private readonly applicationTypeService: ApplicationTypeService
) {}
async seedApplicationTypes() {
for (const applicationType of applicationTypes) {
console.log('Did I got here?');
await this.applicationTypeService.create(applicationType);
}
}
}
package.json script file code: "seed:up": "ts-node -r tsconfig-paths/register ./src/seed.ts" When I run this command it successfully runs without any errors but I am not getting any logs from the seed.ts file.
I have also imported the DatabaseSeedModule module in the main app.module's imports array file but this somehow does not work.
so i just created this ionic app, and I put a http request method on it for test, the problem is win I build the app for android the http method doesn't work.
But it works fine win a build it for iOS,
This is my ionic info:
ionic (Ionic CLI) : 4.6.0 (/Users/us/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.5
#ionic/app-scripts : 3.2.2
Cordova:
cordova (Cordova CLI) : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic 5.3.1, cordova-plugin-
ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 6
other plugins)
System:
ios-sim : 8.0.1
NodeJS : v10.15.1 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61
my page.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '#angular/http';
import "rxjs/add/operator/map"
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
list_car:any;
constructor(public navCtrl: NavController, public http: Http) {
//check if the omra section exist or not
this.http.get("http://android.page.com/2omra_details.php")
.map(res
=> res.json().omra)
.subscribe(data => {
this.list_car = data;
console.log(this.list_car);
})
}
}
Any suggestions to what I may be doing wrong?
Your endpoint not working
Try with sample data API example
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/retry';
#Injectable()
export class ApiService {
url: string = 'https://api.chucknorris.io/jokes/random';
url2: string = 'https://api.spacexdata.com/v2/launches/latest';
constructor(private http: HttpClient) {}
getData(): Observable<ApiResponse> {
return this.http.get<ApiResponse>(this.url).retry(3);
}
getOtherData(): Observable<any> {
return this.http.get<any>(this.url2).retry(3);
}
}
export interface ApiResponse {
icon_url: string;
id: string;
url: string;
value: string;
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've written a provider to help track network connectivity using the Native Network plugin:
import { Injectable } from '#angular/core';
import { Network } from '#ionic-native/network';
import { Platform } from 'ionic-angular';
#Injectable()
export class Connectivity {
public online: boolean = false;
constructor(private network: Network) {
this.network.onDisconnect().subscribe(() => {
console.log('Network offline');
this.online = false;
});
this.network.onConnect().subscribe(() => {
this.online = true;
console.log('Network online');
});
});
}
}
I've installed the relevent plugins (package.json):
"cordova-plugin-network-information": "^2.0.1",
...
"#ionic-native/network": "^4.7.0",
And I've included my provider in my app.module.ts:
providers: [
Network,
StatusBar,
SplashScreen,
Connectivity,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Yet, when I run the app in the browser, neither of the observables fire. If I try print: console.log(this.network.type) in the provider constructor, it just prints null.
The answer here is that the native network plugin doesn't work in the browser. Even though it has "browser" listed as a supported platform:
It is referring to the Cordova Browser which is different to a web browser. I found this out after discussion on the Ionic Slack channel.
You need to instead write a Provider that:
Detects platform
If on a native device, use the native network plugin
If in a browser, use the browser API
For others with the same problem:
Here is some clarification on why you have two different APIs available
Here is an example of a provider that uses a variety of approaches for finding location (this isn't the same as my question, but is similar in the solution as it uses a browser API as well as the Ionic Native API)
In my application I use "cordova-plugin-network-information": "^ 2.0.1"
and "#ionic-native / network": "^ 4.6.0"
I can share the same service I use. this is currently working
'# angel / core' import {Injectable};
From the '# Ionic-native / network' resource {Network};
import { Injectable } from '#angular/core';
import { Network } from '#ionic-native/network';
#Injectable()
export class NetworkProvider {
constructor(private _network: Network) { }
isConnectInternet() {
return this._network.onConnect();
}
isDisconnect() {
return this._network.onDisconnect();
}
enter code here
connectionType() {
if (this._network.type == 'none' ) {
return false;
} else {
return true;
}
}
}
I am using this service into my project which is on following environment
cli packages:
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
this is my provider file, network.ts.
import { Functions } from './../functions';
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { Network } from '#ionic-native/network';
import { Events } from 'ionic-angular';
/*
Generated class for the NetworkProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
export enum ConnectionStatusEnum {
Online,
Offline
}
#Injectable()
export class NetworkProvider {
previousStatus;
constructor(public functions:Functions,
public network: Network,
public eventCtrl: Events) {
this.previousStatus = ConnectionStatusEnum.Online;
}
public initializeNetworkEvents(): void {
this.network.onDisconnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Online) {
this.eventCtrl.publish('network:offline');
}
this.previousStatus = ConnectionStatusEnum.Offline;
});
this.network.onConnect().subscribe(() => {
if (this.previousStatus === ConnectionStatusEnum.Offline) {
this.eventCtrl.publish('network:online');
}
this.previousStatus = ConnectionStatusEnum.Online;
});
}
make sure that you are running
ionic cordova run browser
not
ionic serve
I am trying to inject 2 services into generic classes using ReflectiveInjector as seen in this SO
The first time I call ReflectiveInjector on DebugService it works completely fine, however if I then replace this with CourseService, I recieve the following InvalidProviderError:
Uncaught InvalidProviderError_nativeError: Error: Invalid provider - only instances of Provider and Type are allowed, got: undefined
This is the generic class where I am trying to inject the services.
Media.ts
////////////////////////////////////////////////////////////////////////////////////////
import { ReflectiveInjector } from '#angular/core';
// other imports
////////////////////////////////////////////////////////////////////////////////////////
import { CourseService , DebugService } from 'app/services';
//other imports
////////////////////////////////////////////////////////////////////////////////////////
export class Media {
private sanitizer: DomSanitizer;
private courseService: CourseService;
private debug: DebugService;
constructor(_audio: File[], _images: File[], _videos: File[] ) {
// works fine
var injector = ReflectiveInjector.resolveAndCreate([DebugService]);
this.debug = injector.get(DebugService);
// throws InvalidProviderError
var injector2 = ReflectiveInjector.resolveAndCreate([CourseService]);
this.courseService = injector2.get(CourseService);
}
The 2 services are as follows:
debug.service.ts
////////////////////////////////////////////////////////////////////////////////////////
import { Injectable } from '#angular/core';
////////////////////////////////////////////////////////////////////////////////////////
import { environment } from '../../environments/environment';
////////////////////////////////////////////////////////////////////////////////////////
#Injectable()
export class DebugService {
constructor() {
/*stuff*/
}
}
course-service.service.ts
////////////////////////////////////////////////////////////////////////////////////////
import { Injectable, EventEmitter, Output } from '#angular/core';
import { Router } from '#angular/router';
import { Title, DomSanitizer, SafeResourceUrl, SafeUrl} from '#angular/platform-browser';
////////////////////////////////////////////////////////////////////////////////////////
import { DebugService } from 'app/services';
////////////////////////////////////////////////////////////////////////////////////////
#Injectable()
export class CourseService {
#Output() preloadData = new EventEmitter<any>();
// Constructor 1 - called on instantiation of class
constructor(
private sanitizer: DomSanitizer,
private router: Router,
private titleService: Title,
private debug: DebugService
) { /*stuff*/ }
These services were successfully being used in the Media class prior, when I was manually passing CourseService and DebugService as params to the Media constructor, however wanted to get away from this as it seemed very 'clunky' compared to this more streamlined approach.
i.e.
export class Media {
/*stuff*/
constructor(_audio: File[], _images: File[], _videos: File[], _courseService: CourseService, _debugService: DebugService ) { /*stuff*/ }
}
Media is currently defined within another class's constructor:
var preloader = new Preloader(
new Media(
// Audio Files
[
new File(0, './app/assets/video/Example1.mp3')
],
// Image Files
[
],
// Video Files
[
new File(0, './app/assets/video/Example1.mp4')
]
)
//...