Angular 2.0.0-rc.1 no longer exports BrowserDomAdapter

[rn1d]

Prior to Angular 2.0.0-rc.0, it was possible to import and use BrowserDomAdapter in the application. Seems like it is no longer exported from @angular/platform-browser. Is this intentional or a bug?

Originally, I asked the question on StackOverflow: http://stackoverflow.com/questions/37068937/accessing-dom-in-angular-2-rc

Is there an API that should be used instead?

[mprobst]

Could you just implement DomAdapter?

[Cowlephant]

Dealing with this issue myself. Where is DomAdapter? I've used BrowserDomAdapter a lot because everything said to use it.

[mprobst]

I spoke to soon, DomAdapter isn't exported either.

The disappearing BrowserDomAdapter is an accidental side effect of @IgorMinar's big package refactoring in a66cdb4. That also seems to have disabled the former API test.

[naveedahmed1]

Martin can you please also check AnimationBuilder, it seems this has also been removed. The below line doesn't work anymore:

import {AnimationBuilder} from 'angular2/src/animate/animation_builder';

[mprobst]

@naveedahmed1 'angular2/src/animate/... should be @angular/platform-browser, but I think the export for AnimationBuilder also got accidentally removed.

[naveedahmed1]

Ok, thank you Martin for the information. It seems currently the beta 17 is more stable than RC1.

[Falx]

Are there any reasons to use BrowserDomAdapter in favor for plain js document ?

[mprobst]

@Falx document works as long as you don't render on the server side. But beware of XSS bugs!

[Falx]

@mprobst Ok thanks, because I removed BrowserDomAdapter when I saw it wasn't exported anymore, in favor of document. But I seems it would be better to add it in again, once fixed.

[Cowlephant]

So is using document fine then? I thought we encouraged to not use it in favor of browserdomadapter

[IgorMinar]

DomAdapter, BrowserDomAdapter and Parse5DomAdapter are just implementation details and should not be used as public apis. This is why you can't find it any more in the public api surface.

If you need access to document then you can inject it via the DOCUMENT token. If you don't care about DI then you can access it directly. If you are using web workers and want to render stuff into dom then you should be implementing a custom renderer.

[zoechi]

@IgorMinar any pointer how to create and provide a custom renderer for different platforms (browser, webworker, server, ...)

[Elvynia]

@IgorMinar I was using requestAnimationFrame(callback): number which was handy and it's still only available through DomAdapter. If dom adapters are kept in the private API, will it be accessible from elsewhere ?

[zoechi]

@Elvynia it's in the private API only because it is not supposed to be used outside Angular itself.

[Elvynia]

@zoechi Sure I get it. I'm calling requestAnimationFrame directly in my component now and it works. But I think the implementation in DomAdapter support all browsers with the right polyfills and it was helpful.

[mprobst]

@Elvynia nope, DomAdapter is not a polyfill, it just calls into the browser APIs directly. It's purpose is to abstract between actual browsers, a virtual DOM in NodeJS on the server side, and Dart APIs.

[zoechi]

@mprobst AFAIK this is necessary for custom code to be compatible with server side rendering and webworker.
I have seen this question dozens of times and when there was an answer it was one of

• don't access the DOM directly
• don't use BrowserDomAdapter it's only for internal use
• use a custom renderer

It would be great if someone could point out how to implement and provide a custom renderer.

[Cowlephant]

@IgorMinar When trying to use DOCUMENT it says cannot find name DOCUMENT. How exactly is it supposed to be used to replace what BrowserDomAdapter accomplished? Stackoverflow and articles on previous version of Angular 2 have been riddled with advice of using BrowserDomAdapter and it's hard to find the proper way to do the alternatives.

[IgorMinar]

this should do the trick:

import {Inject, Component} from "@angular/core";
import {DOCUMENT} from "@angular/platform-browser";

@Component(...)
class MyComponent(@Inject(DOCUMENT) doc) {}

On Wed, Jun 8, 2016 at 11:58 AM twilliamsgsnetx notifications@github.com
wrote:

@IgorMinar https://github.com/IgorMinar When trying to use DOCUMENT it
says cannot find name DOCUMENT. How exactly is it supposed to be used to
replace what BrowserDomAdapter accomplished?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#8509 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AANM6EhW74-El7YYbTZ6yJPJl9qCogSUks5qJxDFgaJpZM4IY7C5
.

[Falx]

@twilliamsgsnetx So I had the same problem as you. This is how I figured it out (since documentation is not complete yet). As you can see here: DOCUMENT is an OpaqueToken. I searched for that concept and found out that it is a mechanism to have a handle to inject something that you would normally name with a String. Since if you have multiples of that, they all have the same type (String) and DI would not be able to deduce which provider to use for that type.
By using the @Inject syntax you can use this DOCUMENT token with Dependency Injection.

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({})
export class MyClass {

    constructor (@Inject(DOCUMENT) private document) { }

    doSomething() {
        this.document.someMethodOfDocument();
    }
}

[Falx]

Ah it seems @IgorMinar beat me to it ;-P

[thekalinga]

@zoechi Did you get answer for your question?

Tho you can access document object using the above method, you cant do the same for window (or can you?)

I was trying to get the computed value of a native element using window.getComputedStyle(elementRef.nativeElement) & am left with no option other than accessing window object directly.

Does anyone know any better solution other than accessing window directly?

I have posted the question here

[matheo]

@IgorMinar What's the way to access the document with AoT?
DOCUMENT is not provided in this scenario and injecting it into platformBrowser with:

let providers = [
  ...
  { provide: DOCUMENT, useValue: document }
];
const options = { providers };
platformBrowser(<Provider[]>options.providers).bootstrapModuleFactory(AppModuleNgFactory)

doesn't work. A custom renderer is needed? TIA

[angular-automatic-lock-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.}