FormsModule should be imported in app.module.shared

[Gimly]

I was having trouble understanding why, after passing my solution to Angular 4 (I re-run yeoman from the root of my solution and fixed all the issues), I was getting an error that said:

There is no directive with "exportAs" set to "ngForm"

I was very confused because this error comes when FormsModule isn't correctly imported, but it is imported in app.module.client. After a bit of testing, I figured out that the server-side (probably because of the pre-rendering) actually needed it as an import. I've passed the import to the app.module.shared and it fixed the issue.

Is there any reason for not importing FormsModule from the app.module.shared? Is there something that I should do differently to not have that issue?

[AmrineA]

I also found the same thing. I ended up putting it into app.module.server because I was getting errors on my initial page load saying that it didn't know what ngModel was. I haven't moved it shared yet, but will likely do that after working through some other issues. This seems like it should be part of the template.

[MarkPieszak]

Spot on, I missed that too actually! Yes most everything will always go into a Shared module, only edge case scenarios where you need to dependency inject different modules into each platform will you need to use th be individual client & server modules.

[SteveSandersonMS]

Thanks for letting us know! Would you be willing to submit a pull request that makes this change?

[ADefWebserver]

Yes most everything will always go into a Shared module,

@MarkPieszak - I have found that Angular services (classes decorated with @Injectable()) now need to be registered in the app.module.client.ts file. Am I missing something?
See:
http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/4306/Upgrading-JavaScriptServices-and-PrimeNG-From-Angular-2-to-Angular-4.aspx

[AmrineA]

@SteveSandersonMS Pull request #1012 has been submitted.

[MarkPieszak]

You'll have to register them in both app.module.client & app.module.server.

App.module.shared should be an NgModule (not an exported object) that doesn't bootstrap[] anything and is imported in imports[] within client&server app.module's, otherwise you'll have errors when trying to use a third party library that requires a .forRoot(), as it's looking for an NgModule decorator above the class it's called on.

[ADefWebserver]

You'll have to register them in both app.module.client & app.module.server.

Thanks I updated my article with your additional instructions.

[Phillippe43]

I was pulling my hair out yesterday on this issue. I tested imports on shared, client, and server, none of which worked. I ended up having to import the forms and reactiveforms module into the component itself. But the other thing was that I had to change [formgroup] to (formgroup).

Can anyone else confirm that [formgroup] must be changed to (formgroup)?

[AmrineA]

@Phillippe43 I've been using [formGroup]. Parenthesis are supposed to be for event binding. Based on your comment, do you have the proper casing (capital G) in [formGroup]?

[Phillippe43]

Ok, just tested on a clean project install. And everything worked as expected when imported into both app.module.client and app.module.server, as was mentioned above.