Chapter 8 - Missing import of FormsModule in @angular/forms barrel

[fourpastmidnight]

I got the error <input [ERROR ->][(ngModel)]="task.name" type="text" class="form-control" placeholder="Task name" required />

I did a quick search and found that people with this error needed to import the FormsModule from the @angular/forms barrel. Of course, then, the @angular/forms package must be added to packages.json:

dependencies: {
    //...
    "@angular/forms": "^0.3.0"
    //...
}

You also need to add @angular/forms to your systemjs.config.js file, too.

Then it needs to be imported in app.component.ts. Also, in app.component.ts, you need to import FORM_DIRECTIVES.

Here's the diff for app.component.ts:

diff --git a/app/app.component.ts b/app/app.component.ts
index efde9d2..9c4bb34 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -4,12 +4,14 @@ import { HTTP_PROVIDERS } from '@angular/http';
 import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from '@angular/router-deprecated';
 import { TasksComponent, TaskEditorComponent } from './tasks/tasks';
 import { TimerComponent } from './timer/timer';
-import { FORM_PROVIDERS } from '@angular/common';
+import { FormsModule, FORM_PROVIDERS, FORM_DIRECTIVES } from '@angular/forms';
 import { LoginComponent } from './login/login';

 @Component({
     selector: 'pomodoro-app',
-    directives: [ROUTER_DIRECTIVES],
-    providers: [SHARED_PROVIDERS, HTTP_PROVIDERS, ROUTER_PROVIDERS],
+    directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
+    providers: [SHARED_PROVIDERS, HTTP_PROVIDERS, ROUTER_PROVIDERS, FORM_PROVIDERS],
     styles: [`
         .router-link-active {
             font-weight: bold;

NOTE
Per my second-to-last post below, I updated the diff above to remove the importation of FORM_PROVIDERS and FORM_DIRECTIVES from @angular/common to prefer the ones contained in @angular/forms. @angular/common's support for forms is now deprecated and all HTML form functionality should come from @angular/forms.

Looks like the @angular/forms barrel may be relatively new since you wrote your examples? Not sure--but in any event, this will get readers on the right track.

After making these changes, I got the following warning in the console window:

*It looks like you're using the old forms module. This will be opt-in in the next RC, and will eventually be removed in favor of the new forms module. For more information, see:

https://docs.google.com/document/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/preview

Perusing the documentation for ngModel, I see that when using it you also need to provide a name attribute for each input element. Once I added appropriate @name attributes, the page displayed correctly with no warnings or errors.

I wonder about that warning above though. It almost looks like I shouldn't need that @angular/forms package at all. I'll do some more digging.

[fourpastmidnight]

Hmm, not sure what that warning was about that I received in the console. Over at the Angular 2 documentation, I did see that latest was in the URL, so definitely, the information above is correct and is the latest. As I said, once I added the @name attributes to the input elements of the form, I got no warnings or errors and everything appeared to work correctly.

[fourpastmidnight]

OK, I figured out what that warning is about. Apparently, within the @angular/common package, there's a "sub-package" named forms-deprecated. So, it looks like everything's moving to @angular/forms.

So, all that's required to remove the warning is to import FORM_PROVIDERS and FORM_DIRECTIVES from @angular/forms instead of @angular/common. I've updated the diff in my OP above.

[fourpastmidnight]

NOTE

For the login-component.ts file, you DO NOT want to import FORM_PROVDIERS and FORM_DIRECTIVES from @angular/forms, but want to use the deprecated ones in @angular/common. This is because the example code is using the deprecated NgFormModel component (directive?) that doesn't exist in the new @angular/forms barrel.

Also note that for RC6 and above, all currently deprecated features as of RC5 will be removed. I fear that the code examples in this book will quickly become obsolete--especially when it comes to the code dealing with routing and forms. See section 5 here for more information.

[deeleman]

Also note that for RC6 and above, all currently deprecated features as of RC5 will be removed. I fear that the code examples in this book will quickly become obsolete--especially when it comes to the code dealing with routing and forms.

That is correct, alas. In first place, the deprecated forms API will be removed from the framework, superseded by the reactive forms API instead. The new router v.3 version, which is not the by-product of the evolution of the router module described in the book but a brand new module engineered from scratch, features a new API, not bound anymore to routing components.

On top of that, the @Component decorator metadata interface will evolve as well and the providers, pipes and directives properties will be removed too, now that Angular 2 favors the creation of NgModules in its application design as the domain wrapper when declaring directive and pipe injection. As for RC.6 one will want to declare the components, pipes and directives, along with the provider singletons, in a module. Such entities will become available then to the other components and entities living in that module and might be exported as well to be reused in other application domains.

The animation API has been also redesigned at full (the book already warned the reader about this). With this said, the chapters covering routing, forms and animation are now obsolete and outdated.

With this being said, the information contained in the book still gives the reader a proper ground to get up to speed in no time with the new APIs, since the interfaces and directive naming do not change that much. The way that routes and animations ought to be exported and declared changes completely though. Same applies to the way components have to be declared for reuse throughout the application.

This book has featured the shortest lifespan ever (the final book version was published back in may'16), which is a shame bearing in mind the hard work pulled into it along more than 10 months. The book was published in the hopes that once the framework had hit the Release Candidate stage, no significant changes in the API design would occur (as expected on any software product moving into the RC phase).

With a nearly obsolete book, I just feel sorry about the readers though, and all those who have put all their confidence in this work to help them get up to speed with Angular. Please let me know if you need further guidance on how to implement the new router and forms API and will post some links herein.

Probably I'll gather the energy required to write a second edition of the book anytime by the end of this year. At this moment, after more than 10 months of hard work and the passing of my brother, I lack the strength required to lock up myself at home for another 3 months to prepare the revised version of the book.

In the meantime, I truly recommend these resources:

• Upgrading to the new Angular 2 router
• Introduction to Angular 2 Forms - Template Driven vs Model Driven or Reactive Forms

[fourpastmidnight]

Yikes!! Will Angular2 ever be finished? They've been saying it would be done"soon" for months (years?)! I bought this book because I heard it was done only to find it was in RC--but I thought at this point, it should be stable enough. Anyway, nothing in my posts should be construed as something against you @deeleman. You wrote a book that contained as up-to-date information as you could.

I did see some of those changes you mentioned with using NgModule over the way the examples have been written, but didn't read closely enough to notice that the decorators are all changing, too!

I agree, what you've provided is helpful, even with all the upcoming changes, so that when RC6 ships, I should have little trouble mapping the knowledge to the new bits. It seems that mostly the surface is changing but the guts are staying the same. You'd think, though, that for RC, the surface APIs should be fairly stable, while some implementation details are tweaked; but no, instead, these RC releases should still be considered BETA. This is a very poor job on Google's part in versioning this product. It's definitely not ready for prime time with how much churn there still is in it! 😠 Listen up Google, versioning communicates things to people; you've really screwed people over by incorrectly communicating the true status of Angular2--for both authors, who are as much "salesmen" for your product as anything else (while also generating income for themselves) and now find themselves hawking something that will break in only a few short weeks or being totally obsolete, as well as "not so early" adopters who waited for stable pre-release versions before dipping their toes, possibly even for a new project! Thankfully, I haven't started any new projects with Angular2. I was going to, but maybe now I'll take the time to learn another, more mature product.

Again @deeleman, thanks for doing the best you could with what was available at the time. If you do write that second edition, I look forward to seeing it, I'm sure it'll be great! As the content in the current book is great and has helped me get a head start on Angular2 over Angular 1.x.