angular: Cannot read property 'createRenderer' of undefined

you can call nativeElement.focus() directly

create your own Renderer and implement it for different platforms:

abstract class MyRenderer {
    invokeElementMethod(el, method, args): any;
}

class MyDomRenderer implements MyRenderer {
   invokeElementMethod(el, method, args): any {
       // impl...
   }
}

For me it was a server change, but an easy way to test if the character set encoding is the problem is to use a chrome extension that lets you change the character set to UTF-8 (if it’s not that already).

I was able to fix this by just adding a <meta charset="utf-8"> tag. I don’t even need the replace fix with the tag in place.

Renderer is deprecated and will be removed in the next release. invokeElementMethod was removed because it wasn’t used by angular. See https://github.com/angular/angular/issues/13818 And there’s no replacement for it.

This custom service can help someone:

import { Injectable, PLATFORM_ID, Inject, ElementRef } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable()
export class Renderer {

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object
  ) { }

  invokeElementMethod(eleRef: ElementRef, method: string) {
    if (isPlatformBrowser(this.platformId)) {
      eleRef.nativeElement[method]();
    }
  }
}

I believe @SnareChops has discovered the bottom of this rabbit hole in #15638 !

@IgorMinar and @DzmitryShylovich

I have encountered this same error and have a reproduction to submit

I’m submitting a …

[x] bug report
[ ] feature request
[ ] support request

Current behavior

Application errors during bootstrap as shown below with a barebones angular application

Expected behavior

Application should bootstrap and display

Minimal reproduction of the problem with instructions

https://github.com/SnareChops/OverwatchAlgebra

npm install
npm run build:site
serve / open index.html in browser of your choosing using server of your choosing

Please tell us about your environment:

Mac OSX (10.12.3) Rollup IIFE Node 7.5.0

Angular version: 4.0.1

Browser: chrome (haven’t tested others)

Language: Typescript 2.2.1

Node (for AoT issues): node --version = 7.5.0

Error received

Application is barebones. Entire application code is:

@Component({
	selector: 'owa',
	template: `
		<p>Overwatch Algebra</p>
	`
})
export class MainComponent{}

@NgModule({
	declarations: [
		MainComponent
	],
	imports: [
		CommonModule,
		BrowserModule
	],
	schemas: [
		CUSTOM_ELEMENTS_SCHEMA
	],
	bootstrap: [
		MainComponent
	]
})
export class MainModule{}

platformBrowser().bootstrapModuleFactory(MainModuleNgFactory);

(of course in separate files and with relevant imports)