Angularfire: Is the installation tutorial updated?

[ix-xerri]

Hi, I've been trying to get angular fire working but unsuccessful. Is https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md up to date?

I'm trying to use angularfire but can't seem to make it work. I'm using your tutorial and angular-cli.

Also the item shown https://www.youtube.com/watch?v=LdDwbIEpT4s are different. How can firebase init be run? What do I need to install?

[bjornai]

I also tried to follow the tutorial yesterday but no luck. Crossing finger for an update soon

[rememberlenny]

Having same issue here

Any thoughts? @jeffbcross @davideast @redian

[bjornai]

I've been playing around with the tutorials today too. Beeing new to this so kinda feeling lost.
Following the instructions, it fails on step 2 for me.

npm install angularfire2 firebase --save

I saw a comment in another issue, that angularfire2 supported rc5. So i opened packages.json and see references to rc.4. Edited these to rc.5 and ran npm install again. After doing that, step 2 worked without errors.

Now I can't find the file /src/app/app.module.ts refered to in step 3 :p

[ix-xerri]

The installation of angularfire2 and then ng serve work. Everything is package.json is rc5 so all is set. Step 3 and onward did not work.

[davideast]

@ix-xerri @baisaksen @rememberlenny It's important to make sure you're on the webpack version of the CLI if you're following that guide.

npm install angular-cli@webpack

[ix-xerri]

It is yes. The code generated by angular-cli does not match the code shown in step 3 onward. I am a noob and I just want a hello world using angular and firebase for now.

[davideast]

@ix-xerri Are you saying you don't have an app.module.ts file? If so, it would suggest you are not on the latest webpack branch that targets RC6.

Can you upload your code to a repo and link it here?

[ix-xerri]

I copied the same code you have in the tutorial and followed it step by step and I get

Module not found: Error: Can't resolve './app/' when I ng serve. Then a large number of Cannot find namespace 'firebase'.

note that in step 5 all the was replaced with "app". I don't see how it can be customisable.

[davideast]

@ix-xerri Are you on TypeScript 2.0?

You need to be on the Firebase 3.3 SDK, RC5, TypeScript 2.0, and the Webpack branch of the CLI.

[ix-xerri]

yes to all. I just installed everything from scratch as in the tutorial but when I run npm list -g --depth=0 I get

npm ERR! peer dep missing: [email protected], required by @angular/[email protected]
npm ERR! peer dep missing: typescript@^1.9.0-dev, required by @angular/[email protected]
npm ERR! peer dep missing: typescript@^1.9.0-dev, required by @angular/[email protected]
npm ERR! peer dep missing: [email protected] || 2.x.x, required by [email protected]
npm ERR! peer dep missing: @angular/platform-server@^2.0.0-rc.5, required by @angular/[email protected]
npm ERR! peer dep missing: zone.js@^0.6.17, required by @angular/[email protected]
npm ERR! peer dep missing: tslint@^3.0.0, required by [email protected]
npm ERR! peer dep missing: typescript@^1.9.0-dev, required by @angular/[email protected]
npm ERR! peer dep missing: typescript@^1.8.0 || ^1.9.0-dev, required by [email protected]

[PaulSlinky]

I am stuck on the setup as well. This is the error logged from the chrome console.
" Uncaught Error: Cannot find module "./app/" "
I have "angularfire2": "^2.0.0-beta.4", "firebase": "^3.3.2".

On step 3, setting up @NgModule, I am a bit unsure of the export class.
export class MyAppModule {}
I exchanged my app name with MyApp in MyAppModule{} is this correct?
If this is the case maybe Module?

[ix-xerri]

There is now the final version of angular 2.0. Will there be any changes to the tutorial and the dependencies to make it work?
Thanks

[mukesh51]

@ix-xerri The installation tutorial is updated now. Try again from the start and everything should work.

[ix-xerri]

@mukesh51 Really close...all I get is one warning and one error.

WARNING in ./src/main.ts
9:41 export 'AppModule' was not found in './app/'

ERROR in [default] /.../src/main.ts:6:9
Module '"/.../src/app/index"' has no exported member 'AppModule'.

[mukesh51]

@ix-xerri would be good to see your code. can you copy the snippets from app.module.ts, index.ts and main.ts here. Also copy app.component.ts and index.html. Easy option will be to create a plunker.

can you execute this command "ng -v" and paste the output.

[ix-xerri]

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.14
node: 6.4.0
os: darwin x64

https://plnkr.co/edit/3jmOKZ?p=catalogue

In app.module.ts the proper firebase config is there not 'xxx'.

[mukesh51]

@ix-xerri Got your problem. You're exporting MyAppModule in /src/app/app.module.ts, but while bootstrapping in /src/main.ts you're using AppModule.

Change "MyAppModule" to "AppModule" in /src/app/app.module.ts and you should be good.

@davideast I'll update the install document.

[ix-xerri]

ng serve finally works but the app does not load. I get in Chrome console.

url_resolver.js:248Uncaught TypeError: uri.match is not a function_split @ url_resolver.js:248getUrlScheme @ url_resolver.js:91componentModuleUrl @ metadata_resolver.js:708CompileMetadataResolver.getDirectiveMetadata @ metadata_resolver.js:148(anonymous function) @ metadata_resolver.js:271CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:265RuntimeCompiler._compileComponents @ runtime_compiler.js:126RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:64RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:55PlatformRef_._bootstrapModuleWithZone @ application_ref.js:303PlatformRef_.bootstrapModule @ application_ref.js:285(anonymous function) @ main.ts:12__webpack_require__ @ bootstrap db62fc2…:52(anonymous function) @ main.bundle.js:60940__webpack_require__ @ bootstrap db62fc2…:52webpackJsonpCallback @ bootstrap db62fc2…:23(anonymous function) @ main.bundle.js:1

[iamgmd]

@ix-xerri I get the same error in Safari.

TypeError: uri.match is not a function. (In 'uri.match(_splitRe)', 'uri.match' is undefined)

[mukesh51]

@ix-xerri @iamgmd Remove 'moduleId: module.id' from your src/app/app,component.ts and the error should go away. Let me know how it goes.

[ix-xerri]

It seems like its working. Thank you. Can you include a Firebase example of the data you need with this tutorial to have some text load on the page?

[mukesh51]

You can have "items" as your root in your firebase console and then can have "item1 : value1", "item2: value2". Any basic tutorial should help.

items:
-- item1 : value1
-- item2 : value2

[ix-xerri]

everything works...thanks

[iamgmd]

yep @mukesh51 can confirm everything works now. thanks.

Just as a side note, being new to Angular 2 and following tutorials, wondering why you need to take moduleId away, is this a bug needing to be fixed or can't angular fire routines be used in a component where moduleId is needed. Any help on that would be appreciated.

[mukesh51]

@iamgmd Hope this helps Module.Id

[iamgmd]

@mukesh51 Perfect, thank you. I am using latest tools and cli with webpack so understand it's not needed.

[katowulf]

Just as a side note, being new to Angular 2 and following tutorials, wondering why you need to take moduleId away, is this a bug needing to be fixed or can't angular fire routines be used in a component where moduleId is needed. Any help on that would be appreciated.

Yep, webpack is a very recent addition to AngularFire2. Just a little bit of cleanup to do here. Gotta love betas!

At this point I'm going to close out this compendium of install issues. If any of these are unresolved please file them as their own topic (please search first to avoid dups).

[katowulf]

Great work @mukesh51 and thanks for the contributions!