NativeScript document.createElement is not a function

Question

I am trying to reproduce the height animation that is avalible in this repo :

https://github.com/alexziskind1/tnsheightanimationdemo

Here below is my component :

import { Component } from "@angular/core";
import { Observable, Scheduler } from "rxjs";
import { Label } from 'ui/label';

import 'rxjs/observable/defer'
import 'rxjs/scheduler/animationFrame';
import 'rxjs/observable/interval'

const timeElapsed = Observable.defer(() => {
    const start = Scheduler.animationFrame.now();
    return Observable.interval(1)
        .map(() => Math.floor((Date.now() - Date.now())));
});

const duration = (totalMs) =>
    timeElapsed
        .map(elapsedMs => elapsedMs / totalMs)
        .takeWhile(t => t <= 1);

const amount = (d) => (t) => t * d;

const elasticOut = (t) =>
    Math.sin(-13.0 * (t + 1.0) *
        Math.PI / 2) *
    Math.pow(2.0, -10.0 * t) +
    1.0;

@Component({
    selector: "ns-app",
    template: `
        <StackLayout class="wrapper" (tap)="onTap($event)">
            <Label class="thelabel1" text="Hello" [height]="blah$ | async"></Label>
            <Label class="thelabel2" text="Hello" [height]="blah$ | async"></Label>
        </StackLayout>
    `,
    styles: [
        `

        `
})

    export class TestComponent {
        blah$: Observable<number> = Observable.of(25);
        onTap() {
            this.blah$ = duration(2000)
                .map(elasticOut)
                .map(amount(150));
        }
    }

Once the application is executed, I got the following error message :

TypeError: document.createElement is not a function File: "file:///data/data/org.nativescript.PocDigitalLab/files/app/tns_modules/rxjs/util/Immediate.js, line: 56, column: 68.

Any help is very appreciated.

Marek Maszay · Accepted Answer · 2018-05-17 13:43:05Z

2

Like written in issue here https://github.com/NativeScript/nativescript-angular/issues/1137

Try change import { Observable, Scheduler } from "rxjs"; like this

import { Observable} from "rxjs/Observable";
import { Scheduler } from "rxjs/Scheduler";

EDIT: error is from importing from rxjs can cause importing browser DOM related stuff

answered May 17, 2018 at 13:43

Marek Maszay

1,5571 gold badge9 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MadNeox Over a year ago

Thank you for your answer. I did this trick before posting the issue. That doesn't resolve the problem as I am getting error from TypeScript that defer, animationFrame and Interval are not defined in "rxjs/Scheduler" and "rxjs/Observable". I am using "rxjs": "~5.5.2"

Marek Maszay Over a year ago

Yea cause others are from imports like you have written in code @MadNeox i only write about this import import { Observable, Scheduler } from "rxjs"; not others

MadNeox Over a year ago

Thank you for ur answer and time dude . Much apreciated. To sum up, Cannot use "rxjs/Observable"; because there is no definition of these methods / properties. Even with the import ( i.e. "import 'rxjs/observable/defer' "), I got TypeScript error complilation.

Collectives™ on Stack Overflow

NativeScript document.createElement is not a function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related