SSR Error: inject() must be called from an injection context

[patrickmichalina]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Render a mat-primary-button

What is the current behavior?

Fails to render on server, generating a Error: inject() must be called from an injection context error

What are the steps to reproduce?

Add material module to this repo and add a button to a random page

https://github.com/patrickmichalina/fusing-angular

Works fine on client, not server.

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

To work on the server

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

"@angular/animations": "6.0.0-rc.0",
"@angular/cdk": "^6.0.0-beta.5",
"@angular/common": "6.0.0-rc.0",
"@angular/compiler": "6.0.0-rc.0",
"@angular/compiler-cli": "6.0.0-rc.0",
"@angular/core": "6.0.0-rc.0",
"@angular/forms": "6.0.0-rc.0",
"@angular/http": "6.0.0-rc.0",
"@angular/material": "^6.0.0-beta.5",
"@angular/platform-browser": "6.0.0-rc.0",
"@angular/platform-browser-dynamic": "6.0.0-rc.0",
"@angular/platform-server": "6.0.0-rc.0",
"@angular/router": "6.0.0-rc.0",
"@angular/service-worker": "6.0.0-rc.0",

Node 9.9.0

[josephperrott]

This is likely an issue with your setup as we have a SSR test app which successfully builds and serves. Additionally, inject/the Injector are both not directly used in MatButton.

Without more context of the Error stack there is not much more I can reason about it at this point.

[patrickmichalina]

@josephperrott OK I can try to figure it out, but FYI, mat v5.1.1 works fine.

[julianobrasil]

@patrickmichalina, there are somethings you can check:

1. have you deleted node_modules folder and package-lock.json before npm install?
2. have you upgraded rxjs to 6.0.0-beta.1?

[patrickmichalina]

Sorry for the poor formatting but I have the following error when running rc-0. Version 5.1.1 is the last version of material I can get to run well in universal.

,"msg":"{ Error: inject() must be called from an injection context\n    at Object.inject (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/di/injector.js:373:15)\n    at Directionality_Factory (/Users/Patrick/Repos/fusing-angular/node_modules/@angular/cdk/bundles/cdk-bidi.umd.js:73:157)\n    at _callFactory (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/ng_module.js:162:20)\n    at _createProviderInstance$1 (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/ng_module.js:128:26)\n    at resolveNgModuleDep (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/ng_module.js:88:17)\n    at NgModuleRef_.get (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/refs.js:484:16)\n    at resolveDep (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/provider.js:353:45)\n    at createClass (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/provider.js:233:32)\n    at createDirectiveInstance (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/provider.js:110:20)\n    at createViewNodes (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/view.js:275:36)\n    at createEmbeddedView (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/view.js:183:5)\n    at callWithDebugContext (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/services.js:614:25)\n    at Object.debugCreateEmbeddedView [as createEmbeddedView] (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/services.js:115:12)\n    at TemplateRef_.createEmbeddedView (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/refs.js:321:38)\n    at ViewContainerRef_.createEmbeddedView (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/refs.js:186:35)\n    at NgIf._updateView (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/common/common.esm5/packages/common/src/directives/ng_if.js:143:45)\n  ngDebugContext: \n   DebugContext_ {\n     view: \n      { def: [Object],\n        parent: [Object],\n        viewContainerParent: null,\n        parentNodeDef: [Object],\n        context: [NgIfContext],\n        component: [AppComponent],\n        nodes: [Array],\n        state: 13,\n        root: [Object],\n        renderer: [DebugRenderer2],\n        oldValues: [Array],\n        disposables: [Array],\n        initIndex: -1 },\n     nodeIndex: 1,\n     nodeDef: \n      { nodeIndex: 1,\n        parent: [Object],\n        renderParent: [Object],\n        bindingIndex: 1,\n        outputIndex: 0,\n        checkIndex: 1,\n        flags: 1490944,\n        childFlags: 872415232,\n        directChildFlags: 872415232,\n        childMatchedQueries: 0,\n        matchedQueries: {},\n        matchedQueryIds: 0,\n        references: {},\n        ngContentIndex: -1,\n        childCount: 2,\n        bindings: [],\n        bindingFlags: 0,\n        outputs: [],\n        element: null,\n        provider: [Object],\n        text: null,\n        query: null,\n        ngContent: null },\n     elDef: \n      { nodeIndex: 0,\n        parent: null,\n        renderParent: null,\n        bindingIndex: 0,\n        outputIndex: 0,\n        checkIndex: 0,\n        flags: 33554433,\n        childFlags: 926924803,\n        directChildFlags: 35045377,\n        childMatchedQueries: 10,\n        matchedQueries: {},\n        matchedQueryIds: 0,\n        references: {},\n        ngContentIndex: null,\n        childCount: 70,\n        bindings: [Array],\n        bindingFlags: 2,\n        outputs: [],\n        element: [Object],\n        provider: null,\n        text: null,\n        query: null,\n        ngContent: null },\n     elView: \n      { def: [Object],\n        parent: [Object],\n        viewContainerParent: null,\n        parentNodeDef: [Object],\n        context: [NgIfContext],\n        component: [AppComponent],\n        nodes: [Array],\n        state: 13,\n        root: [Object],\n        renderer: [DebugRenderer2],\n        oldValues: [Array],\n        disposables: [Array],\n        initIndex: -1 } },\n  ngErrorLogger: [Function: bound ] }","time":"2018-04-01T06:43:17.898Z","v":0}

