NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.22k stars 241 forks source link

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

Closed robertcbit closed 3 years ago

robertcbit commented 3 years ago

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.

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)

edusperoni commented 3 years ago

Hey!

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

robertcbit commented 3 years ago

The app.component.html

`

`

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 commented 3 years ago

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

edusperoni commented 3 years ago

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>
robertcbit commented 3 years ago

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!

edusperoni commented 3 years ago

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.

robertcbit commented 3 years ago

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