r-park / todo-angular-firebase Goto Github PK
View Code? Open in Web Editor NEWTodo app with Angular CLI • AngularFire2 • Firebase • OAuth • SW-Precache
Home Page: https://ng2-todo-app.firebaseapp.com
License: MIT License
Todo app with Angular CLI • AngularFire2 • Firebase • OAuth • SW-Precache
Home Page: https://ng2-todo-app.firebaseapp.com
License: MIT License
Before:
import { Component, NgFor, View } from 'angular2/angular2'
After:
import { NgFor } from 'angular2/common'
import { Component, View } from 'angular2/core'
How to add external javascript libraries to this project?
For say, If I want to add bootstrap? For any javascript plugin?
Life without javascript plugins is like living in 1730.
Currently there is only one scss loader profile in webpack config, used for loading global styles. This means that when loading component-specific styles we need to specify the loader in the module request:
const styles = require('!raw!autoprefixer!sass!./projects.scss');
Adding a component-specific loader profile will allow more concise syntax:
const styles = require('./projects.scss');
git fetch --all && git checkout chore/update-angular2-final-release
npm run build
webpack outputs warnings:
WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
45:15 Critical dependency: the request of a dependency is an expression
WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
57:15 Critical dependency: the request of a dependency is an expression
UNTESTED
webpack.config.js
module.exports = {
plugins: [
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
root('./src') // location of your src
)
]
}
function root(__path) {
return path.join(__dirname, __path);
}
I'm trying to write specs for auth-service.spec.ts to try and get familar for writing specs for services in angular2, and also as a way to get familar with angularfire2. So far I have:
import {
expect,
it,
describe,
beforeEach,
beforeEachProviders,
inject
} from '@angular/core/testing';
import {
AuthProviders,
FirebaseAuth,
FirebaseAuthState
} from 'angularfire2';
import { AuthService } from './auth-service';
describe('AuthService', () => {
let authService;
beforeEachProviders(() => [
AuthProviders,
FirebaseAuth,
FirebaseAuthState,
AuthService
]);
beforeEach(inject([AuthService], (a) => {
authService = a;
}));
However, I get the following error when I run npm test:
ReferenceError: FirebaseAuthState is not defined
at webpack:///src/core/auth/auth-service.spec.ts:24:4 <- karma.entry.js:56366:10
at Object. (webpack:////@angular/core/testing/testing.js:121:36 <- karma.entry.js:41231:52)/@angular/core/src/facade/exceptions.js:27:0 <- karma.entry.js:10253:24)
at ContextKarma.loaded (http://localhost:9876/context.js:151:12)
Error: No provider for AuthService!
Error: DI Exception
at NoProviderError.BaseException [as constructor](webpack:///
at NoProviderError.AbstractProviderError [as constructor](webpack:////@angular/core/src/di/reflective_exceptions.js:43:0 <- karma.entry.js:11793:17)/@angular/core/src/di/reflective_exceptions.js:80:0 <- karma.entry.js:11830:17)
at new NoProviderError (webpack:///
at ReflectiveInjector_.throwOrNull (webpack:///~/@angular/core/src/di/reflective_injector.js:786:0 <- karma.entry.js:11693:20)
at ReflectiveInjector.getByKeyDefault (webpack:///~/@angular/core/src/di/reflective_injector.js:814:0 <- karma.entry.js:11721:26)
at ReflectiveInjector.getByKey (webpack:///~/@angular/core/src/di/reflective_injector.js:777:0 <- karma.entry.js:11684:26)
at ReflectiveInjector.get (webpack:////@angular/core/src/di/reflective_injector.js:586:0 <- karma.entry.js:11493:22)/@angular/core/testing/test_injector.js:55:46 <- karma.entry.js:40942:72
at webpack:///
at Array.map (native)
at TestInjector.execute (webpack:////@angular/core/testing/test_injector.js:55:0 <- karma.entry.js:40942:30)/@angular/core/testing/test_injector.js:149:28 <- karma.entry.js:41036:56)
at Object. (webpack:///
at ContextKarma.loaded (http://localhost:9876/context.js:151:12)
I've loaded the FirebaseAuthState provider using beforeEachProviders, so I don't know why I'm getting this error.
Hey,
First of all I wanted to thank you for writing a great starter for angularfire2 with webpack.
It is perfect and I am using it to build my website.
The only problem I faced was the use of angular-universal. They too have a starter but I am using this because it doesn't have Firebase integrated.
Could you please tell me how to integrate the angular-universal with this. I have gone through all the docs but could not find a way out.
Cheers,
Rahul
Not an issue in itself, but what would be the right direction to take if I want to make a Todo that 2 or more users share? And than start adding info on who changed what, on the same page (/tasks)?
Sorry if it is too broad of a question, looking to get some idea before I break the whole thing for myself and have to do yet another reinstall
I'm trying to create a generic equivalent of the task store & service. To do this I need to provide a dynamic firebase ref url to the constructor of each but I'm struggling to figure out how to modify the provider to accept a custom url. How would you go about this or am I barking up the wrong tree?
I'm trying to implement the AuthRouteHelper class in my app but I'm having a problem with the requireUnauth
and requireAuth
static functions. They are not calling the AuthRouteHelper
constructor on the line const { auth, router } = AuthRouteHelper;
so the next line is throwing
TypeError: undefined is not an object (evaluating 'auth.authenticated')
Any ideas what's going on here? Note: the class code is currently identical to yours.
Thank you for the great example. Would you set up coveralls for this project?
Hi,
i followed the steps after checking out the code
when i run gulp as mentioned in README
./node_modules/.bin/gulp
i get this error
ERROR in ./src/main.ts
Module build failed: A file specified in tsconfig.json could not be found: /Users/z001mss/todo-angular2-firebase/typings/browser.d.ts
See: angular/angularfire#140
Should be resolved in alpha.17
For production builds, css-loader removes desired vendor prefixes during minification. Disable this behavior with inline param.
Before:
{test: /\.scss$/, loader: 'css!postcss!sass'}
After:
{test: /\.scss$/, loader: 'css?-autoprefixer!postcss!sass'}
It might be good to include the security file in the configuration for login so that people forking this repo have an example of how to do that. Do you have firebase security rules written for this app that could be included in this project?
https://www.firebase.com/docs/security/guide/user-security.html
That way when someone forks this repo they won't need to rewrite all of the security rules.
(This is an amazing repo, it's one of the only angular 2 + firebase repos I can find that's still working, so thank you so much for creating it.)
I see that CircleCI uses node 6.4
, and package.json engine is >=5.11
.
How do you feel about locking the node engine to >= 6.4.0
in package.json and .circle.yml?
We recently switched to 6.5.0
at my work and haven't had any issues.
I'm trying to get my head around RxJS and I'm wondering about your use of ReplaySubject in the TaskStore. According to the docs, ReplaySubject "emits to any observer all of the items that were emitted by the source Observable(s), regardless of when the observer subscribes". To me this doesn't make sense as it seems we are only interested in the last item emitted (i.e. the most recent value of the FirebaseSnapshot). Maybe I'm missing something here (angular and rxjs are both very new to me!) but I'd like to hear the reasoning behind your choice of ReplaySubject vs BehaviorSubject here.
what the heck does this mean?
Error: Cannot run login in non-interactive mode. See login:ci to generate a token for use in non-interactive environments.
Hi, tried to build the todo, but it failed, can you help ? thanks.
[email protected] postbuild C:\MYAPP\ANGULAR2\todo-angular2-firebas
e-master
./bin/postbuild.copy-assets.sh
'.' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\
node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.9.2
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postbuild: ./bin/postbuild.copy-assets.sh
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postbuild script './bin/post
build.copy-assets.sh'.
I hope posting questions here is an Ok thing to do. I am trying to learn and using this as an example. :)
Let's say a user refreshes the /tasks route. How is it ensured that the authState in the AuthService is set before the TaskService's constructor tries to use the authState.id when building the database path string?
I am building a similar app and when I refresh the constructor for my TaskService runs, tries to build a database path with the authService.id which at the time is null. Then some time passes and the firebaseAuth subscribe function in the AuthService fires and updates the authState. I would like to make sure that TaskServies doesn' try and build the database path string before the authState is set in the AuthService. I can't figure out how this app is accomplishing this; can anyone help?
I may not have explained this well so if more detail or clarification is needed I'll be happy to try again.
Hi
This is a great example I have learned a lot from it. What would be the best way to implement a mark all completed featured.
Thanks
Use the new AngularFire2 observable query api instead of filtering via pipe.
I have 2 questions for my learning. In your unauth-guard.ts
!authState
return primitive boolean but when console.log(!authState)
shows as objectThanks.
canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
let y = this.getAuthState();
console.log('buddy' ,y);
return this.af.auth
.take(1)
.map(authState => !authState)
.do(unauthenticated => {
console.log(unauthenticated);
/*if (!unauthenticated) {
this.router.navigate(['/dashboard']);
} */
});
}
getAuthState() : Observable<any> {
return this.af.auth
.take(1)
.map(authState => !authState)
.do(x => {console.log('there', x)});
}
I was obtaining the following error after npm start
ERROR in /Users/xyz/code/front-end/angular2/todo-angular2-firebase/node_modules/@types/jasmine/index.d.ts
(37,52): error TS1005: '=' expected.
ERROR in /Users/xyz/code/front-end/angular2/todo-angular2-firebase/node_modules/@types/jasmine/index.d.ts
(37,38): error TS2371: A parameter initializer is only allowed in a function or constructor implementation.
ERROR in /Users/xyz/code/front-end/angular2/todo-angular2-firebase/node_modules/@types/jasmine/index.d.ts
(37,46): error TS2304: Cannot find name 'keyof'.
I fixed by modifying line 45 of package.json to the following
"@types/jasmine": "2.5.36"
This may address incompatibility with some typescript versions.
EDIT: incompatibility issue discussed at http://stackoverflow.com/questions/42182340/angular-2-build-error-expected-in-index-d-ts
AuthRouteHelper.injector();
returns undefined
hence the error mentioned in the title. Any idea why this is failing? I'm using the same code in another app and it works fine, although I'm using angular-cli for this one.
The calling code is @CanActivate(() => AuthRouteHelper.requireAuth())
Nice example code, thanks. I've noticed something though while going over your code:
After auth.signOut, window.location.replace('/') gets called.
I've changed my authentication to be similar to this example, in a service, and without using window.location.replace, page stays in signed out route.
I don't get it, canActivate code already checks if authentication state is valid or not, if not it redirects to root route, but doesn't get called. Why?
Read the code. Impressive. Have a few questions hope you can answer and I can learn from you.
private af: AngularFire
? constructor(public auth$: FirebaseAuth, private af: AngularFire) {
auth$.subscribe((state: FirebaseAuthState) => {
this.authState = state;
});
/*af.auth.subscribe((state: FirebaseAuthState) => {
this.authState= state;
})*/
}
The site seems to not load on most of ios.
https://www.browserstack.com/screenshots/a2f5e7b51c260f874b3180336a31b244ccf2d775#
It says: "npm run build Lint, test, and build the application to ./target"
but I don't see any files under ./target.
By the way, how to deploy to Firebase? which files/folder should I include?
I have installed the app with npm install, used it as a boilerplate, and developed an application.
Now, when I tried to deploy the app to firebase, I noticed I don't have any target folder in my project directory. Then, how will I be able to deploy the app? What can be done to achieve a target folder with all the html, css and js files?
info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]prebuild: unsafe-perm in lifecycle true
6 verbose lifecycle [email protected]
7 verbose lifecycle [email protected]prebuild: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;G:\code\memberships\membercode\node_modules.bin;C:\Program Files\nodejs;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Skype\Phone;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\dotnet;C:\Program Files\IDM Computer Solutions\UltraCompare;C:\Program Files\IDM Computer Solutions\UltraEdit;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit;C:\Program Files (x86)\Microsoft Emulator Manager\1.0;C:\Users\fox21\AppData\Local\Microsoft\WindowsApps;;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\fox21\AppData\Roaming\npmprebuild: CWD: G:\code\memberships\membercode
8 verbose lifecycle [email protected]
9 silly lifecycle [email protected]prebuild: Args: [ '/d /s /c', 'run-s clean:target test' ]prebuild: Returned: code: 0 signal: null
10 silly lifecycle [email protected]
11 info lifecycle [email protected]build: [email protected]build: unsafe-perm in lifecycle true
12 verbose lifecycle [email protected]
13 verbose lifecycle [email protected]build: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;G:\code\memberships\membercode\node_modules.bin;C:\Program Files\nodejs;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Skype\Phone;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\dotnet;C:\Program Files\IDM Computer Solutions\UltraCompare;C:\Program Files\IDM Computer Solutions\UltraEdit;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit;C:\Program Files (x86)\Microsoft Emulator Manager\1.0;C:\Users\fox21\AppData\Local\Microsoft\WindowsApps;;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\fox21\AppData\Roaming\npmbuild: CWD: G:\code\memberships\membercode
14 verbose lifecycle [email protected]
15 silly lifecycle [email protected]build: Args: [ '/d /s /c',build: Returned: code: 0 signal: null
15 silly lifecycle 'cross-env NODE_ENV=production webpack --display-chunks --progress' ]
16 silly lifecycle [email protected]
17 info lifecycle [email protected]postbuild: [email protected]postbuild: unsafe-perm in lifecycle true
18 verbose lifecycle [email protected]
19 verbose lifecycle [email protected]postbuild: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;G:\code\memberships\membercode\node_modules.bin;C:\Program Files\nodejs;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Skype\Phone;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\dotnet;C:\Program Files\IDM Computer Solutions\UltraCompare;C:\Program Files\IDM Computer Solutions\UltraEdit;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit;C:\Program Files (x86)\Microsoft Emulator Manager\1.0;C:\Users\fox21\AppData\Local\Microsoft\WindowsApps;;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\fox21\AppData\Roaming\npmpostbuild: CWD: G:\code\memberships\membercode
20 verbose lifecycle [email protected]
21 silly lifecycle [email protected]postbuild: Args: [ '/d /s /c', './bin/postbuild.copy-assets.sh' ]postbuild: Returned: code: 1 signal: null
22 silly lifecycle [email protected]
23 info lifecycle [email protected]~postbuild: Failed to exec postbuild script
24 verbose stack Error: [email protected] postbuild: ./bin/postbuild.copy-assets.sh
24 verbose stack Exit status 1
24 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:242:16)
24 verbose stack at emitTwo (events.js:106:13)
24 verbose stack at EventEmitter.emit (events.js:191:7)
24 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
24 verbose stack at emitTwo (events.js:106:13)
24 verbose stack at ChildProcess.emit (events.js:191:7)
24 verbose stack at maybeClose (internal/child_process.js:877:16)
24 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
25 verbose pkgid [email protected]
26 verbose cwd G:\code\memberships\membercode
27 error Windows_NT 10.0.14393
28 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
29 error node v6.7.0
30 error npm v3.10.3
31 error code ELIFECYCLE
32 error [email protected] postbuild: ./bin/postbuild.copy-assets.sh
32 error Exit status 1
33 error Failed at the [email protected] postbuild script './bin/postbuild.copy-assets.sh'.
33 error Make sure you have the latest version of node.js and npm installed.
33 error If you do, this is most likely a problem with the todo-angular2-firebase package,
33 error not with npm itself.
33 error Tell the author that this fails on your system:
33 error ./bin/postbuild.copy-assets.sh
33 error You can get information on how to open an issue for this project with:
33 error npm bugs todo-angular2-firebase
33 error Or if that isn't available, you can get their info via:
33 error npm owner ls todo-angular2-firebase
33 error There is likely additional logging output above.
34 verbose exit [ 1, true ]
Switching to webpack will provide a better developer experience:
How should we approach/prioritize increasing coverage?
I'd love to help 😄
use ngForm instead of old style forms.
The subscription to filter
should be cleaned up when the component is destroyed.
This is a great example but can someone point me to a link that explains how these lines work
Thanks, much appreciated.
task-store.ts
tasks: ReplaySubject<List<any>> = new ReplaySubject(1);
subscribe(next: (list: List<any>) => void): any {
return this.tasks.subscribe(next);
}
Hi,
just saw that you have updated your project to RC5, thanks. There are some errors when serving the project in production mode.
npm run start -> fine
npm run build -> fine
npm run server (or firebase serve) leads to the following error :
zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'task' since it isn't a known property of 'task-item'.
If you add new Todo it will be shown in the list on the same client but not propagated to the other clients. I guess this could fix it:
private created(snapshot: FirebaseDataSnapshot): void {
let key: string = snapshot.key();
let index: number = this.findIndex(key);
if (index === -1) {
let task: ITask = snapshot.val();
task.key = key;
this.list = this.list.push(task);
this.emit() // <------- ADDED LINE
}
}
any plan to support Firebase 3.0, which was introduce Google IO 2016?
In your auth-route-helper.ts file you wrote:
CanActivate
supports DIAny progress that you know of?
Sorry if the question sounds stupid but I'm new with this technology and I'm looking for a working example on this feature so I can understand it better. Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.