ERROR NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]:

[robertcbit]

ERROR NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]:

[edusperoni]

It seems the issue is with your actionbar layout. Did you use any legacy bootstrap action like createFrameOnBootstrap?

You're setting actionbar visibility to never but defining an actionbar. Your ActionBar doesn't have any Page to be injected in, so it's complaining it can't find Page.

This is what you can try:

<Frame>
  <Page>
    <ActionBar ...>
     </ActionBar>
    <page-router-outlet ...></page-router-outlet>
  <Page>
<Frame>

[edusperoni]

page-router-outlet is essentially a Frame with multiple Pages.

We now no longer provide a "default" Page (which looked for a Page in the topmost frame) as that means leaking things. Instead Page is provided by <Page> and page-router-outlet.

What that code does now is create a Frame with your actionbar and then put another Frame (page-router-outlet) inside it, so if you enable the inner ActionBar, it'll show 2 (as each Frame can have one ActionBar). If you need to hide the app ActionBar you should set the actionbar visibility in <Page>.

The alternative putting an actionbar in each of your routes.

[edusperoni]

Hey!

Can you share your app.component.html and the full stack trace?

[robertcbit]

The app.component.html

<page-router-outlet actionBarVisibility="never"> <ActionBar title="MyApp"> <ActionItem (tap)="myDashBoard()" #dashBoardActionItem ios.systemIcon="16" ios.position="right" text="My Cards" android.position="popup"></ActionItem> <ActionItem (tap)="onConnectToStore()" #storeConnectActionItem ios.systemIcon="16" ios.position="right" text="Connect" android.position="popup"></ActionItem> <ActionItem (tap)="onCreatMyCard()" #createMyCardActionItem ios.systemIcon="16" ios.position="right" text="Create My Card" android.position="popup"></ActionItem> <ActionItem (tap)="onGetMyCards()" #myCardsActionItem ios.systemIcon="16" ios.position="right" text="My Cards" android.position="popup"></ActionItem> <ActionItem (tap)="onSignOut()" ios.systemIcon="16" ios.position="right" text="Sign out" android.position="popup"> </ActionItem> </ActionBar> </page-router-outlet>

As far as the full stack trace, there is a lot of confidential information I would have to remove, and you are referring to Everything from the start of the "ns run android" command, yes?

[robertcbit]

@edusperoni - thanks for the quick response, here is the entire trace.

