Ngx-bootstrap: No provider for NgModel when running tests

Created on 5 Sep 2016 · 46Comments · Source: valor-software/ngx-bootstrap

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.

Source

binarious

All 46 comments

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

Martin-Wegner on 5 Sep 2016

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

binarious on 5 Sep 2016

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

binarious on 5 Sep 2016

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

valorkin on 5 Sep 2016

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.

Martin-Wegner on 5 Sep 2016

👍1

Any idea for a workaround?

binarious on 5 Sep 2016

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

Martin-Wegner on 5 Sep 2016

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

binarious on 5 Sep 2016

👍1

Unfortunately I'm getting the same error.

binarious on 5 Sep 2016

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

Martin-Wegner on 5 Sep 2016

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

binarious on 5 Sep 2016

In every component? You mean in every module or?

Martin-Wegner on 5 Sep 2016

Sorry, right. In every module.

binarious on 5 Sep 2016

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

binarious on 5 Sep 2016

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

Martin-Wegner on 5 Sep 2016

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

binarious on 5 Sep 2016

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.

adrianfaciu on 6 Sep 2016

👍1

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

Martin-Wegner on 6 Sep 2016

I have improved my PR #931

Martin-Wegner on 6 Sep 2016

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

binarious on 6 Sep 2016

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

Martin-Wegner on 6 Sep 2016

👍1

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

binarious on 6 Sep 2016

👍1

May be slack? :)

On Tue, Sep 6, 2016, 11:35 binarious [email protected] 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
https://github.com/valor-software/ng2-bootstrap/issues/929#issuecomment-244885594,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk46xq2zJTbpDn7tKMJcq3XfX9sPvvks5qnSXVgaJpZM4J0_9X
.

valorkin on 6 Sep 2016

👍1

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.

binarious on 6 Sep 2016

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

Martin-Wegner on 6 Sep 2016

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

binarious on 6 Sep 2016

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

Martin-Wegner on 6 Sep 2016

@valorkin please have a look at https://github.com/valor-software/ng2-bootstrap/pull/943

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

Martin-Wegner on 8 Sep 2016

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 on 11 Sep 2016

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

Igonato on 12 Sep 2016

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

Martin-Wegner on 12 Sep 2016

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

Igonato on 12 Sep 2016

👍1

@Igonato any news on this?

Martin-Wegner on 13 Sep 2016

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

Igonato on 13 Sep 2016

FYI: Same problem with Angular RC7.

binarious on 13 Sep 2016

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.

Igonato on 13 Sep 2016

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

Martin-Wegner on 14 Sep 2016

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

Igonato on 14 Sep 2016

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

On Wed, Sep 14, 2016, 12:05 Ignat Shining [email protected] 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
https://github.com/valor-software/ng2-bootstrap/issues/929#issuecomment-246951118,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk4-D0y5FRiksPq3Wtb5VAUKKPWLQmks5qp7jlgaJpZM4J0_9X
.

valorkin on 14 Sep 2016

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

Igonato on 14 Sep 2016

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 [email protected] 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
https://github.com/valor-software/ng2-bootstrap/issues/929#issuecomment-246973978,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk47hia203DTmwPNOgwqkNyGrX046mks5qp8-ZgaJpZM4J0_9X
.

valorkin on 14 Sep 2016

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

Igonato on 14 Sep 2016

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

On Wed, Sep 14, 2016, 13:49 Ignat Shining [email protected] 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
https://github.com/valor-software/ng2-bootstrap/issues/929#issuecomment-246975631,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk41bPmyyqf43SWKrwfe5EBcjSnIopks5qp9FQgaJpZM4J0_9X
.