DEV Community

You Should Upgrade to Angular 9 TODAY

Aaron Frost on December 12, 2019

The TL;DR Version Let me open by briefly summarize my points of why you should upgrade today. I will cover each point in more detail low...
Collapse
 
qixoticsoftware profile image
Richard Haber • Edited

I just created a new project using 9.0.0-rc.7. It is complaining that it 'Can't bind to 'FormGroup' since it isn't a known property of 'Form'. I've tried all the suggestions on SO, but nothing helps. Both FormsModule and ReactiveFormsModule are being imported.

It seems that this is one issue for which "No version of Angular has been more rigorously tested than has been Angular v9" has a bit more rigor needed

Collapse
 
frosty profile image
Aaron Frost

It should be 'formGroup' not 'FormGroup'. The F should be lowercase. Does that fix your issue?

Collapse
 
qixoticsoftware profile image
Richard Haber

Even worse, it doesn't recognize any Angular Material elements. I will start again with a simple Angular 9 app and see if I get different results, otherwise, I'll go back to 8 until I get this figured out.

Thread Thread
 
frosty profile image
Aaron Frost

Can you share your code? There was a change to formGroup in v9.

Thread Thread
 
frosty profile image
Aaron Frost

Are you using a form tag, or an ng-form tag?

Thread Thread
 
qixoticsoftware profile image
Richard Haber

Aaron, thanks for taking the time to help me track this down. Here are some snippets of the code and relevant parts of package.json.

  <form [formGroup]>
    <label for="user-login-email">Enter your email: </label>
    <input id="user-login-email"  formControlName="userLoginEmail">
  </form>

"@angular/animations": "^9.0.0-rc.7",
"@angular/cdk": "^9.0.0-rc.6",
"@angular/common": "^9.0.0-rc.7",
"@angular/compiler": "^9.0.0-rc.7",
"@angular/core": "^9.0.0-rc.7",
"@angular/forms": "^9.0.0-rc.7",

"@angular-devkit/build-angular": "^0.900.0-rc.7",
"@angular/cli": "^9.0.0-rc.7",
"@angular/compiler-cli": "^9.0.0-rc.7",
"@angular/language-service": "^9.0.0-rc.7",
Collapse
 
qixoticsoftware profile image
Richard Haber

Aaron,

The typo is in my message, not in my code.

I am going to try to use Material Forms, etc., to see if that will work. Otherwise I will either have to revert back to using Angular 8, or avoid using Reactive Forms for now

Collapse
 
fergalmoran profile image
Fergal Moran

Don't do this if you have a reasonably complex project, it's nowhere near ready. Ivy breaks pretty much everything.

Collapse
 
frosty profile image
Aaron Frost

Fergal, Google has dozens of reasonably complex projects that are working fine. If you care to talk about what you ran in to, I can see if I can help (or get the Angular team to look at it with you).

Collapse
 
fergalmoran profile image
Fergal Moran • Edited

Sure - first off ng update failed with

[error] Error: Package install failed.
at installPackage (/home/fergalm/dev/myproj/myproj-web/node_modules/@angular/cli/tasks/install-package.js:36:15)
at installTempPackage (/home/fergalm/dev/myproj/myproj-web/node_modules/@angular/cli/tasks/install-package.js:73:5)
at Object.runTempPackageBin (/home/fergalm/dev/myproj/myproj-web/node_modules/@angular/cli/tasks/install-package.js:82:33)
at UpdateCommand.run (/home/fergalm/dev/myproj/myproj-web/node_modules/@angular/cli/commands/update-impl.js:37:38)
at async UpdateCommand.validateAndRun (/home/fergalm/dev/myproj/myproj-web/node_modules/@angular/cli/models/command.js:134:28)
at async Object.runCommand (/home/fergalm/dev/myproj/myproj-web/node_modules/@angular/cli/models/command-runner.js:186:24)
at async default_1 (/home/fergalm/dev/myproj/myproj-web/node_modules/@angular/cli/lib/cli/index.js:54:31)%  

So.. I updated the packages manually in package.json, then ran ng update --migrateOnly
Then the horrowshow began!!

'router-outlet' is not a known element

A large number of

 error TS-998004: No pipe found with name 'async'

