R3InjectorError(AppModule)[Page -> Page -> Page] - NullInjectorError: No provider for Page!

[thisiseddy-ab]

Error
JS: NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]: JS: NullInjectorError: No provider for Page! JS: at NullInjector.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11120:0) JS: at R3Injector.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11287:0) JS: at R3Injector.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11287:0) JS: at R3Injector.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11287:0) JS: at NgModuleRef$1.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:25352:0) JS: at Object.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:25066:0) JS: at lookupTokenUsingModuleInjector (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:3354:0) JS: at getOrCreateInjectable (file:///data...

app.component.html
<ActionBar title="My App"></ActionBar> <Label [text]= "myAppText"> </Label>

app.component.ts
`
import { Component } from '@angular/core'
import {Page} from '@nativescript/core/ui/page'

@component({
selector: 'ns-app',
templateUrl: './app.component.html',
})
export class AppComponent {

public myAppText = "Hello"

constructor(private page: Page) {
page.actionBarHidden = false;
page.backgroundSpanUnderStatusBar = true;

}

}
`

app-routing.module.ts
`
import { NgModule } from '@angular/core'
import { Routes } from '@angular/router'
import { NativeScriptRouterModule } from '@nativescript/angular'

const routes: Routes = [
{ path: '', redirectTo: '/', pathMatch: 'full' },
]

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule],
})
export class AppRoutingModule {}
`

[edusperoni]

That error is expected.

AppComponent isn't contained in a Page, and, as such, can't have an action bar either.

If you want to have a root page with ActionBar you can put:

<Frame>
  <Page [actionBarHidden]="false">
    <ActionBar>...</ActionBar>
     ... Other content
   </Page>
</Frame>

Also, remove the Page from you AppComponent constructor.

[thisiseddy-ab]

do you mind explaining why i does not working from construtor, im following a (Nativiscripting-Angular Pro) tutorial and that is how they do it

[thisiseddy-ab]

It works like this to, is this a good solution ?

`
import { Component ,OnInit} from '@angular/core'
import {Page} from '@nativescript/core/ui/page'

@component({
selector: 'ns-app',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit{

public myAppText = "Hello"

private page = new Page()

public ngOnInit() {
this.page.actionBarHidden = false;
this.page.backgroundSpanUnderStatusBar = true;

}

}
`

[edusperoni]

That's not a good solution. Not sure exactly why that'd work for you since that page is not attached to anything. The best approach is to declare frame and page like me previous comment and bind the page properties like I did there instead of doing in the constructor of AppComponent.

The rationale is that:

1. AppComponent is your app root

2. Only a Frame can have a native ActionBar

3. Frames navigate to Pages, which contain information of how the ActionBar should behave

4. page-router-outlet is a Frame and every route you define is a Page, which is why you can use different ActionBars in each component

In sum, there's no Page or Frame available on AppComponent, so if you want a root ActionBar you have to manually define your own Frame and Page.

If you don't need a root ActionBar (if it's just going to be hidden) just don't declare it at all on your component template or code.

[faisalansari20]

@edusperoni , That does not help. I dont use Page in my whole app. Actually this project was working fine before upgradation

[edusperoni]

You're probably using actionbar in your app.component.ts. that actionbar needs to be contained in a page or page router outlet, so just remove that and it should be fine

[faisalansari20]

@edusperoni I dont have action bar in app component. Even first few screen of app does not have action bar

[faisalansari20]

this does not help me. I am wondering how this ticket has been closed

[edusperoni]

I can't help much without some way to reproduce it. That error happens when you try to inject page somewhere in your app and there's no Page in the injector (up the hierarchy). ActionBar also injects Page, which is where this issue usually lies.

I'd search for uses of Page in the constructor or ActionBar in a component that's not a Page (route+page-router-outlet).

If you comment out all your <ActionBar you might find where that's happening.

[faisalansari20]

removing Page from constructors resolved above issue, Thanks @edusperoni