Nativescript-angular: Error: Inside ActionBarComponent but no Page found in DI

Created on 20 Jul 2018 · 12Comments · Source: NativeScript/nativescript-angular

Which platform(s) does your issue occur on?

android emulation, api 28

Please, provide the following version numbers that your issue occurs with:

CLI: tns v4.1.2
Cross-platform modules: 4.1.2
Runtime(s): 4.1.3
Plugin(s):

{
  "name": "angular-native-seed",
  "version": "0.1.0",
  "scripts": {
    "postinstall": "node symlink.js",
    "postinstall:windows": "npm install --add-python-to-path --global --production windows-build-tools && npm config set python python2.7",
    "postinstall:linux": "",
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json --source-map",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "clean": "node rimraf.js -- build dist node_modules .cache backend/node_modules backend/wwwroot backend-nodejs/build nativescript/node_modules nativescript/app",
    "clean:install": "run-s clean install:packages:npm build",
    "install:packages:npm": "npm install --quiet --depth 0",
    "postinstall:packages:npm": "cd nativescript && run-s install:packages:npm && cd ../",
    "build.docker": "ng build --prod --aot && docker-compose build && docker-compose up",
    "install:powershellscript:update-npm:windows": "node ./config/tools/PowerShell/update-npm.js",
    "update:npm:windows": "npm run install:powershellscript:update-npm:windows",
    "update:npm:linux": "npm install -g npm",
    "upgrade:npm": "ncu -u --packageFile package.json && npm update && cd nativescript && ncu -u --packageFile package.json && npm update",
    "upgrade:yarn": "yarn upgrade --latest && cd nativescript && yarn upgrade --latest"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.9",
    "@angular/common": "^6.0.9",
    "@angular/compiler": "^6.0.9",
    "@angular/core": "^6.0.9",
    "@angular/forms": "^6.0.9",
    "@angular/http": "^6.0.9",
    "@angular/material": "^6.4.0",
    "@angular/platform-browser": "^6.0.9",
    "@angular/platform-browser-dynamic": "^6.0.9",
    "@angular/router": "^6.0.9",
    "@mdi/font": "^2.5.94",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "core-js": "^2.4.1",
    "material-bottom-nav": "^1.0.6",
    "materialize-css": "^0.100.2",
    "ngx-materialize": "^6.0.1",
    "rxjs": "^6.2.2",
    "susy": "^3.0.5",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular-devkit/core": "^0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^6.0.9",
    "@angular/language-service": "^6.0.9",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^10.5.2",
    "@types/webpack": "^4.4.7",
    "chalk": "^2.4.1",
    "codelyzer": "^4.0.1",
    "gulp": "^4.0.0",
    "gulp-debug": "^4.0.0",
    "gulp-rename": "^1.3.0",
    "gulp-string-replace": "^1.1.1",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "json-formatter-js": "^2.2.0",
    "karma": "^2.0.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.2.0",
    "npm-check-updates": "^2.14.2",
    "npm-run-all": "^4.1.3",
    "protractor": "^5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^2.7.2"
  }
}

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.
When I upgraded from Nativescript-angular 5.2. to 6.0.6, tns-core-modules from 3.4.0 to 4.1.1 and I cannot use actionbar component. I also upgraded from angular 5x to 6x

It worked fine. Now it does not

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="TCC"></Label>
</ActionBar>

What is the breaking change?

ERROR: Inside ActionBarComponent but no Page found in DI.

Source

IAMtheIAM

👍2

Most helpful comment

I ran into this issue today and I fixed it by reading this changelog :

NEW BEHAVIOR

Bootstrap will not create root view by default. It will use the root view of your main application component as the root view of the application. The component will create its own Frame and will use it for navigation. It will also wrap the components you navigate to in a Page and will navigate to it as it did before.

Which means:

You can use any view for application root. Finally, you can have application-wide RadSideDrawer.

You have more flexibility over where to place the , you can even have more than one for more advanced scenarios.