Error: inject() must be called from an injection context
    at Object.inject (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/di/injector.js:373:15)
    at FocusMonitor_Factory (/Users/patrick/Code/fusing-angular/node_modules/@angular/cdk/bundles/cdk-a11y.umd.js:2291:151)
    at _callFactory (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/ng_module.js:162:20)
    at _createProviderInstance$1 (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/ng_module.js:128:26)
    at resolveNgModuleDep (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/ng_module.js:88:17)
    at NgModuleRef_.get (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/refs.js:484:16)
    at resolveDep (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/provider.js:353:45)
    at createClass (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/provider.js:229:141)
    at createDirectiveInstance (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/provider.js:110:20)
    at createViewNodes (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/view.js:275:36)
    at callViewAction (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/view.js:591:13)
    at execComponentViewsAction (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/view.js:510:13)
    at createViewNodes (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/view.js:303:5)
    at callViewAction (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/view.js:591:13)
    at execComponentViewsAction (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/view.js:510:13)
    at createViewNodes (/execroot/angular/bazel-out/darwin-fastbuild/bin/packages/core/core.esm5/packages/core/src/view/view.js:303:5)

[leo6104]

I got same error on SSR.

Angular CLI: 6.0.0-beta.8
Node: 8.9.1
OS: darwin x64
Angular: 6.0.0-rc.1
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

@angular/cdk: 6.0.0-rc.0
@angular/cli: 6.0.0-beta.8
@angular/material: 6.0.0-rc.0
@angular-devkit/architect: 0.0.9
@angular-devkit/build-angular: 0.0.9
@angular-devkit/build-optimizer: 0.4.8
@angular-devkit/core: 0.4.8
@angular-devkit/schematics: 0.4.8
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 6.0.0-beta.8
@schematics/angular: 0.4.8
@schematics/update: 0.4.8
typescript: 2.7.2
webpack-cli: 2.0.13
webpack: 4.1.0

There is no problem with material2, cdk 5.2.4 version.
This problem only occurs on angular/material2 6.0.0-xxx. (i did this test to 6.0.0-beta.5, 6.0.0-rc.0)

In summary,
Angular <=6.0.0-beta.4 and angular/material2, angular/cdk 6.0.0-rc.0 works.
Angular > 6.0.0-beta.4 and angular/material2, angular/cdk 6.0.0-rc.0 not works.
Angular > 6.0.0-beta.4 and angular/material2, angular/cdk 5.2.4 works.

It might be related with angular 6.0.0 changes.

[julianobrasil]

I had problems with angular/cli beta.8. I'm currently using beta.5.

[vikerman]

This somehow seems to happen on second SSR render call in an example app I'm working with. Debugging...

[vikerman]

This should be fixed with the next Angular 6 RC

[patrickmichalina]

@vikerman thank you!