ERROR TypeError: _this._focusMonitor.monitor

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.

[angular-automatic-lock-bot[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.}