angularfire2 with Angluar CLI @latest - required peers not installed

[krisUneon]

Hi folks,

I am kind of new to Angular ecosystem, so please, pardon my amateurism.
AngularFire2 install guide says _"Before you start installing AngularFire2, make sure you have latest version of angular-cli installed."_ and Angular CLI guide to update to latest says _"@angular/* packages now have a ^4.0.0 minimum"._ Now, when I install AngularFire2 after updating Angular CLI to latest I got following warnings:

npm WARN [email protected] requires a peer of @angular/common@^2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/compiler@^2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/core@^2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/platform-browser@^2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/platform-browser-dynamic@^2.0.0 but none was installed.

These warnings does make a good sense to me, since Angular CLI is versioned at ^4.0.0 for these modules. Downgrading @angular/compiler and others mentioned in warnings to meet version ^2 will result in unmet dependencies required by other Angular CLI modules.

Funny stuff is that I can now serve the app to my localhost, but cannot deploy the app at all, since the compiler fails, throwing millions of errors, which are not being thrown when AngularFire2 is removed from the project ... which is kind of contradictory to why I moved to firebase at the first place.

Please, any suggestion on how to resolve this issue are most welcomed.

Thank you.
kris

[aveferrum]

Hi kris,
Can you share the errors displayed when you try to build? I am in the same boat with you, getting dependency errors but able to serve / build my app.

├── @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── @angular/[email protected]
├── @ng-bootstrap/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

npm ERR! peer dep missing: @angular/common@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/compiler@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/core@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/platform-browser@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/platform-browser-dynamic@^2.0.0, required by [email protected]
npm ERR! peer dep missing: zone.js@^0.7.2, required by @angular/[email protected]

[krisUneon]

Errors, I received, were all related to expressions that I use in component's template and are defined in corresponding component, but hoisted after functions that call angularfire's methods. None of the values assigned after angularfire's methods in any component was accessible and could not be used within the template. Hence all errors were "the item is not member of component" (Strangely enough, when firebase-related part was commented out, there was no problem with accessing values assigned within the component.) The workaround for me was to assign empty or null values directly after variable declaration. Which, in my case, is causing no harm, just adds unnecessary text and is kind of against TypeScript readability and Angular2 elegance. Compiler works, true, since it is serving the app, but as building is another process, some issues related to hoisting, variable declarations and assignment can play a role. Nonetheless, it would be nice to see AngularFire2 and Angular CLI to meet on its requirements and provide consistent guidelines. I admit this is not a terrible bug or apocalypse now.

[afgallo]

I think AngularFire2 2.0.0-beta.8 is not fully compatible with angular 4.0.x. I have an Ionic 2 app which has just been upgraded to angular 4.0.x and can also see those dependencies mismatch. My app works partially, I can use auth without a problem, but saving items to the database causes weird promises errors. @davideast can you shed some light and tell us when we can expect the first semver release compatible with angular 4?

Thanks!

[krisUneon]

As far as I am concerned, I would be happy enough with a simple solution => I would add to Installation Guide note saying that users, who tend to import AngularFire2 v2Beta into Angular CLI v1 based project might be facing some issues and are advised to use Angular CLI RC built upon @angular/core@^2 ... or something similar, since both AngularFire2 and Angular CLI are kind of officially supported projects and there are probably many people like me, who turned to them for the sake of simplicity and lack of pro experience with customised Angular2 bundle or standard Firebase SDK (hence, such users might be freaked out by those "not installed peers" and not be able to find workarounds). But I have no insight into AngularFire2 development and it just might be the case that a better support for Angular2 v4 is on its way and thus my solution would not do much good.

[mubasshir]

@afgallo any solution for ionic3?

[afgallo]

Hi @mubasshir, nope not yet. I might just roll back to Ionic 2 and wait for angularfire2 to catch up.

[mubasshir]

Don't do that. Instead use regular Firebase. That's what I'm doing now with minimal changes
Refer Firebase Google docs 

Sent from my Samsung Galaxy smartphone.

