Nativescript-cli: Preview option is not working with the short imports like "ui/page"

Created on 19 Nov 2018  路  4Comments  路  Source: NativeScript/nativescript-cli

Describe the bug
It's not possible to access "ui/page" in preview context (tns preview --bundle). No problem with local emulators or build.

The folowing error is triggered :

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[SignInComponent -> Page]:
at NullInjector.get (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1142:23) [angular]
at resolveToken (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1380:28) [angular]
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
at StaticInjector.get (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1221:24) [angular]
at tryResolveToken (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1324:20) [angular]
NullInjectorError: No provider for Page!
StaticInjectorError(Platform: core)[SignInComponent -> Page]:
at resolveToken (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:1380:28) [angular]
Error: NullInjectorError: No provider for Page!
at tryResolveToken (file:///data/data/org.nativescrip... 

To Reproduce

import { Component, OnInit } from "@angular/core";
import { Page } from "ui/page";

@Component({
    selector: "app-sign-in",
    templateUrl: "./sign-in.component.html",
    styleUrls: ["./sign-in.component.scss"],
    moduleId: module.id,
})
export class SignInComponent implements OnInit {
    constructor(private page: Page) {}

    public ngOnInit() {
        // Hide the action bar
        this.page.actionBarHidden = true;
    }
}
question

Most helpful comment

@jbarnabe the preview option is not working with the short imports - in fact, we are currently promoting using the full import path in the kind of tns-core-modules/ui/page so that all apps will be compatible with Webpack without having to do any additional work in the webpack config files.

So for anyone interested in this issue - use the full imports in your app by explicitly including tns-core-modules for each NativeScript's component.

All 4 comments

@jbarnabe change the import import { Page } from "ui/page";

to

import { Page } from "tns-core-modules/ui/page";

@NickIliev thx, this works perfectly, I didn't think about it 馃檮

@jbarnabe the preview option is not working with the short imports - in fact, we are currently promoting using the full import path in the kind of tns-core-modules/ui/page so that all apps will be compatible with Webpack without having to do any additional work in the webpack config files.

So for anyone interested in this issue - use the full imports in your app by explicitly including tns-core-modules for each NativeScript's component.

@NickIliev I changed the title to make it more explicit, thx again.

Was this page helpful?
0 / 5 - 0 ratings