`
D:\Company\project\repositorys\mobile_nsapp\mynsapp>ns run android
Searching for devices...
Preparing project...
webpack is watching the files...
asset bundle.js 119 MiB [compared for emit] (name: bundle)
asset vendor.js 13.6 MiB [compared for emit] (name: vendor) (id hint: defaultVendor)
asset runtime.js 86.6 KiB [emitted] [compared for emit] (name: runtime)
Entrypoint bundle 132 MiB = runtime.js 86.6 KiB vendor.js 13.6 MiB bundle.js 119 MiB
orphan modules 223 KiB [orphan] 130 modules
runtime modules 24.8 KiB 13 modules
modules by path ./node_modules/ 5.13 MiB
javascript modules 4.86 MiB 386 modules
json modules 274 KiB
modules by path ./node_modules/mdn-data/css/.json 242 KiB 3 modules
modules by path ./node_modules/css-tree/ 31.6 KiB 2 modules
modules by path ./src/ 48.4 MiB
modules by path ./src/app/ 48.3 MiB 57 modules
modules by path ./src/.ts 3.97 KiB
./src/polyfills.ts 561 bytes [built] [code generated]
./src/main.ts 3.42 KiB [built] [code generated]
./src/app.css 118 KiB [built] [code generated]
external "~/package.json" 42 bytes [optional] [built] [code generated]

WARNING in ./node_modules/@nativescript/core/profiling/index.js 126:22-47
Module not found: Error: Can't resolve '~/package.json' in 'D:\Company\project\repositorys\mobile_nsapp\mynsapp\node_modules@nativescript\core\profiling'

WARNING in ./node_modules/@nativescript/core/profiling/index.js 126:22-47
Module not found: Error: Can't resolve '~/package.json' in 'D:\Company\project\repositorys\mobile_nsapp\mynsapp\node_modules@nativescript\core\profiling'

WARNING in ./node_modules/@nativescript/core/profiling/index.js 126:22-47
Module not found: Error: Can't resolve '~/package.json' in 'D:\Company\project\repositorys\mobile_nsapp\mynsapp\node_modules@nativescript\core\profiling'

WARNING in ./node_modules/@nativescript/core/ui/styling/style-scope.js 26:22-47
Module not found: Error: Can't resolve '~/package.json' in 'D:\Company\project\repositorys\mobile_nsapp\mynsapp\node_modules@nativescript\core\ui\styling'

WARNING in ./node_modules/@nativescript/core/ui/styling/style-scope.js 26:22-47
Module not found: Error: Can't resolve '~/package.json' in 'D:\Company\project\repositorys\mobile_nsapp\mynsapp\node_modules@nativescript\core\ui\styling'

WARNING in ./node_modules/@nativescript/core/ui/styling/style-scope.js 26:22-47
Module not found: Error: Can't resolve '~/package.json' in 'D:\Company\project\repositorys\mobile_nsapp\mynsapp\node_modules@nativescript\core\ui\styling'

6 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.40.0 compiled with 6 warnings in 59328 ms
Webpack compilation complete. Watching for file changes.
Updating runtime package.json with configuration values...
Project successfully prepared (android)
File change detected. Starting incremental webpack compilation...
assets by status 132 MiB [cached] 2 assets
assets by path . 87.4 KiB
asset runtime.js 86.6 KiB [emitted] (name: runtime)
asset runtime.eca3fc59bf9a2ae64b2b.hot-update.js 779 bytes [emitted] [immutable] [hmr] (name: runtime)
asset runtime.eca3fc59bf9a2ae64b2b.hot-update.json 31 bytes [emitted] [immutable] [hmr]
Entrypoint bundle 132 MiB = runtime.js 86.6 KiB runtime.eca3fc59bf9a2ae64b2b.hot-update.js 779 bytes vendor.js 13.6 MiB bundle.js 119 MiB
cached modules 48.9 MiB [cached] 615 modules
runtime modules 24.8 KiB 13 modules
javascript modules 4.85 MiB
./src/app/shared/payments/payment.service.ts 16.9 KiB [built]
./src/app/mycards/components/controllers/cardwizpay.component.ts 4.84 MiB [built]
webpack 5.40.0 compiled successfully in 1835 ms
Webpack compilation complete. Watching for file changes.
Successfully transferred bundle.js on device emulator-5554.
Successfully transferred package.json on device emulator-5554.
Successfully transferred vendor.js on device emulator-5554.
Restarting application on device emulator-5554...
Successfully synced application org.nativescript.mynsapp on device emulator-5554.
Successfully transferred runtime.js on device emulator-5554.
Successfully transferred runtime.eca3fc59bf9a2ae64b2b.hot-update.json on device emulator-5554.
Successfully transferred runtime.eca3fc59bf9a2ae64b2b.hot-update.js on device emulator-5554.
Refreshing application on device emulator-5554...
JS: ERROR NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]:
JS: NullInjectorError: No provider for Page!
JS: bootstrap: Error bootstrapping app module:
JS: R3InjectorError(AppModule)[Page -> Page -> Page]:
JS: NullInjectorError: No provider for Page!
JS:
JS: NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]:
JS: NullInjectorError: No provider for Page!
JS: at NullInjector.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11081:0)
JS: at R3Injector.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11247:0)
JS: at R3Injector.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11247:0)
JS: at R3Injector.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11247:0)
JS: at NgModuleRef$1.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:25341:0)
JS: at Object.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:25055:0)
JS: at lookupTokenUsingModuleInjector (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:3342:0)
JS: at getOrCreateInjectable (file:///data/data/org.nativescript.mynsapp...
JS: Unhandled Promise rejection: R3InjectorError(AppModule)[Page -> Page -> Page]:
JS: NullInjectorError: No provider for Page! ; Zone: ; Task: Promise.then ; Value: NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]:
JS: NullInjectorError: No provider for Page! NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]:
JS: NullInjectorError: No provider for Page!
JS: at NullInjector.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11081:0)
JS: at R3Injector.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11247:0)
JS: at R3Injector.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11247:0)
JS: at R3Injector.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11247:0)
JS: at NgModuleRef$1.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:25341:0)
JS: at Object.get (file: src\webpack:@NativeScript\mynsapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:25055:0)
JS: at lookupTokenUsingModuleInjector (fi...
Successfully synced application org.nativescript.mynsapp on device emulator-5554.
`

[robertcbit]

Excellent!! that did the trick! the error is gone and the app is rendered. Now I just need to go through redo some styling and test test, thanks very much!
I did not use any legacy bootstrap action like createFrameOnBootstrap
Strange though, even though I was and still can set actionbar visibility to never the action bar I've always had with the 3 dot's menu drop down still shows. If I now remove the actionBarVisibility="never" I get yet a 2nd action bar stacked under the 1st.
Not sure what's causing that behavior, will need to re-visit why the original design evolved to what it is now.
I like the fact that the latest NS8 found bad things in my code where as NS6 ignored them, very nice!
Thanks again!

[robertcbit]

Great additional information, thank you for the follow up. I might just go with the alternative, I think.. will review the bigger picture of the design tomorrow, regards -Robert