Literally hundreds of errors of the type

'my-component' is not a known element

and

Can't bind to '<property>' since it isn't a known property of 'my-component'

I played wackamole with the errors for as long as I could but unfortunately I don't have a huge amount of time to devote to this just now so I had to revert back to 8.2

Thread Thread
 
frosty profile image
Aaron Frost

Wow. That sucks! I feel for you. That must have been frustrating.

If you went to look at it together, we can.

If I were to try it again, I would remove all node_modules, then reinstall, and THEN attempt to do the upgrade. Not sure it will help. I just like to eliminate possible corrupt modules from the equation.

Let me know if you want another set of eyes.

Thread Thread
 
fergalmoran profile image
Fergal Moran

Hi Aaron

Yeah - I already tried removing node_modules and retrying, still the same.
I'm gonna take a break from it for now but will definitely take you up on your kind offer next time I try!

Fergal.

Thread Thread
 
fergalmoran profile image
Fergal Moran • Edited

RC8 is orders of magnitude better, still lots of weird errors and template cleaning up required but a calm and level headed error by error approach worked wonders (it kind of reminded me of my STL programming days where fixing one issue resolved 100 compile errors 😱 ). Definitely a really nice "feel" to this release, all the template issues I had to fix were down to poor coding on my behalf, the time spent fixing them really feels like time well spent! And now I have a running, tests passing angular-9-rc8 version of my app!!

Thanks again for your support and for writing the article that pushed me to get it done!

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

I was expecting this kind of updated from the Google team as the React has gained the popularity and I was also expecting something very rigorous from the Google team to take the lead from React as well.

As Far as I am looking into the situation, I guess the Angular will beat the React once again in the coming time as this updates seems to improve many thins as well.

Collapse
 
richarddavenport profile image
Richard Davenport

I don't think people are going to switch back to Angular if they did use it and are now onto something different. If people loved Angular but left for specific reasons that ivy solves, then maybe, but I just don't see that happening.

Collapse
 
frosty profile image
Aaron Frost

I think that I agree with Richard. While Ivy helps a lot, the fundamentals of what makes Angular and React different are still the same. People will still continue to choose React and Angular for what they already love them for.

I do hope that the Angular team comes up with some things to make Angular easier to learn, though.

Collapse
 
beggars profile image
Dwayne Charrington

Is there a blog post somewhere which sums up what Ivy is, what it does and why it is such a game changer? Admittedly, I've heard it mentioned a lot but feel as though I don't fully understand its purpose or why it is needed.

Collapse
 
frosty profile image
Aaron Frost

Here is one of many blogs about it that I have seen. dev.to/eugeniolentini/angular-ivy-...

Collapse
 
tabinnorway profile image
Terje Bergesen

Absolutely not. Angular 9 is simply not ready yet.

Here's my experience.

Installed 9. Created a project. Added @angular/material. Tons of compile errors. Did cache clean --force, compile errors gone. Added a material component, more compile errors. Had to cache clean again, every time I added a material component. Start editing project. Save files, nothing happens. No reload. Nothing. Have to Ctrl+C and do ng serve -o again.

20 minutes and I gave up. Uninstall @angular/cli. Lots and lots of errors when uninstalling. Doesn't uninstall. Have to manually remove @angular directory.

Installed Angular 8, back to normal working.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
rikkepeterzen profile image
Rikke K. Petersen
Collapse
 
scmhtetaung profile image
scm.htetaung
Collapse
 
jwp profile image
John Peters

Ok Arron, I'm in, is it as simple an npm install Angulur -v9.0

Collapse
 
frosty profile image
Aaron Frost

I updated the blog to include a link, but here is the doc you can follow: next.angular.io/guide/updating-to-...

Collapse
 
jwp profile image
John Peters

It hung while updating to version 8. I retried but it still hung.

Thread Thread
 
frosty profile image
Aaron Frost

It hung on the first step of the instructions in the link to the doc I sent you? ng update @angular/core@8 @angular/cli@8 is where it hung?

Did you possibly have uncommitted changes? What is your OS What happsn if you delete your node_modules, do an npm install and then try it again?

Thread Thread
 
jwp profile image
John Peters

Yes had uncommited work. I'll try your suggestions. Tx