I'm working on a project on ionic 3 angular 4. I have to connect to a database and do other things...
So I have a page (.ts .html .scss .module.ts), a provider where I use sql. So my problem is this, I have this error :
core.es5.js:1084
ERROR Error: Uncaught (in promise): Error: No provider for SQLiteObject!
Error: No provider for SQLiteObject!
So in module.ts I added in provider flag i put SQLiteObject. But now I get this new error :
compiler.es5.js:1540 Uncaught Error: Can't resolve all parameters for SQLiteObject: (?).
Also if I put SQLite it wants always the SQLiteObject provider.Anyway I never use SQLite just SQLiteObject
import { SQLiteObject } from '#ionic-native/sqlite';
I google and I found that SQLiteObject is not a provider but just an interface.
So? Any idea? I can put code but is long, if you have some idea please comment.
You need to add its class in providers in your app.module.ts file as:
import { SQLiteObject } from '#ionic-native/sqlite';
#NgModule({
declarations: [
MyApp
],
imports: [
//
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, SQLiteObject]
})
export class AppModule {}
You're right SQLiteObject isn't a Provider but you're trying to import it as one. It is a class Object used by the SQLite Provider so you can save the object from your constructor and then use it as this.db from there. FYI: remove the import { SQLiteObject } statement.
private db: SQLiteObject;
constructor(private sqlite: SQLite)
{
this.sqlite.create({
name: 'data.db',
location: 'default'
})
.then((db: SQLiteObject) => {
this.db = db; //set the object to your own var
db.executeSql("CREATE TABLE IF NOT EXISTS ...", {});
});
}
Related
I'm trying to create a custom resource in AWS Amplify, using AWS CDK. And, I'm trying to use an existing lambda function as a provider event handler.
When I do amplify push the resource creation fails with no useful information. What am I doing wrong here? How can I troubleshoot this?
import * as cdk from '#aws-cdk/core';
import * as AmplifyHelpers from '#aws-amplify/cli-extensibility-helper';
import * as cr from "#aws-cdk/custom-resources";
import * as logs from "#aws-cdk/aws-logs";
import * as lambda from '#aws-cdk/aws-lambda';
import { AmplifyDependentResourcesAttributes } from "../../types/amplify-dependent-resources-ref"
export class cdkStack extends cdk.Stack {
constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps, amplifyResourceProps?: AmplifyHelpers.AmplifyResourceProps) {
super(scope, id, props);
/* Do not remove - Amplify CLI automatically injects the current deployment environment in this input parameter */
new cdk.CfnParameter(this, 'env', {
type: 'String',
description: 'Current Amplify CLI env name',
});
const dependencies: AmplifyDependentResourcesAttributes = AmplifyHelpers.addResourceDependency(this,
amplifyResourceProps.category,
amplifyResourceProps.resourceName,
[{
category: "function",
resourceName: "myFunction"
}]
);
const myFunctionArn = cdk.Fn.ref(dependencies.function.myFunction.Arn);
const importedLambda = lambda.Function.fromFunctionArn(this, "importedLambda", myFunctionArn);
const provider = new cr.Provider(this, "MyCustomResourceProvider", {
onEventHandler: importedLambda,
logRetention: logs.RetentionDays.ONE_DAY,
})
new cdk.CustomResource(this, "MyCustomResource", {
serviceToken: provider.serviceToken
})
}
}
Here's the error I get:
CREATE_FAILED custommyCustomResourceXXXX AWS::CloudFormation::Stack Parameters: [AssetParametersXXXX, .....] must have values.
I got a response from AWS support team. It looks like the AssetParameters error is caused by the fact that Amplify CLI currently doesn't support a high level construct of Custom Resource Provider inside the custom resource category in Amplify CLI. The resource should be created this way:
import * as cdk from '#aws-cdk/core';
import * as AmplifyHelpers from '#aws-amplify/cli-extensibility-helper';
import * as lambda from '#aws-cdk/aws-lambda';
import { AmplifyDependentResourcesAttributes } from "../../types/amplify-dependent-resources-ref"
export class cdkStack extends cdk.Stack {
constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps, amplifyResourceProps?: AmplifyHelpers.AmplifyResourceProps) {
super(scope, id, props);
/* Do not remove - Amplify CLI automatically injects the current deployment environment in this input parameter */
new cdk.CfnParameter(this, 'env', {
type: 'String',
description: 'Current Amplify CLI env name',
});
const dependencies: AmplifyDependentResourcesAttributes = AmplifyHelpers.addResourceDependency(this,
amplifyResourceProps.category,
amplifyResourceProps.resourceName,
[{
category: "function",
resourceName: "myFunction"
}]
);
const myFunctionArn = cdk.Fn.ref(dependencies.function.myFunction.Arn);
const importedLambda = lambda.Function.fromFunctionArn(this, "importedLambda", myFunctionArn);
new cdk.CustomResource(this, "MyCustomResource", {
serviceToken: importedLambda.functionArn
})
}
}
I am very new to firebase firestore.
And this is my first project with firestore.
I installed angular fire with this command
npm install firebase #angular/fire --save
and now importing the angularfiremodule like this
import { AngularFireModule } from '#angular/fire';
and angularfirestoremodule like this
import { AngularFirestoreModule } from '#angular/fire/firestore';
But this is giving me error
Cannot find module '#angular/fire'.ts(2307)
Any idea what might be the error?
I tried google searching but since I am new to firebase, everything seems very mixed up to me.
Also, I'm using ionic version 4, Angular version 8.1.3 and node version 10.16.3 if that makes any difference.
Angularfire2 was working fine previously, but since it's deprecated, I want to move to angular/fire.
I solved the problem by using below import statement, in app.module.ts
import { AngularFirestoreModule } from '#angular/fire/compat/firestore/';
My problem solved by using import like this which i have mentioned below with firebase version 9 and firestore 7 and angular 12.
As per the offical document
Documentation
Got reference from this link:
https://dev.to/jdgamble555/angular-12-with-firebase-9-49a0
For official reference check this out:
https://firebase.google.com/docs/firestore/quickstart
Install firestore by using
ng add #angular/fire
Install firebase by using
npm install firebase
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideFirebaseApp, initializeApp } from '#angular/fire/app';
import { getAuth, provideAuth } from '#angular/fire/auth';
import { getFirestore, provideFirestore } from '#angular/fire/firestore';
import { getStorage, provideStorage } from '#angular/fire/storage';
import { getAnalytics, provideAnalytics } from '#angular/fire/analytics';
import { environment } from '../environments/environment';
#NgModule({
declarations: [
AppComponent,
DashboardComponent,
ForgotPasswordComponent,
SignInComponent,
SignUpComponent,
VerifyEmailComponent
],
imports: [
provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
provideFirestore(() => getFirestore()),
provideAuth(() => getAuth()),
provideStorage(() => getStorage()),
provideAnalytics(() => getAnalytics()),
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
There's some version mismatch issue here.
Here's what you might want to do in order to make this work.
DISCLAIMER: I'll be using StackBlitz for Demo Purposes.
Steps to follow:
Navigate to the StackBlitz Template Link mentioned in the Quick Links section of #angular/fire GitHub README.
Try importing AngularFirestoreModule in the AppModule and add it to the imports array.
import { AngularFirestoreModule } from '#angular/fire/firestore';
Go to your AppComponent and import AngularFirestore and inject it as a dependency:
import { Component } from '#angular/core';
import { Observable } from 'rxjs';
import { AngularFirestore } from '#angular/fire/firestore';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
items: Observable<any[]>;
constructor(db: AngularFirestore) {
this.items = db.collection('items').valueChanges();
}
}
You'll get an error saying:
ERROR Error: app.firestore is not a function
You would like to do a Google search finding the reason and a probable fix for the issue. You'll probably end up on this GitHub thread which would suggest that you reinstall the dependencies.
Since we are on StackBlitz, you'll just press the "Update all deps to latest" button in the DEPENDENCIES section. As soon as you do that, you'll start getting an error saying:
Can't find package:core-js
It's apparently a known issue for StackBlitz. In order to fix it, you'll do a Google search again and probably end up on this GitHub thread.
As suggested in the thread, you'll install core-js#2 by adding it to the DEPENDENCIES Field and pressing enter. This will install Version 2.6.11 of core-js.
Now you'll get an error saying:
Can't find package:#firebase/app
To fix it, you'll just click on the blue button that says "INSTALL PACKAGE #firebase/app"
Finally, you'll get an error saying:
ERROR Error: "projectId" not provided in firebase.initializeApp.
To fix this, just paste in your firebase config.
And hopefully, after following all these steps, you should be able to see the project updated to #angular/fire.
Here's a Working Demo till Step 9 to save some of your time.
Hope this helps :)
In app.module.ts add this
import { AngularFirestoreModule } from '#angular/fire/firestore';
In your file import AngularFireStore as
import { AngularFirestore, AngularFirestoreCollection } from '#angular/fire/compat/firestore';
I'm getting the following error message with my Angular 12 app: NullInjectorError: No provider for Firestore!
Firestore is initialized both the old and the new way in my lazy loaded admin.module.ts
import { connectFirestoreEmulator, getFirestore, provideFirestore } from "#angular/fire/firestore";
import { AngularFirestoreModule } from "#angular/fire/compat/firestore";
...
imports: [
AngularFirestoreModule,
provideFirestore(() => {
const firestore = getFirestore();
if (!environment.production) {
connectFirestoreEmulator(firestore, "localhost", 8080);
}
return firestore;
}),
]
Also setting up Firebase both ways in my app.module.ts
import { provideFirebaseApp, initializeApp } from "#angular/fire/app";
import { AngularFireModule } from "#angular/fire/compat";
...
imports: [
AngularFireModule.initializeApp(environment.firebase),
provideFirebaseApp(() => initializeApp(environment.firebase)),
]
And finally, using Firestore in one of my services, (let's call it foo.service.ts) that is being provided by my admin.module.ts
import { Firestore } from "#angular/fire/firestore";
...
export class ScanRepositoryService {
constructor(private firestore: Firestore) {}
}
From what I can tell, I'm following the AngularFire documentation pretty strictly, still, getting this error message about my service can't resolve Firestore. Re-installing the whole node_modules and re-compiling the app with both dev and production flags did not help. Any other idea how to solve this issue?
Solved by removing all the "old" non-modular usage of Firestore, leaving only the version 9+ parts.
I'm developing an Ionic 2 mobile app and want to use ngx-translate features.
Following the tutorial, I'm importing necessary files in app module like this:
import { TranslateModule, TranslateLoader } from '#ngx-translate/core';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
import { HttpModule, Http } from '#angular/http';
...
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
which gives the error:
Argument of type 'Http' is not assignable to parameter of type 'Http'.
Property 'handler' is missing in type 'Http'
I think there is a mismatch of packages expected by ngx-translate but i cannot figure out what and how. My #angular/http version is 4.3.2
Has anybody an idea what to do?
the problem is due to a conflict version, maybe you installed a "^1.0.2" version of "#ngx-translate/http-loader" althought your function is available for a previous version. don't worry! you have just to use HttpClient instead of Http ..
don't forget to change the value of 'deps' constant and import the HttpClientModule in your module (or in your app.module)
Try using HttpClient
import {HttpClientModule, HttpClient} from '#angular/common/http';
import {TranslateModule, TranslateLoader} from '#ngx-translate/core';
import {TranslateHttpLoader} from '#ngx-translate/http-loader';
import {AppComponent} from "./app.component";
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm using Ionic 3 SQLite native plugin from Here(Ionicframework.com), and Here's my constructor code :
constructor(public navCtrl: NavController,
public menu: MenuController,
translate: TranslateService,
private tts: TextToSpeech,
private sqlite: SQLite) {
this.sqlite.create({
name: 'data.db',
location: 'default'
}).then((db: SQLiteObject) => {
db.executeSql('create table IF NOT EXISTS `localflags`(`flag1` VARCHAR(10),`flag2` VARCHAR(10),`flag3` VARCHAR(10), `flag4` VARCHAR(10));', {})
.then(() => console.log('Table created!!!'))
.catch(e => console.log(e));
}).catch(e => console.log(e));
}
So, when I run it on device using "ionic cordova run android -lc" it give me this error,
Can't resolve all parameters for SQLiteObject: (?)
This code is from the ionic native documentation. This is very basic code, and I'm new to this, so I can't figure out what's wrong with this.
Any help will be appreciated. And if someone can point me to the Ionic 3 SQLite tutorials , that will be great. Thanks in Advance.
Actually, the case was, I had Done import { SQLite, SQLiteObject } from '#ionic-native/sqlite'; this in my ts file, So I thought both SQLite and SQLiteObject are needed to imported in app.module.ts file, but after reading this answer, I removed SQLiteObject from app.module.ts file and also removed injection of SQLite from the constructor and it worked.
Hope this helps someone.
I think you have to add "/ngx" on your import line
import { SQLite, SQLiteObject } from '#ionic-native/sqlite/ngx';
Besides, you don't have to add SQLiteObject in the providers array of app.module.ts file