edusperoni
commented
3 years ago Hey!
Can you share your app.component.html and the full stack trace?
Closed robertcbit closed 3 years ago
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:
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>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
Environment nativescript/angular app
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)