I'm currently learning to implement angularfire2 in my project. Unfortunately I'm currently stuck. I set up my Angular-Project like described here
https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md
I also set up a database in firebase with a the rule set
{
"rules": {
".read": "true",
".write": "true"
}
}
But when I try to run the application in my console in the browser gives me the following error
ERROR Error: The Cloud Firestore API is not enabled for the project
Now I found a way to enable the API here
https://console.cloud.google.com/apis/library/firestore.googleapis.com/?project=projectname
leaving me now with the error
ERROR Error: Missing or insufficient permissions
My problem now is I can set up API keys (but also also got a different API-key from my firebase console?) and OAuths, but I have no idea how to implement those is my code. Just simply generating an API key and using that one in the environment.firebase config didn't work. Would be great if someone knew anything. I'll keep on trying and let you know if I get it to work as well.
To let others knows where it is in the firebase console:
Select your project then click on Database and change the dropdown from "Realtime Database" to "Cloud Firestore"
I have had the same problem, and I have fixed it with this:
Go to:
https://console.firebase.google.com/u/1/project/**ProjectID**/database/firestore/rules
and change the rules to:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
Thanks to Edric i was able to solve it. He was right. My error was, that I was trying to use AngularFirestore and not AngularFireDatabase and AngularFireDatabaseModule. After i imported theese too it worked.
If you're having the same difficulties as I had, basically your module needs to look like described here
No provider for AngularFireDatabase, AngularFireAuth
Only thing, that I had to change, is you don't add AngularFireDatabase and AngularFireDatabaseModule to imports, but to providers. So in the end your module will look like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
],
providers: [AngularFireDatabase, AngularFireDatabaseModule ],
bootstrap: [AppComponent]
})
export class AppModule { }
Thanks again and I hope this will help others too, that struggle with setting up the FireDatabase
Related
I'm delving into a React, Express and Typescript tutorial, to which I'm still pretty new to. Trying to better understand how setting up custom types works, and this is what I currently have.
In types.ts file:
import { Request, Response } from "express";
import { Redis } from "ioredis";
//import express from "express"; // adding this did not help
//import session from "express-session"; // adding this did not help
export type MyContext = {
req: Request; // & { session: Express.Session }; // this is my troublesome line
redis: Redis;
res: Response;
};
When trying to add
& { session: Express.Session }
I get the error:
any Namespace 'global.Express' has no exported member
'Session'.ts(2694)
Versions of devDepencies and also depencies have been compared so that they're the same. Trying the latest versions had no change.
devDependencies:
"#types/express": "^4.17.7",
"#types/express-session": "^1.17.0",
...
dependencies:
"express": "^4.17.1",
"express-session": "^1.17.1",
...
Things I've tried:
As comments show in the code, different import statements like express and/or session.
Changing strictNullChecks from true to false in package.json.
The latest versions of express, express-session, #types/express and #types/express-session.
Change type to interface.
Double checked similar questions before posting this (I had already looked here on SO and Google).
Comparing the tutorial's final code on GitHub vs my own code (they're the same as far as I can tell).
The error you are getting tells you that it's looking for a type in global.Express.Session. This is because you have no import called Express so it's trying to find it on the global scope. Of course, this does not exist!
This worked for me, assuming that the Session type was supposed to come from the express-session library:
import { Request, Response } from "express";
import { Redis } from "ioredis";
import session from "express-session";
export type MyContext = {
req: Request & { session: session.Session };
redis: Redis;
res: Response;
};
I believe the problem stemmed from different versions of a dependency used by express-session. I found the tutorial and this problem being discussed elsewhere (not on SO) but was able to make the changes below. req.session is available throughout my project now. In my use case, I wanted userId accessible via req.session.userId, so that's added (wasn't in original question).
import { Request, Response } from "express";
import { Session, SessionData } from "express-session";
import { Redis } from "ioredis";
export type MyContext = {
req: Request & {
session: Session & Partial<SessionData> & { userId: number };
};
redis: Redis;
res: Response;
};
I am creating an Ionic app. I have 3 providers - database provider, portfolio provider and user provider. All 3 are Injectable. I have created it this way because several other pages need to use their function calls (i.e. they should not share the same data, they all should create new instances)
Both the portfolio and user provider import the database provider, as the need to make the same database calls to retrieve data.
I have 1 page - ViewPortfolio. The ViewPortfolio page imports the user provider (to know who the user is) and portfolio provider (to get the users portfolio data). For some reason, these 2 providers seem to be sharing the same instance for database provider. This is how I use them:
PORTFOLIO PROVIDER
import { DatabaseProvider } from '../providers/database-provider';
#Injectable()
#Component({
providers: [DatabaseProvider]
})
export class PortfolioProvider {
public portfolio_list: any = new BehaviorSubject<Array<string>>([]);
constructor(private dbProvider: DatabaseProvider) {
this.dbProvider.enableDataListener(this.protfolio_path); // set path
this.dbProvider.db_listener.subscribe(value => { // subscribe to data in the path
// do stuff
});
}
}
The user portfolio is the same, the only difference is the path its listening to is different.
However, when I change data in the portfolio path, the subscribe call is also triggered in the user path (and vice versa). Thus, even though I added DatabaseProvider in the components providers, its not creating unique instances. Why is this?
I figured it might be because I am importing them both on the same page but I am not convinced that's why it is not working. How do I make the 2 providers use unique instances on databaseprovider, while calling them both on the same page?
This is what my app.moudle.ts file looks like (please note that DatabaseProvider is not included in my app.module.ts file)
// ... more imports
import { PortfolioProvider } from '../providers/portfolio-provider';
import { UserProvider } from '../providers/user-provider';
#NgModule({
declarations: [
MyApp,
// ... more
],
imports: [
// ... more
IonicModule.forRoot(MyApp, {
backButtonText: '',
tabsPlacement: 'bottom'
}),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
// ... more
],
providers: [
// ... more
PortfolioProvider,
UserProvider
]
})
export class AppModule {}
Thanks,
Did you remove the provider from app.module.ts (root AppModule)?
From the Angular Documentation:
Scenario: service isolation
While you could provide VillainsService in the root AppModule (that's where you'll find the HeroesService), that would make the VillainsService available everywhere in the application, including the Hero workflows.
If you generated the provider using ionic-cli, it'll automatically add it to the root AppModule.
I'm working to get angular way work and use this code https://l-lin.github.io/angular-datatables/#/basic/angular-way
- node version:v6.10.3
- npm version:v6.10.3
- angular version:4.3.2
- jquery version:3.2.1
- datatables version:1.10.15
- angular-datatables version:4.2.0
- angular-cli version:1.2.6
I have made this steps to fix Unexpected value "DataTablesModule" imported by the module "AppModule". Please add a #NgModule Annotation.
1-in tsconfig.json add
"baseUrl": ".",
"paths": {
"#angular/*": [
"node_modules/#angular/*"
]
2-in webpack.comon.js add
plugins: [
new TsConfigPathsPlugin({
configFileName: helpers.root('tsconfig.json'),
compiler: "typescript",
})
]
but get this error
Can't bind to 'dtOptions' since it isn't a known property of 'table'.
Can anyone help me please to fix this isuue?
If you have TablesComponent, you should use this line in your tables.module.ts file:
import { DataTablesModule } from 'angular-datatables';
And add DataTablesModule to #NgModule imports.
I had error when I add these lines in appComponent, but when I import in my special module, the problem was solved.
Step 1. Update ".angular-cli.json" file Styles and scripts properties as below.
{
........
"apps": [
{
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
//for bootstrap4 theme
"../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
//for Datatable
"../node_modules/datatables.net/js/jquery.dataTables.js",
//for bootstrap4
"../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js"
]
...
}
],
.....
}
Step 2. import DataTable Module in our Angular Application Module(Where you need.)
import { DataTablesModule } from 'angular-datatables';
Below is the example of html table which is using DataTable -
<table id='table' datatable [dtOptions]="dtOptions" class="table table-striped table-bordered" cellspacing="0" width="100%">
</table>
import { DataTablesModule } from 'angular-datatables';
that's right (Ganj Khani) import the DataTablesModule into app.module.ts file and put it in
#NgModule({ imports: [ CommonModule, DataTablesModule, MyRoutingModule ]
It will work as expected and make sure you have all configured properly for the dtOptions in your respective .ts file.
For me it was quite simple fix. I forgot to add the datatable attribute to the table element. You must add that for the DataTableModule to pick it up.
Example:
<table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions"></table>
Upgrade Your Project with this command : >ng update #angular/cli #angular/core --allow-dirty --force
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { CustomerComponent } from './customer/customer.component';
import { DataTablesModule } from "angular-datatables";
import { CommonModule } from '#angular/common';
const routes: Routes = [
{ path: 'customer', component: CustomerComponent}
];
#NgModule({
declarations: [
CustomerComponent ////without class declarations dataTable will not work....
],
imports: [RouterModule.forRoot(routes), DataTablesModule, CommonModule], //imports DataTablesModule here
exports: [RouterModule]
})
export class AppRoutingModule { }
Depending on how you've structured your angular app (if you're have shared modules), you may need to import it using forRoot so it's a treated as a singleton service: DataTablesModule.forRoot(). This did the trick for me.
I am getting a webpack TypeError when I am trying to simplify an import. The following code works without any issues. Here I am importing a React Higher-Order-Component (HOC) called smartForm from core/components/form/index.js.
core/components/form/index.js (does a named export of smartForm)
export smartForm from './smart-form';
login-form.jsx (imports and uses smartForm)
import { smartForm } from 'core/components/form';
class LoginForm extends React.Component {
...
}
export default smartForm(LoginForm);
However, I want to simplify the import to just import { smartForm } from 'core'. So I re-exported smart-form in core/index.js and imported it from core. See the code below:
core/index.js (does a named export of smartForm)
export { smartForm } from './components/form';
// export smartForm from './components/form'; <--- Also tried this
login-form.jsx (imports and uses smartForm)
import { smartForm } from 'core';
class LoginForm extends React.Component {
...
}
export default smartForm(LoginForm); // <--- Runtime exception here
This code compiles without any issues, but I am getting the following runtime exception at the line export default smartForm(LoginForm);:
login-form.jsx:83 Uncaught TypeError: webpack_require.i(...) is not a function(…)
What am I missing?
P.S. Here are the Bable and plugin versions that I am using:
"babel-core": "^6.18.2",
"babel-preset-es2015-webpack": "^6.4.3",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
tl;dr
For the questioner: Add this to your webpack.config.js:
resolve: {
alias: {
core: path.join(__dirname, 'core'),
},
},
For the general audience: Make sure the thing you try to import is indeed exists in that package.
Explanation
Questioner's problem: importing own code like npm modules
You try to import your module's exports in the same fashion how you import something from an npm package from the node_modules folder: import { something } from 'packagename';. The problem with this is that doesn't work out of the box. The Node.js docs give the answer on why:
Without a leading '/', './', or '../' to indicate a file, the module must either be a core module or is loaded from a node_modules folder.
So you either has to do what Waldo Jeffers and Spain Train suggested and write import { smartForm } from './core', or you can configure webpack so it can resolve your import path via its aliases which are created to solve this exact problem.
Debugging the error message in general
This error can arise if you try to import something from an existing npm package (in node_modules) but the imported thing doesn't exist in the exports. In this case, make sure there were no typos and that the given thing you try to import is indeed in that package. Nowadays it is trendy to break libraries into multiple npm packages, you might be trying to import from a wrong package.
So if you get something like this:
TypeError: __webpack_require__.i(...) is not a function
at /home/user/code/test/index.js:165080:81
at Layer.handle [as handle_request] (/home/user/code/test/index.js:49645:5)
To get more information on what import you should check, just open the output file generated by webpack and go to the line marked by the topmost line in the error stack (165080 in this case). You should see something like: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_9_react_router_dom__["match"]). This tells us that there is no match export (or there is but it isn't a function) in react-router-dom, so we need to check our stuff around that import.
Since core is a folder of your app and not an npm module, Webpack can not understand which file you want to load. You must use a correct path pointing to a file. You have to replace import { smartForm } from 'core'; by import { smartForm } from './core/index.js
This error will occur by many reasons. Once I encountered this error when I add js in file-loader then when I removed it start to work correctly.
{
test: /\.(ttf|eot|svg|gif|jpg|png|js)(\?[\s\S]+)?$/,
use: 'file-loader'
},
When I remove |js it works
{
test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
},
Just remove these 2 line from config
const context = resolve.alias.context('./', true, /\.spec\.ts$/); context.keys().map(context);
I am new to Angular, background is server side Java, .Net...
So, I completed the Tour of Heroes and I have created simple hard coded multi-page application. Now I need to go the next step and call the server to retrieve data via a rest/JSON call. Based on the AngularJS example:
https://angular.io/docs/ts/latest/guide/server-communication.html
and a few other blogs such as:
http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html
I have a pretty good understanding of how it is supposed to work. However, I see two errors now:
In the browser: Cannot resolve all parameters for 'AuthService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AuthService' is decorated with Injectable.
and in NPM:
app/auth.service.ts(9,19): error TS2304: Cannot find name 'Http'.
I have no clue how to chase the dependencies down. packages.json? typings.json, tsconfig.json... Or how they all work; and I cannot find any documentation; any suggestions?
auth.service:
import {Injectable} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
#Injectable()
export class AuthService {
items:Array<any>;
constructor(http:Http) {
}
}
main.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS} from 'angular2/http';
import { AuthService } from './auth.service';
bootstrap(AppComponent, [HTTP_PROVIDERS, AuthService]);
I have not consumed the Auth.Service in an component yet.
Tim
I think the problem is you are not pulling in Http, just HTTP_PROVIDERS, in your auth.service try this
import {Http} from 'angular2/http'