I use import folder on my Meteor App, but I got error with following config :
/imports/startup/client/routes.js
import { FlowRouter } from 'meteor/kadira:flow-router';
import { BlazeLayout } from 'meteor/kadira:blaze-layout';
import '../../../ui/layout/layout.js';
import '../../../ui/pages/home/home.js';
FlowRouter.route('/', {
action: function() {
console.log("Yeah! We are on the post:");
}
});
and my /client/main.js
import '/imports/startup/client';
And I've this error :
Error: Cannot find module 'routes.js'
Do you have any idea why routes.js isn't loaded ?
Thank you !
You need to import the routes file. Your current import resolves to a folder so it will import the index file in the folder if there is one.
Related
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';
In meteor project, do I need to import {Meteor},{Mongo}, and{check} in this example? Why?
collections.js
// import {Mongo} from 'meteor/mongo' // ---- i have to import this?
Bookmarks = new Mongo.Collection('bookmarks')
methods.js
// import {check} from 'meteor/check' // ---- i have to import this?
import {Bookmarks} from "/imports/schema/bookmarks/index"
Meteor.methods({
'bookmark.add'({name, url}){
check(name,String) // ---------------
check(url,String)
const bookmarkId = Bookmarks.insert({name,url})
Meteor.isServer && console.log(`Id ${bookmarkId} inserted`)
},
'bookmark.remove'(_id){
check(_id,String)
const bookmark = Bookmarks.findOne({_id})
if (!bookmark){
Meteor.isServer && console.log('no such a bookmark!')
} else {
const removeBookmarkId = Bookmarks.remove({_id})
Meteor.isServer && console.log(`remove result ${removeBookmarkId?'success':'error'}`)
}
}
})
The short answer is yes. Meteor makes heavy use of the module system for imports and exports. You can read more about how Meteor modules works, and the reasons motivating the move to Meteor modules here.
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 have a collection named LibraryItems which is available on both client and server side.
api/libraryitems/libraryitems.js
import { Mongo } from 'meteor/mongo';
const LibraryItems = new Mongo.Collection('libraryitems');
export default LibraryItems;
Instead of an if (Meteor.isServer) {..} publication in this same file, I would like to have a server folder with the specific publications:
api/libraryitems/server/publications.js
import LibraryItems from '../libraryitems';
import { Meteor } from 'meteor/meteor';
Meteor.publish('LibraryItems.pub.all', function () {
return LibraryItems.find({});
});
But somehow, against my expectations, this publication is not available...
update
This is my subscription code (meteor+reactjs):
./imports/ui/Library.js
import LibraryItems from '../api/libraryitems/libraryitems';
import { createContainer } from 'meteor/react-meteor-data';
...
export default createContainer(() => {
Meteor.subscribe('LibraryItems.pub.all');
var libraryitems = LibraryItems.find().fetch();
return {
libraryitems: libraryitems
}
}, Library);
You are exporting LibraryItems as a default export, that means when you import it you don't need curly brackets around it.
Change your import to:
import LibraryItems from '../libraryitems';
Also, clean up the publication code slightly:
return LibraryItems.find({});
EDIT
Now that you have posted your subscription code as requested, I see that you are subscribing to the publication with a different name.
Change to:
Meteor.subscribe('LibraryItems.all');
Hope that helps
I forgot to register the publications in mains.js:
import '../imports/api/libraryitems/server/publications';
I am trying to get access to objects using import, but am struggling with the logic:
schemas.js:
import { SimpleSchema } from 'meteor/aldeed:simple-schema';
export default UsersExtraSchema = new SimpleSchema({
...
}
seed.js:
import '/imports/startup/server/schemas.js';
export default class SeedDB {
loadBaseData() {
....
UsersExtraSchema.validate(attr);
...
}
}
I am getting the error:
TypeError: Object [object Object] has no method 'validate'
at SeedDB.loadBaseData (imports/startup/server/seed.js:19:26)
at server/main.js:11:14
at /tidee/app/tidee-meteor/.meteor/local/build/programs/server/boot.js:290:5
Exited with code: 8
Your application is crashing. Waiting for file change.
Why do not you import like this?
import UsersExtraSchema from '/imports/startup/server/schemas.js';