Error bootstrapping Angular

#1

Hi guys, recently I’m facing a big problem when it comes to the first rendering of my application and after trying to fix it for a long time I haven’t found any solution. The error is the following:

bootstrap: ERROR BOOTSTRAPPING ANGULAR
JS: bootstrap: Inside ActionBarComponent but no Page found in DI.
JS:
JS: Error: Inside ActionBarComponent but no Page found in DI.
JS:     at new ActionBarComponent (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:83432:19) [angular]
JS:     at createClass (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:12825:20) [angular]
JS:     at createDirectiveInstance (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:12668:37) [angular]
JS:     at createViewNodes (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:14126:53) [angular]
JS:     at callViewAction (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:14560:13) [angular]
JS:     at execComponentViewsAction (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:14469:13) [angular]
JS:     at createViewNodes (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:14154:5) [angular]
JS:     at createRootView (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:14015:5) [angular]
JS:     at callWithDebugContext (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:15440:42) [angular]
JS:     at Object.debugCreateRootView [as createRootView] (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:14723:12) [angular]
JS:     at ComponentFactory_.module.exports.ComponentFactory_.create (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:11620:46) [angular]
JS:     at ComponentFactoryBoundToModule.module.exports.ComponentFactoryBoundToModule.create (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:4372:29) [angular]
JS:     at ApplicationRef.module.exports.ApplicationRef.bootstrap (file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:6207:57) [angular]
JS:     at file:///data/data/org.nativescript.tabviewnativescript/files/app/vendor.js:5934:81 [angular]

Any idea of what’s happening? It stopped working from one day to another and it doesn’t work neither the emulator nor the real device.

Thank you for the help!

#2

I am having the same issue once I add the ActionBar. Maybe something to do with latest version on it I assume but I also have not been able to find a fix for it.

#3

Hi,

are you using the RadSideDrawer?

Apparently with the new NativeScript version 4.0 is necessary to have the RadSideDrawer 4.0.0 and in order to make it work is state that we have to use the “tkMainContent” directive each time we want to render sth within the MainContent of said RadSideDrawer even if you are loading custom components.

I haven’t been able to reach the perfect solution but I fix the error this way:

I have a tab-page.component that is loaded in the page-router-outlet of my entry component AppComponent. And FYI, I’m not able to run the app without errors by using router-outlet instead of page-router-outlet…

  • app.component.html
<RadSideDrawer>

    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <StackLayout class="sideStackLayout">
            <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Social" class="sideLabel"></Label>
        </StackLayout>
        <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label>
    </StackLayout>

    <StackLayout tkMainContent>
        <page-router-outlet></page-router-outlet>
    </StackLayout>

</RadSideDrawer>
  • tabs-page.component.html
<TabView (selectedIndexChange)="onIndexChanged($event)">
    <StackLayout *tabItem="{title: 'Tab 1'}">
        <!--<router-outlet name="tabOne"></router-outlet>-->
        <ActionBar title="Application Title"></ActionBar>
        <Label text="TEST" tkMainContent></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tab 2'}">
        <Label text="TEST"></Label>
        <!--<router-outlet name="tabTwo"></router-outlet>-->
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tab 3'}">
        <Label text="TEST"></Label>
        <!--<router-outlet name="tabThree"></router-outlet>-->
    </StackLayout>
</TabView>

Yet needs a workaround but knowing that we have to use the tkMainContent directive is something to take into account :wink:

In this NS example you can check how they manage the application with the new NS version + new RadSideDrawer: https://github.com/NativeScript/template-drawer-navigation-ng

I rather have previous NS version where the app structure wasn’t so bad and I could use the RadSideDrawer throughout whole application + lazy modules + TabView + custom router-outlets without any issue

#4

I’m getting the same error. All I’m doing is following the NS Playground tutorial, it breaks even on that, i have also cloned the project and ran it locally with my device connected and the same thing happens. The fact its broke on the playground version id assume theres not a lot we can do about it. Nothing to do with the rad drawer its a blank template, stick an action bar in , boom broke

#5

I got the same problem. Did you fix it?

#6

Would you mind sharing a playground example?

#7

Hey all.

You have the solution here.

It’s the new way of NS works now.
Cheers.