[v5.2.5] Error when using mixinColor

Bug, feature request, or proposal:

When using the mixinColor like it is used in MatToolbar, my browsers throw errors.

What is the expected behavior?

No errors.

What is the current behavior?

When I use mixinColor like in MatToolbar, I get these errors when running my app in AOT (I also tried JIT):

Google Chrome 64-bit version 66.0 on Windows:

my-material.component.html:5 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at MyMaterialComponent.set [as color] (core.es5.js:277)
    at updateProp (core.js:12661)
    at checkAndUpdateDirectiveInline (core.js:12368)
    at checkAndUpdateNodeInline (core.js:13935)
    at checkAndUpdateNode (core.js:13878)
    at debugCheckAndUpdateNode (core.js:14771)
    at debugCheckDirectivesFn (core.js:14712)
    at Object.eval [as updateDirectives] (my-material.component.html:5)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)

Firefox Quantum 64-bit version 59.0.2 on Windows:

Error: this._elementRef is undefined
Error: cyclic object value

Edge version 16.16299:

ERROR TypeError: Unable to get property 'nativeElement' of undefined or null reference
ERROR TypeError: Circular reference in value argument not supported

What are the steps to reproduce?

Here’s a StackBlitz illustrating the problem and throwing the error: https://stackblitz.com/edit/angular-material-theme-palette?file=app/ui/my-material/my-material.component.ts

Component model

import {
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  ViewEncapsulation,
} from '@angular/core';
import { CanColor, mixinColor } from '@angular/material';

export class MyMaterialBase {
    constructor(public _elementRef: ElementRef) { }
}

export const _MyMaterialMixinBase = mixinColor(MyMaterialBase);

@Component({
    selector: 'my-material',
    styleUrls: ['my-material.component.scss'],
    templateUrl: 'my-material.component.html',
    host: {
        'class': 'my-material',
    },
    inputs: ['color'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    preserveWhitespaces: false,
})
export class MyMaterialComponent
extends _MyMaterialMixinBase
implements CanColor {}

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

Some documentation on using mixinColor would be nice.

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

Angular version 5.2.10 Angular Material version 5.2.5 TypeScript version 2.6.2 (when trying it out on localhost, I am not sure of StackBlitz)

Is there anything else we should know?

You are doing a great job!

[jelbourn]

It’s because the component has a dynamic base class due to the mixin, which Angular can’t resolve statically, so it doesn’t know do inject the dependencies of the base class.

FYI, the mixins aren’t intended to be a public API (that’s why they’re undocumented).

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