NullInjectorError for Renderer2

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[X] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I like to build my own UI library for Angular 5. I’ve oriented myself on Angular Material and tried to build a simple button Component. On compile time it works fine but when I use the library in a project I get the runtime error NullInjectorError: No provider for Renderer2

I have no idea what’s wrong. Do I have to import a special module or something? There is also no hint in the documentation for Renderer2.

Expected behavior

It should not raise an exception like in the material2 library.

Minimal reproduction of the problem with instructions

button.ts

import { FocusMonitor } from "@angular/cdk/a11y";
import { Platform } from "@angular/cdk/platform";
import { ChangeDetectionStrategy, Component, Directive, ElementRef, HostListener, OnDestroy, Renderer2, ViewEncapsulation } from "@angular/core";

/**
 * Base class for further classes.
 */
export class MyButtonBase {
    constructor(public _renderer: Renderer2, public _elementRef: ElementRef) { }
}

@Component({
    moduleId: module.id,
    selector: "button[my-button], button[my-secondary-button]",
    exportAs: "myButton",
    host: {
        "[disabled]": "disabled || null",
    },
    templateUrl: "button.html",
    styleUrls: ["button.css"],
    inputs: ["disabled"],
    encapsulation: ViewEncapsulation.None,
    preserveWhitespaces: false,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyButton extends MyButtonBase implements OnDestroy {

    constructor(renderer: Renderer2, elementRef: ElementRef, private _platform: Platform, private _focusMonitor: FocusMonitor) {
        super(renderer, elementRef);
        this._focusMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
    }

    public ngOnDestroy(): void {
        this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
    }

    public focus(): void {
        this.getHostElement().focus();
    }

    private getHostElement(): any {
        return this._elementRef.nativeElement;
    }
}

Button.module.ts

import { A11yModule } from "@angular/cdk/a11y";
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";

import { MyButton } from "./button";

@NgModule({
	imports: [
		CommonModule,
		A11yModule
	],
	exports: [
		MyButton
	],
	declarations: [
		MyButton
	],
})
export class MyButtonModule { }

What is the motivation / use case for changing the behavior?

My motivation is to implement an own UI library to understand material2 better. So I oriented myself on material2. They got this to work in my library it didn’t. I’d like to know why this problem occurs.

Environment

Angular version: X.Y.Z
Angular CLI: 1.5.0
Node: 8.9.0
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/language-service: 4.4.6
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.3
typescript: 2.4.2
webpack: 3.8.1

Browser:
- [X] Chrome (desktop) version 56.0.2924.87
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version 57.0 (64-Bit)
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.9.0
- Platform:  win32 x64

Others:

[trotyl]

@AlejandroMoran If you’re using Angular CLI, try --preserve-symlinks option.

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