ERROR TypeError: _this._focusMonitor.monitor

[ThePatzen]

Bug, feature request, or proposal:

Bug

What is the current behavior?

I use Angular Universal with Angular 6.

On SSR i get the following error:
ERROR TypeError: _this._focusMonitor.monitor is not a function at MatAnchor.MatButton [as constructor] (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:176122:29) at new MatAnchor (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:176219:23) at createClass (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:14025:20) at createDirectiveInstance (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:13906:20) at createViewNodes (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:15128:36) at callViewAction (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:15444:13) at execComponentViewsAction (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:15363:13) at createViewNodes (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:15156:5) at Object.createEmbeddedView (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:15036:5) at TemplateRef_.createEmbeddedView (/home/mylehre_e-mx_at/mylehre/frontend/dist/server.js:13621:38)

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

Angular = 6.0.2,
Material = 6.0.2
OS = Ubuntu 16.04
TypeScript = 2.7.2

[fvoska]

This seems to be an issue with the way FocusMonitor is provided: https://github.com/angular/material2/blob/37193d823bf0ca205e187273af80c4597b8f2d86/src/cdk/a11y/focus-monitor/focus-monitor.ts#L40

In Angular 6 there is a new way of providing services, by using treeshakeable operator @Injectable({providedIn: 'root'}). This works fine in the browser. However, it does not seem to work correctly at all times with lazy-loaded modules and SSR / universal.

Temporary solution is to provide FocusMonitor in your app manually for server module:

@NgModule({
  imports: [
    ...
  ],
  providers: [
    FocusMonitor,
  ],
  bootstrap: [...],
})
export class AppServerModule { }

Providing it in AppServerModule is enough, there is no need to provide it in AppModule as it works fine in browser.

[fvoska]

Possibly related to this issue: angular/angular#23715

[anymos]

Great, thank you fro the workaround, It would have take me hours to find it out !

[anymos]

More on this issue, I have added the workaround. Strangely enough if I request / before the other url that is dynamically rendered and need the fix, the error is shown. If I do the opposite no error.

Just in case that it can be useful

[jelbourn]

Duplicate of #11603

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}