No provider for NgModel when running tests #929

binarious · 2016-09-05T11:49:47Z

I've moved to RC6. Dev and prod are running well, but when running tests I get:

No provider for NgModel ("[ERROR ->]<datepicker ngModel></datepicker>"): DatePickerComponent_Host@0:0
    Error: Uncaught (in promise): Error: Template parse errors:
        at resolvePromise (webpack:///~/zone.js/dist/zone.js:558:0 <- config/spec-bundle.js:89579:32)
        at resolvePromise (webpack:///~/zone.js/dist/zone.js:543:0 <- config/spec-bundle.js:89564:18)
        at webpack:///~/zone.js/dist/zone.js:591:0 <- config/spec-bundle.js:89612:18
        at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:365:0 <- config/spec-bundle.js:89386:38)
        at ProxyZoneSpec.onInvokeTask (webpack:///~/zone.js/dist/proxy.js:130:0 <- config/spec-bundle.js:88910:44)
        at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:364:0 <- config/spec-bundle.js:89385:43)
        at Zone.runTask (webpack:///~/zone.js/dist/zone.js:265:0 <- config/spec-bundle.js:89286:48)
        at drainMicroTaskQueue (webpack:///~/zone.js/dist/zone.js:497:0 <- config/spec-bundle.js:89518:36)

I'm not using the datepicker. I've just imported Ng2BootstrapModule in my Module.

The text was updated successfully, but these errors were encountered:

Martin-Luft · 2016-09-05T11:56:21Z

The Ng2BootstrapModule includes all components (e.g. Datapicker). Import only the modules you need (e.g. DropdownModule, AlarmModule...)

binarious · 2016-09-05T12:04:34Z

Doesn't work either. It shouldn't throw an error when everything is included though.

binarious · 2016-09-05T12:10:12Z

I removed all except the PaginationComponent which I'm using in the component I'm testing. The error changes to:

No provider for NgModel ("[ERROR ->]<pagination ngModel></pagination>"): PaginationComponent_Host

valorkin · 2016-09-05T13:14:28Z

As far as I remember test requiring additional ngModel injection, please take a look on test for corresponding components

Martin-Luft · 2016-09-05T13:17:17Z

The buttons, pagination, rating and typeahead modules use ngModel in there selector's but don't import FormsModule. I'm not sure if this is necessary but I think so... Thanks for reporting this possible bug.

binarious · 2016-09-05T13:18:17Z

Any idea for a workaround?

Martin-Luft · 2016-09-05T13:36:00Z

@valorkin I hope this PR helps? @binarious can you give me a small example so I can test it?

binarious · 2016-09-05T13:46:19Z

@Martin-Wegner Not really. I just have complex app tests, but I'm already checking out your branch to test it locally.

binarious · 2016-09-05T14:07:59Z

Unfortunately I'm getting the same error.

Martin-Luft · 2016-09-05T14:12:06Z

Perhaps you use ngModel somewhere in your test or code without importing FormsModule?

binarious · 2016-09-05T14:14:35Z

Pretty sure that's not the case. I'm using a SharedModule in every Component which includes CommonModule, FormsModule etc.

Martin-Luft · 2016-09-05T14:19:22Z

In every component? You mean in every module or?

binarious · 2016-09-05T14:19:56Z

Sorry, right. In every module.

binarious · 2016-09-05T14:21:19Z

Do you have gitter? We may can figure that out there without spamming this issue?

Martin-Luft · 2016-09-05T14:23:46Z

No I don't and I must go now, sorry :(

binarious · 2016-09-05T15:09:17Z

Ok, I'll create a simple example project later.

adrianfaciu · 2016-09-06T06:59:45Z

I had a very similar problem yesterday (exactly the same error message) and was able to fix it similar to what @Martin-Wegner suggested: adding the FormsModule as import to the affected module.

Martin-Luft · 2016-09-06T07:49:39Z

@binarious are you sure, that you checked out my fork of the ng2-bootstrap repository?

Martin-Luft · 2016-09-06T08:26:06Z

I have improved my PR #931

binarious · 2016-09-06T08:29:26Z

@Martin-Wegner I've created a fork of your development branch without the .npmignore so that I can use the TypeScript files directly and used it like this:

"ng2-bootstrap": "binarious/ng2-bootstrap#development",

Files and changes were in my node_modules as expected. But I also created https://github.com/binarious/ng2-bootstrap-testing which works just fine. Even without your PR. Will dig into my app to check what's different.

Martin-Luft · 2016-09-06T08:32:28Z

OK good to know but I think we should keep the PR:

export FormsModule in all modules which use ngModel selector binding because every template which uses such a module would anyway import FormsModul which is now no longer necessary

binarious · 2016-09-06T08:35:31Z

@Martin-Wegner Do you mind to join https://gitter.im/valor-software/ng2-bootstrap/ and message me there?

valorkin · 2016-09-06T08:39:24Z

May be slack? :)

On Tue, Sep 6, 2016, 11:35 binarious notifications@github.com wrote:

@Martin-Wegner https://github.com/Martin-Wegner Do you mind to join
https://gitter.im/valor-software/ng2-bootstrap/ and message me there?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#929 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk46xq2zJTbpDn7tKMJcq3XfX9sPvvks5qnSXVgaJpZM4J0_9X
.

binarious · 2016-09-06T09:36:25Z

I was able to create a repository to reproduce this error: https://github.com/binarious/ng2-bootstrap-testing
The details can be found in the README.md. The failing component is the following: https://github.com/binarious/ng2-bootstrap-testing/blob/master/src/app/about

Hope that helps.

Martin-Luft · 2016-09-06T12:49:15Z

Something it totally weird... The test from @binarious fails, if the DatapickerModule is imported. The error message

No provider for NgModel ("[ERROR ->]")

pointed to the template of PopupContainerComponent. This component is not declared inside the DatapickerModule. This template also uses show-weeks what is wrong. It must be showWeeks. I corrected this and ended up in the same error message...

…esent (#931) * try to fix #929 by importing FormsModule because the selectors use [ngModel] * export FormsModule in all modules which use ngModel selector binding because every template which uses such a module would anyway import FormsModul which is now no longer necessary fixes #929

binarious · 2016-09-06T14:23:31Z

@valorkin The PR #931 doesn't fix this issue. Please take a look at https://github.com/binarious/ng2-bootstrap-testing (+ README.md).

Martin-Luft · 2016-09-06T15:15:27Z

@valorkin I reopen this issue due to I wrote in my last comment...

Martin-Luft · 2016-09-08T17:23:06Z

@valorkin please have a look at #943

@binarious your about template is usingsingleModel and your component provides singleModle. You should fix that... But anyway the test still fails :(

Igonato · 2016-09-11T21:44:47Z

Can confirm. All you need is to include DatepickerModule in any imports: and tests will fail with the exact same error. Don't even need to add datepicker in any templates. Really weird behavior, where is this "template" that it tries to "parse"?

Igonato · 2016-09-11T22:56:21Z

Btw I was testing it with @Martin-Wegner 's #943 changes

Martin-Luft · 2016-09-12T08:50:46Z

There is no current documentation available for Angular 2 tesing: https://angular.io/docs/ts/latest/guide/testing.html

Therefore I have no idea how a spec-file should look like for testing components from modules...

Igonato · 2016-09-12T17:52:34Z

I made a repo with detailed steps how to reproduce the error, check it out:
https://github.com/Igonato/ng2-bootstrap-929 see the README and commits
I have a feeling that this may require an issue in angular/angular so it might be useful later.

Martin is right about the lack of documentation for testing so I used semi-official angular-cli to set up the project, let's hope doing so excludes set-up related problems from the probable cause options.

I'll try to narrow it down tomorrow. So far feels like ng2-bootstrap is innocent since the code looks fine and it works just fine in the browser and the test environment is somehow different which shouldn't be the case in a perfect world. Well, the world isn't perfect...

Martin-Luft · 2016-09-13T15:30:29Z

@Igonato any news on this?

Igonato · 2016-09-13T18:30:44Z

@Martin-Wegner not yet. Only now got some time

binarious · 2016-09-13T18:55:50Z

FYI: Same problem with Angular RC7.

Igonato · 2016-09-13T20:08:36Z

#963 should fix this

Seems like DI derps in the test environment and not able to resolve providers using the new NgModule system. For tests to pass components need to have providers field.

Martin-Luft · 2016-09-14T07:50:50Z

@Igonato thank you so much! Did you report this Issue to the Angular 2 team?

Igonato · 2016-09-14T09:05:40Z

Not yet. I'll play with it a bit more on the weekend, I want to reproduce it with minimum code before submitting it

valorkin · 2016-09-14T09:22:26Z

May be it related to: view providers not pushed to child components?

On Wed, Sep 14, 2016, 12:05 Ignat Shining notifications@github.com wrote:

Not yet. I'll play with it a bit more on the weekend, I want to reproduce
it with minimum code before submitting it

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#929 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk4-D0y5FRiksPq3Wtb5VAUKKPWLQmks5qp7jlgaJpZM4J0_9X
.

Igonato · 2016-09-14T10:42:31Z

@valorkin datepicker component isn't a child, it's top level in the datepicker module where forms module is imported, right?

valorkin · 2016-09-14T10:47:30Z

When you write a test you are creating a wrapper component, so this wrapper
is parent and datepicker is a child, correct?

On Wed, Sep 14, 2016, 13:42 Ignat Shining notifications@github.com wrote:

@valorkin https://github.com/valorkin datepicker component isn't a
child, it's top level in the datepicker module where forms module is
imported, right?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#929 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk47hia203DTmwPNOgwqkNyGrX046mks5qp8-ZgaJpZM4J0_9X
.

Igonato · 2016-09-14T10:49:50Z

Also, viewProviders are component-only anyway, you can't define them in NgModule, that's what imports are for, correct?

No, this is the thing, I don't need to add datepicker to any of my components, adding datepicker module to imports of my module is enough for the failure to happen

valorkin · 2016-09-14T10:51:41Z

Can you try to add ng model stuff to imports (providers)?

On Wed, Sep 14, 2016, 13:49 Ignat Shining notifications@github.com wrote:

Also, viewProviders are component-only anyway, you can't define them in
NgModule, that's what imports are for, correct?

No, this is the thing, I don't need to add datepicker to any of my
components, adding datepicker module to imports of my module is enough for
the failure to happen

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#929 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk41bPmyyqf43SWKrwfe5EBcjSnIopks5qp9FQgaJpZM4J0_9X
.

Igonato · 2016-09-14T10:54:56Z

I did, pretty much in all places you can think of :) same error happens

Martin-Luft · 2016-09-14T10:55:50Z

@Igonato I can feel your pain, because me did too :)

valorkin · 2016-09-14T15:04:50Z

should be fixed with #963

…esent (valor-software#931) * try to fix valor-software#929 by importing FormsModule because the selectors use [ngModel] * export FormsModule in all modules which use ngModel selector binding because every template which uses such a module would anyway import FormsModul which is now no longer necessary fixes valor-software#929

Martin-Luft mentioned this issue Sep 5, 2016

try to fix #929 by importing FormsModule because the selectors use [ngModel] #931

Merged

valorkin assigned Martin-Luft Sep 5, 2016

valorkin added the in progress label Sep 5, 2016

valorkin closed this as completed in #931 Sep 6, 2016

valorkin removed the in progress label Sep 6, 2016

Martin-Luft reopened this Sep 6, 2016

Martin-Luft mentioned this issue Sep 8, 2016

tidy up datepicker module #943

Closed

Igonato mentioned this issue Sep 13, 2016

fix(tests): "no provider" error when running tests #963

Merged

valorkin closed this as completed Sep 14, 2016

Martin-Luft mentioned this issue Sep 15, 2016

'No provider for NgModel' errors - RC7 #974

Closed

No provider for NgModel when running tests #929

No provider for NgModel when running tests #929

Comments

binarious commented Sep 5, 2016

Martin-Luft commented Sep 5, 2016

binarious commented Sep 5, 2016

binarious commented Sep 5, 2016

valorkin commented Sep 5, 2016

Martin-Luft commented Sep 5, 2016 • edited Loading

binarious commented Sep 5, 2016

Martin-Luft commented Sep 5, 2016 • edited Loading

binarious commented Sep 5, 2016

binarious commented Sep 5, 2016

Martin-Luft commented Sep 5, 2016

binarious commented Sep 5, 2016

Martin-Luft commented Sep 5, 2016

binarious commented Sep 5, 2016

binarious commented Sep 5, 2016

Martin-Luft commented Sep 5, 2016

binarious commented Sep 5, 2016

adrianfaciu commented Sep 6, 2016

Martin-Luft commented Sep 6, 2016

Martin-Luft commented Sep 6, 2016

binarious commented Sep 6, 2016

Martin-Luft commented Sep 6, 2016

binarious commented Sep 6, 2016

valorkin commented Sep 6, 2016

binarious commented Sep 6, 2016

Martin-Luft commented Sep 6, 2016 • edited Loading

binarious commented Sep 6, 2016 • edited Loading

Martin-Luft commented Sep 6, 2016

Martin-Luft commented Sep 8, 2016

Igonato commented Sep 11, 2016

Igonato commented Sep 11, 2016 • edited Loading

Martin-Luft commented Sep 12, 2016

Igonato commented Sep 12, 2016 • edited Loading

Martin-Luft commented Sep 13, 2016

Igonato commented Sep 13, 2016

binarious commented Sep 13, 2016

Igonato commented Sep 13, 2016

Martin-Luft commented Sep 14, 2016

Igonato commented Sep 14, 2016

valorkin commented Sep 14, 2016

Igonato commented Sep 14, 2016

valorkin commented Sep 14, 2016

Igonato commented Sep 14, 2016

valorkin commented Sep 14, 2016

Igonato commented Sep 14, 2016

Martin-Luft commented Sep 14, 2016

valorkin commented Sep 14, 2016

Martin-Luft commented Sep 5, 2016 •

edited

Loading

Martin-Luft commented Sep 5, 2016 •

edited

Loading

Martin-Luft commented Sep 6, 2016 •

edited

Loading

binarious commented Sep 6, 2016 •

edited

Loading

Igonato commented Sep 11, 2016 •

edited

Loading

Igonato commented Sep 12, 2016 •

edited

Loading