Components: [Table] Throw error if MatSortModule is not imported while using "MatSort/matSort"

[WizardPC]

Bug, feature request, or proposal

Proposal

What is the expected behavior?

Using @ViewChild(MatSort) sort: MatSort; and <mat-table [dataSource]="dataSource" matSort> without import { MatSortModule } from '@angular/material'; will throw an error like some other material component (if i remember it's something like "you need to import xxxx....")

What is the current behavior?

Nothing, the sorting arrows are just not displayed (and sorting doesn't work)

What are the steps to reproduce?

Just remove the MatSortModule :
https://stackblitz.com/angular/voqnaoexppp?file=main.ts

What is the use-case or motivation for changing an existing behavior?

I lost many hours on this... i take some code from my stackblitz to my main project and continue developping, but after a moment i see sorting doesn't work anymore without errors in the console... I search, scratch my head, and finally reverse my code to the beginning but still not working !

Finally i found solution online, import MatSortModule... so depressing :(

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest

Is there anything else we should know?

I know it's my fault, but without error it's difficult to find this.

[Mathem8tic]

Just spent an hour trying to find this out myself...doh! Just had to import the MatSortModule as described.

[WizardPC]

It's not the time lost which is important, but it's can be avoided! And others will not have the same headache.

[Mathem8tic]

I'm just happy you posted this, I would have been down the rabbit hole for quite a bit longer given the fact there were no errors occurring.

[WizardPC]

You're welcome :) I hope matSort can be improved with this.

[tzachs]

Once I added the'import {MatSortModule} from '@angular/material';

I get the following error

ERROR Error: Uncaught (in promise): HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at DefaultDomRenderer2.webpackJsonp../node_modules/@angular/platform-browser/esm5/platform-browser.js.DefaultDomRenderer2.appendChild (platform-browser.js:2760)
    at AnimationRenderer.webpackJsonp../node_modules/@angular/platform-browser/esm5/animations.js.BaseAnimationRenderer.appendChild (animations.js:457)
    at DebugRenderer2.webpackJsonp../node_modules/@angular/core/esm5/core.js.DebugRenderer2.appendChild (core.js:15264)
    at createElement (core.js:10587)
    at createViewNodes (core.js:13745)
    at callViewAction (core.js:14218)
    at execComponentViewsAction (core.js:14127)
    at createViewNodes (core.js:13812)
    at callViewAction (core.js:14218)
    at execComponentViewsAction (core.js:14127)
    at DefaultDomRenderer2.webpackJsonp../node_modules/@angular/platform-browser/esm5/platform-browser.js.DefaultDomRenderer2.appendChild (platform-browser.js:2760)
    at AnimationRenderer.webpackJsonp../node_modules/@angular/platform-browser/esm5/animations.js.BaseAnimationRenderer.appendChild (animations.js:457)
    at DebugRenderer2.webpackJsonp../node_modules/@angular/core/esm5/core.js.DebugRenderer2.appendChild (core.js:15264)
    at createElement (core.js:10587)
    at createViewNodes (core.js:13745)
    at callViewAction (core.js:14218)
    at execComponentViewsAction (core.js:14127)
    at createViewNodes (core.js:13812)
    at callViewAction (core.js:14218)
    at execComponentViewsAction (core.js:14127)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Any one got this also?

[Mathem8tic]

Did you add the import to the app.module.ts?

[tzachs]

Yes. It seems like something with the animations?

[tzachs]

I found now it's something related to my data, meaning, i have 5 columns, and the sorting works okay on 2 of them :-/

[Mathem8tic]

Makes sense based on the error.

[andrewseguin]

Not totally sure what could be done here. This is a broader issue than just MatSort, since any directive that you forget to import will do this as well. For example, if you try to use <button mat-button> without adding the MatButtonModule, it will silently fail. This will happen for any attribute directive.

Is there anything we can add to the docs that would help users remember that using a Material component requires its respective module?

[WizardPC]

@andrewseguin and the type "MatSort" in component.ts?

[vimalraj-a]

With issue I cannot use mat-table with matSort in lazy loaded modules. Any workaround for this issue?

[razvanm]

In came here because I hit the error @tzachs reported above:

```
ERROR Error: Uncaught (in promise): HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
````

In my case the issues was that, by accident, I was placing the mat-sort-header inside the ng-container that preceded the th where was suppose to go.

[jayricx]

@razvanm, you save me much time. after reading your comment, I checked my code and found that I did exactly the same and accidentally placed the mat-sort-header in the ng-container.

[GauravKohirkar]

@razvanm exactly right.. Thanks for this one

[Narref95]

@razvanm Oh my god! I accidentally placed the mat-sort-header in the ng-container. Thanks!

[george-i]

Is so strange that the common error everyone encounters is to place the mat-sort-header inside the ng-container that preceded the th where was suppose to go.
Thanks @razvanm

[jelbourn]

Closing this since there's not really anything we can do about it- any unknown/custom attribute is valid HTML, and we don't have any way of knowing which selectors belong to a directive without the NgModule for that directive in the first place.