New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FormsModule should be imported in app.module.shared #986

Closed
Gimly opened this Issue May 29, 2017 · 11 comments

Comments

Projects
None yet
6 participants
@Gimly

Gimly commented May 29, 2017

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

This comment has been minimized.

AmrineA commented May 30, 2017

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

This comment has been minimized.

Contributor

MarkPieszak commented Jun 3, 2017

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

This comment has been minimized.

Member

SteveSandersonMS commented Jun 5, 2017

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

@ADefWebserver

This comment has been minimized.

ADefWebserver commented Jun 5, 2017

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

This comment has been minimized.

AmrineA commented Jun 5, 2017

@SteveSandersonMS Pull request #1012 has been submitted.

@MarkPieszak

This comment has been minimized.

Contributor

MarkPieszak commented Jun 5, 2017

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

This comment has been minimized.

ADefWebserver commented Jun 5, 2017

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

Thanks I updated my article with your additional instructions.

@Phillippe43

This comment has been minimized.

Phillippe43 commented Jun 7, 2017

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

This comment has been minimized.

AmrineA commented Jun 7, 2017

@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

This comment has been minimized.

Phillippe43 commented Jun 7, 2017

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.

@SteveSandersonMS

This comment has been minimized.

Member

SteveSandersonMS commented Jun 8, 2017

Thanks for the info. This is now implemented.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment