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...

Read full post

Richard Haber • Dec 25 '19 • 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

Aaron Frost • Dec 25 '19

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

Richard Haber • Dec 25 '19

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.

Aaron Frost • Dec 25 '19

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

Aaron Frost • Dec 25 '19

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

Richard Haber • Dec 26 '19

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",

Richard Haber • Dec 25 '19

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

Fergal Moran • Dec 12 '19

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

Aaron Frost • Dec 12 '19

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).

Fergal Moran • Dec 12 '19 • 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

Aaron Frost • Dec 12 '19

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.

Fergal Moran • Dec 13 '19

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.

Fergal Moran • Jan 11 '20 • 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!

Abdur Rehman Khalid • Dec 12 '19

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.

Richard Davenport • Dec 12 '19

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.

Aaron Frost • Dec 12 '19

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.

Dwayne Charrington • Dec 12 '19

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.

Aaron Frost • Dec 12 '19

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

Terje Bergesen • Mar 11 '20

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.