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

Question

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

robertcbit opened this issue 4 years ago · 7 comments

Environment
nativescript/angular app

tns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.0.2 version and is up to date.
✔ Component @nativescript/core has 8.0.8 version and is up to date.
✖ Component @nativescript/ios is not installed.
✔ Component @nativescript/android has 8.0.0 version and is up to date.

CLI:
nativescript has 8.0.2
Cross-platform modules:
N/A
Android Runtime:
how to get this with Windows command line?
iOS Runtime:
N/A
Plugin(s):
N/A
NativeScript-Angular:
N/A
Angular:
Angular CLI: 8.3.20
Node: 14.17.0
OS: win32 x64
Angular: 12.0.5

Describe the bug
I recently attempted a migration from my old NS6 app to NS8. I followed steps on this page with no luck: https://blog.nativescript.org/nativescript-8-announcement/
So, I created a new NS8 app with the CLI, manually migrated my working NS6 code to the new app. Yesterday I was at 183 errors, now down to this last one and can't figure it out for the life of me. any ideas? many thanks in advance!

ns build android - works fine!
ns run android - produces the error

To Reproduce
ns run android - produces the error

Expected behavior
To run successfully on my Android Emulator as it did with NS version 6

Sample project
No smp
Additional context

Already scoured the net, posted in Stack, no responses.
https://stackoverflow.com/questions/68076369/error-nullinjectorerror-r3injectorerrorappmodulepage-page-page

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\mayapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11081:0)
JS: at R3Injector.get (file: src\webpack:@NativeScript\mayapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11247:0)
JS: at R3Injector.get (file: src\webpack:@NativeScript\mayapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11247:0)
JS: at R3Injector.get (file: src\webpack:@NativeScript\mayapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:11247:0)
JS: at NgModuleRef$1.get (file: src\webpack:@NativeScript\mayapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:25341:0)
JS: at Object.get (file: src\webpack:@NativeScript\mayapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:25055:0)
JS: at lookupTokenUsingModuleInjector (file: src\webpack:@NativeScript\mayapp\node_modules@angular\core_ivy_ngcc_\fesm2015\core.js:3342:0)

Answer 1 · 2021-06-23T18:20:14.000Z

Hey!

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

Answer 2 · 2021-06-23T20:47:28.000Z

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?

Answer 3 · 2021-06-23T22:41:53.000Z

@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/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.
`

Answer 4 · 2021-06-24T00:21:45.000Z

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>

Answer 5 · 2021-06-24T03:23:54.000Z

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!

Answer 6 · 2021-06-24T03:36:55.000Z

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.

Answer 7 · 2021-06-24T03:55:07.000Z

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