If you don't use in your app you will not get the default Page and Frame, which means you will not be able to inject them in you components or show the ActionBar. There is special createFrameOnBootstrap option you can pass on bootstrap to make things as before:

> platformNativeScript({ createFrameOnBootstrap: true })
>   .bootstrapModuleFactory(AppModuleNgFactory);

If you are using you probably don't have to do any changes. Bootstrap will not create Frame and Page, but the outlet will do that. It will also take care of providing Page and so the ActionBar should work as before.

I added {createFrameOnBootstrap: true} in my main.ts file. Hope this can help anybody.

NevinDry on 30 Oct 2018

👍20 ❤3

All 12 comments

I am having the same issue with my ios emulator;
Running on Mac - xcode ios emulator;

CONSOLE ERROR [native code]: ERROR Error: Inside ActionBarComponent but no Page found in DI.
CONSOLE ERROR [native code]: ERROR CONTEXT {
"view": {
"def": {
"nodeFlags": 33603585,
"rootNodeFlags": 33554433,
"nodeMatchedQueries": 0,
"flags": 0,
"nodes": [
{
"nodeIndex": 0,
"parent": null,
"renderParent": null,
"bindingIndex": 0,
"outputIndex": 0,
"checkIndex": 0,
"flags": 33554433,
"childFlags": 49152,
"directChildFlags": 49152,
"childMatchedQueries": 0,
"matchedQueries": {},
"matchedQueryIds": 0,
"references": {},
"ngContentIndex": null,
"childCount": 1,
"bindings": [],
"bindingFlags": 0,
"outputs": [],
"element": {
"ns": "",
"name": "ActionBar",
"attrs": [
[
"",
"title",
"TNSStudio"
]
],
"template": null,
"componentProvider
CONSOLE ERROR file:///app/tns_modules/tns-core-modules/trace/trace.js:165:30: bootstrap: ERROR LIVESYNC BOOTSTRAPPING ANGULAR
CONSOLE ERROR file:///app/tns_modules/tns-core-modules/trace/trace.js:165:30: bootstrap: Inside ActionBarComponent but no Page found in DI.
ActionBarComponent@file:///app/tns_modules/nativescript-angular/directives/action-bar.js:87:28 [angular]
createClass@file:///app/tns_modules/@angular/core/bundles/core.umd.js:9103:32 [angular]
createDirectiveInstance@file:///app/tns_modules/@angular/core/bundles/core.umd.js:8986:35 [angular]
createViewNodes@file:///app/tns_modules/@angular/core/bundles/core.umd.js:10206:63 [angular]
callViewAction@file:///app/tns_modules/@angular/core/bundles/core.umd.js:10522:32 [angular]
execComponentViewsAction@file:///app/tns_modules/@angular/core/bundles/core.umd.js:10441:31 [angular]
createViewNodes@file:///app/tns_modules/@angular/core/bundles/core.umd.js:10234:33 [angular]
createRootView@file:///app/tns_modules/@angular/core/bundles/core.umd.js:10120:24 [angular]
callWithDebugContext@file:///app/tns_modules/@angular/core/bundles/core.umd.js:11151:34 [angular]

Package.json:

{
"description": "NativeScript Application",
"license": "SEE LICENSE IN ",
"readme": "NativeScript Application",
"repository": "",
"nativescript": {
"id": "org.nativescript.MyProject",
"tns-android": {
"version": "4.1.3"
},
"tns-ios": {
"version": "4.1.1"
}
},
"dependencies": {
"@angular/animations": "~6.0.0",
"@angular/common": "~6.0.0",
"@angular/compiler": "~6.0.0",
"@angular/core": "~6.0.0",
"@angular/forms": "~6.0.0",
"@angular/http": "~6.0.0",
"@angular/platform-browser": "~6.0.0",
"@angular/platform-browser-dynamic": "~6.0.0",
"@angular/router": "~6.0.0",
"nativescript-angular": "~6.0.0",
"nativescript-fancyalert": "^1.2.0",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.8",
"rxjs": "~6.1.0",
"tns-core-modules": "~4.1.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"lazy": "1.0.11",
"nativescript-dev-typescript": "~0.7.0",
"typescript": "~2.7.2"
}
}

SGissubel on 23 Jul 2018

@IAMtheIAM please share a Playground that can reproduce the issue.

Is your application using page-router-outlet and are there any specific code used to create the layout structure in your application? I've tried to reproduce the issue using this test project but to no avail, so detailed steps on how to reproduce the issue will be of great help.

NickIliev on 30 Jul 2018

Hi
I figured out the issue. Its because the new way nativescript works, there's no ability to put the actionbar inside the root element since there is no Page context yet. It has to be inside the <page-router-outlet>

The way to reproduce is to use page-router-outlet and then try to put an Actionbar in the root element with page-router-outlet below.

IAMtheIAM on 1 Aug 2018

👍7 🎉1

@IAMtheIAM Language is confusing me, can you tell me what do I need to do to fix it? Here below is my code I have just created an app using tns create comand...

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <ActionBar title="My App" class="action-bar"></ActionBar>
    <!-- Your UI components go here -->
    <Label text="Finally started"></Label>
  `
})
export class AppComponent {
  // Your TypeScript logic goes here
}

yashwp on 26 Sep 2018

@IAMtheIAM It has to be inside the <page-router-outlet>

You mean like this?

<page-router-outlet>
<ActionBar title="My App" class="action-bar"></ActionBar>
</page-router-outlet>

Is not working neither..

carlosen14 on 3 Oct 2018

👍2 🎉1

I ran into this issue today and I fixed it by reading this changelog :

NEW BEHAVIOR

Bootstrap will not create root view by default. It will use the root view of your main application component as the root view of the application. The component will create its own Frame and will use it for navigation. It will also wrap the components you navigate to in a Page and will navigate to it as it did before.

Which means:

You can use any view for application root. Finally, you can have application-wide RadSideDrawer.

You have more flexibility over where to place the , you can even have more than one for more advanced scenarios.

If you don't use in your app you will not get the default Page and Frame, which means you will not be able to inject them in you components or show the ActionBar. There is special createFrameOnBootstrap option you can pass on bootstrap to make things as before:

> platformNativeScript({ createFrameOnBootstrap: true })
>   .bootstrapModuleFactory(AppModuleNgFactory);

If you are using you probably don't have to do any changes. Bootstrap will not create Frame and Page, but the outlet will do that. It will also take care of providing Page and so the ActionBar should work as before.

I added {createFrameOnBootstrap: true} in my main.ts file. Hope this can help anybody.

NevinDry on 30 Oct 2018

👍20 ❤3

At the bottom of main.ts change

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

platformNativeScriptDynamic({createFrameOnBootstrap: true}).bootstrapModule(AppComponentModule);

marklocklear on 21 Nov 2018

👍18

At the bottom of main.ts change

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

to

platformNativeScriptDynamic({createFrameOnBootstrap: true}).bootstrapModule(AppComponentModule);

thanks you

hackemateninja on 30 Dec 2018

👍1

Thank you soo much :)

sahilmore-git on 16 Jun 2019

<page-router-outlet>
    <ActionBar title="My App" class="action-bar"></ActionBar>
</page-router-outlet>

<StackLayout>
    <TextField hint="Email Address" keyboardType="email" autocorrect="false"
        autocapitalizationType="none"></TextField>
    <TextField hint="Password" secure="true"></TextField>

    <Button text="Sign in"></Button>
    <Button text="Sign up for Groceries"></Button>
</StackLayout>

NguyenKhuyen0 on 18 Jul 2019

😕1

If anyone ends up with two action bars after using the bootstrap trick, add actionBarVisibility="never" to your page-router-outlet:

<page-router-outlet actionBarVisibility="never"></page-router-outlet>

MitchTalmadge on 17 Nov 2019

👍5

I'm getting this error as of today using https://play.nativescript.org/ and the changes stated in this thread to make it work is already implemented! So I did was just triggered a change on the file save it and it started working!