{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/angular/angularfire2","title":"angular/angularfire2","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/angular/angularfire2"}},"updates":{"snippets":[{"icon":"PERSON","message":"@afgallo in #889: Hi @mubasshir, nope not yet. I might just rollback to Ionic 2 and wait for angularfire2 to catch up."}],"action":{"name":"View Issue","url":"https://github.com/angular/angularfire2/issues/889#issuecomment-292732359"}}}

[sorcamarian]

I managed to make a clean install.

Project was generated using the ng-cli 1.0 and I installed and used:

• angularfire2("^2.0.0-beta.8")
• firebase ("^3.7.6")

I will try to post the instructions(including a repository) during this day.

[sorcamarian]

Let's start :smile:

On: Windows 7

---

0) Check our global dependencies

npm -g list --depth=0

• 
  
  1. +-- @squarespace/[email protected]
  
  
• 
  
  1. +-- [email protected]
  
  
• 
  
  1. +-- [email protected]
  
  
• 
  
  1. +-- [email protected]
  
  
• 
  
  1. `-- typescript@2.3.0-dev.20170413
  
  

If we don't have any angular command line interface
  We install the new @angular/cli 1.0 globally
 npm -g install @angular/cli

Else, if we have some old angular-cli version.
  There is a whole page about Angular CLI migration guide

  In my opinion, in simple cases, we could just uninstall the old version (angular-cli), like this:
 npm -g uninstall angular-cli
 npm cache clean
 And install the new version (@angular/cli):
 npm install -g @angular/cli

Verify the dependencies again:

npm -g list --depth=0

• 
  
  1. +-- @angular/cli@1.0.0
  
  
• 
  
  1. +-- @squarespace/[email protected]
  
  
• 
  
  1. +-- [email protected]
  
  
• 
  
  1. +-- [email protected]
  
  
• 
  
  1. +-- [email protected]
  
  
• 
  
  1. `-- typescript@2.3.0-dev.20170413
  
  

Version check.
Now, we should be able to use the new @angular/cli.
ng -v

• @angular/cli: 1.0.0
• node: 7.8.0
• os: win32 x64

---

1) Create a new angular2 functional project

(Make sure that the CLI path is where you want the project to appear.)

One way, with npm
  The below ng command creates the angular2 project and automatically installs the local dependencies with npm
  ng new demo-project
After the installation, navigate inside the project directory
  cd demo-project
Inside the project directory, start the app
  ng serve
Open a browser and navigate to:
_localhost:4200_

At this point we should have a generated [git repository](https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository) with a default commit message.

---

2) Install local packages: angularfire2 and firebase

Inside our project directory(_/demo-project_)

_NOTE: If the local server is rurnning(caused by the above command: ng serve ), stop the server from the command line by pressing CTRL + C(or close and reopen the CLI)_

  Install angularfire2 and firebase dependencies locally with the npm option --save
    npm install firebase angularfire2 --save

---

Next points are coming

3) Initiate a Firebase Database from the Web Console

4) Configure Angularfire2 inside our project

5) Show data inside our project, from Firebase Database

[krisUneon]

@sorcamarian -> Am I missing something or you actually do get "npm WARN [email protected] requires a peer of @angular/ ... but none was installed" ? It seems to me that you do. The point of this issue was that AngularFire2 v2Beta does not meet with all dependencies required by Angular CLI v1. As pointed out previously, the installation might work even with those "not installed peers", but there clearly is some kind of gap in AngularFire2 v2Beta documentation and support when it comes to Angular CLI v1 ...

[sorcamarian]

Indeed, I get "WARN" messages, but the app works.

I misunderstood, I thought the point is to install and use: @angular/cli and angularfire2 without errors.

My bad, sorry.

[krisUneon]

@sorcamarian no need to be sorry, your post is valuable still, I just wanted to clarify the meaning of this stream, since it was confirmed previously that you can get working installation even with those warnings, but clearly, there are some discrepancies as mentioned previously. Just to make my entry complete: I dropped AngularFire2 from the project for the time being (thought i like the AF2), since most Firebase functionality that I need still heavily falls back to standard Firebase SDK -> hence I can no longer say anything about dealing with these "not installed peers".

[myspivey]

If you are on 1.0 of the CLI, it will build a project with "@angular/core": "^4.0.0", angularfire2 is still currently on "@angular/core": "^2.0.0".

[krisUneon]

Yes, indeed, it was confirmed several times already that the project can be built upon Angular CLIv1 and AngularFire2v2beta and that received warnings might not effect its functionality. I am closing this, since I cannot possibly imagine what else can be added to meaningfully contribute to this. All relevant information is mentioned above. Thank you all for sharing your experience. Best regards.