error upgrading angular2 beta-15 -> beta-17

Question

I had an app running on Angular2 beta-15, but then I updated it to beta-17 and now there is an error hard to decipher.

EXCEPTION: Can only add to a TokenMap! Token: ElementRef angular2.dev.js:25654
EXCEPTION: Can only add to a TokenMap! Token: ElementRef angular2.dev.js:25644:9

Object { message: "Can only add to a TokenMap! Token: …", stack: "BaseException@http://localhost:3000…" } boot.js:25:107

EXCEPTION: Error: Uncaught (in promise): Can only add to a TokenMap! Token: ElementRef angular2.dev.js:25654
EXCEPTION: Error: Uncaught (in promise): Can only add to a TokenMap! Token: ElementRef angular2.dev.js:25644:9

STACKTRACE: angular2.dev.js:25644:9

resolvePromise@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:564:32
scheduleResolveOrReject/<@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:600:18
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:382:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:2181:22
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:381:24
Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:282:29
drainMicroTaskQueue@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:500:26
ZoneTask/this.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:452:22
 angular2.dev.js:25644:9

Unhandled Promise rejection: Can only add to a TokenMap! Token: ElementRef ; Zone: angular ; Task: Promise.then ; Value: Object { message: "Can only add to a TokenMap! Token: …", stack: "BaseException@http://localhost:3000…" } angular2-polyfills.js:487:14

Error: Uncaught (in promise): Can only add to a TokenMap! Token: ElementRef
Stack trace:
resolvePromise@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:564:32
scheduleResolveOrReject/<@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:600:18
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:382:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:2181:22
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:381:24
Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:282:29
drainMicroTaskQueue@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:500:26
ZoneTask/this.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:452:22
 angular2-polyfills.js:489:10

Had a similar error regarding `ElementRef`. Had to switch it out for a `ViewContainerRef`. You should check your code for occurrences of `ElementRef`. Constructors / Functions which handle with it might have changed regarding their params. — malifa, May 02 '16 at 22:11

Günter Zöchbauer · Accepted Answer · 2016-05-04T10:43:44.057

0

If you are using DynamicComponentLoader usage has changed to

export class DclWrapper {
  // get `ViewContainerRef` using `@ViewChild()` or by injecting it 
  // if the component itself should be the target
  @ViewChild('target', {read: ViewContainerRef}) target;
  @Input() type;
  cmpRef:ComponentRef;
  private isViewInitialized:boolean = false;

  constructor(private dcl:DynamicComponentLoader) {}

  updateComponent() {
    // should be executed every time `type` changes but not before `ngAfterViewInit()` was called 
    // to have `target` initialized
    if(!this.isViewInitialized) {
      return;
    }
    if(this.cmpRef) {
      throw 'currently changing type after the component was added is not supported'
    }
    // LoadIntoLocation was renamed and now takes a `ViewContainerRef`
    // instead of `ElementRef` and `target`
    this.dcl.loadNextToLocation(this.type, this.target).then((cmpRef) => {
      this.cmpRef = cmpRef;
    });
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();  
  }
}

edited May 04 '16 at 10:43

answered May 03 '16 at 04:37

Günter Zöchbauer

623,577
216
2,003
1,567

In my case I'm not using any DynamicComponentLoader – Sergio May 03 '16 at 19:02
Are you using 3rd party components that aren't yet compatible with the new Angular version? – Günter Zöchbauer May 03 '16 at 19:05
The only 3rd party is primeng but it is compatible with latest beta17 – Sergio May 03 '16 at 19:08
I got the same error when calling loadNextToLocation, `DynamicComponentLoader is undefined`. How can use `loadNextToLocation`? – ThuyNguyen May 04 '16 at 10:42
Did you import it from `angular2/core`? – Günter Zöchbauer May 04 '16 at 10:43
yes I did, If I use `ElementRef.loadNextToLocation`, an error occurs `Error: Uncaught (in promise): TypeError: location.createComponent is not a function` – ThuyNguyen May 04 '16 at 11:02
Why would you do that anyway? – Günter Zöchbauer May 04 '16 at 11:03
I just try, because I see `loadNextToLocation` in `ElementRef` :), I need touse `loadNextToLocation` in my component – ThuyNguyen May 04 '16 at 11:07
You need to use `DynamicComponentLoader` If you don't want to target an element in your view but the component itself, then inject `ViewContainerRef` by the constructor instead of `@ViewChild()` – Günter Zöchbauer May 04 '16 at 11:09
But, when I import DynamicComponentLoader from 'angular2/core', and use it, an error occurs is `DynamicComponentLoader undefined`. This is a problem after I upgraded. – ThuyNguyen May 04 '16 at 11:19
There seems to be something wrong in your project. I can't see that from the info in your question. http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 contains a link to a working Plunker example. – Günter Zöchbauer May 04 '16 at 11:35

error upgrading angular2 beta-15 -> beta-17

1 Answers1