As per the Ionic Guide Chapter 4 http://ionicframework.com/docs/guide/testing.html, ionic serve will start a live reload server, which it does in my case, but reload is not happening.
Is there any pre-req we need to have for this thing to work? Like say live reload chrome extension?
E:\Ionic\myapp>ionic serve
Running dev server: http://localhost:8100
Running live reload server: http://localhost:35729
Here is what worked for me:
stop ionic service if you running it 'q' command
run: ionic address from command prompt
After running this command it will prompt you to select what address you would like to use one is localhost and the second one is your machine IP address.
Try to use select your machine IP address instead of localhost.
Even I faced similar issue, console used to display the file changed but automatic browser refresh wasn't happening. Later I found out a missing closing tag in my index.html page that prevented ionic to inject the below script required for live reload.
<script src="//localhost:35729/livereload.js?snipver=1"></script>
Please check for any typo errors or other html issues in the index.html page and fix those. Live reload should word properly after that.
In Ionic 2/3, I solved this problem by removing the folder node_modules/ and file package-lock.json, then at terminal run:
npm install --save
I'm my case, I was bootstraping the app with this:
window.ionic.Platform.ready(function() {
angular.bootstrap(document, ['myApp']);
});
Then I changed it for this:
<body ng-app="myApp" >
<ion-nav-view></ion-nav-view>
</body>
And it works
if you want to get Live console logs in the ionic application (real
device or emulator)
ionic cordova run android --livereload --consolelogs --serverlogs
Related
I am currently working on my first react-native application. I have some starter code from MERN stack projects that I have previously worked on, and in those projects, linking the frontend and backend wasn’t an issue. I am using redux for its reducers and actions to try to send data to my mongodb database. In my redux actions, I am using axios for API calls, but none of them work.
https://levelup.gitconnected.com/mernn-to-do-app-dab1e3173493
I also tried running the server and the expo app at the same time (like in the link above), but it is not working. Sometimes, the server side will coincide with the client side and result in the error Error: listen EADDRINUSE: address already in use :::5000.
Does anyone know an easy way to set up an express, node, and mongodb backend to a react-native app?
BEFORE: Run npm start in the terminal and check the output to see if the terminal print something like server.js nodemon src/server.js.
REASON: If you do then your scripts are calling server.js twice, which is causing this Error.
FIX: I had the same issue and fixed it by fixing my package.json in root folder and also the package.json in the server folder.
AFTER: you should see the terminal print nodemon src/server.js when you run your script.
Hope this helps.
I created new default tab project . I changed nothing. run the ionic serve no errors app opened in beowser its empty nothing.
After long investgation i found it opens the index.html inside src.
what happend why it is not lunching the real app.
I have ionic 5
It was a chrom problem. I had old version I upgrade it works fine. Looks old chrom dont understand type="model" for that it was nit downloading the js file
I'm trying to perform audit using Lighthouse DevTools.
My site requires authentication.
When I run the test the lighthouse logs me out and only anayses /login.
How can I get Lighthouse DevTools to analyse my site? Can I supply login credentials?
If you are using local storage in order to preserve an authenticated state after refresh
(for example storing a user's token, and on refresh using that token in order to login like a lot of SPA's)
I found a solution that might work :
https://github.com/GoogleChrome/lighthouse/issues/1418#issuecomment-397753583
If using chrome dev tools to run light house :
On the lighthouse tab in chrome dev tools simply click the settings icon
Uncheck the clear storage check box.
Generate the report, and on refresh it will use the local storage data therefore will keep you logged in.
If using the lighthouse cli tool :
Install and execute as explained in JoostS answer, just add to the lighthouse command the --disable-storage-reset flag , and you can also add the --view flag in order to open a tab for the report.
So the command will be :
lighthouse <url> --port <port_chrome_debugger_opened> --disable-storage-reset --view
Verifying it tested the logged in page
You can verify it tested the logged in page by looking at the report under the performance metrics there are images of the page that was loaded, so if the images correspond to the logged in page I believe it means it was tested correctly.
See Testing on a site with authentication in the official readme:
When installed globally via npm i -g lighthouse or yarn global add lighthouse, chrome-debug is added to your PATH. This binary launches a standalone Chrome instance with an open debugging port.
Run chrome-debug. This will log the debugging port of your Chrome instance
Navigate to your site and log in.
In a separate terminal tab, run lighthouse [siteurl] --port port-number using the port number from chrome-debug.
I had to install node 10.16.3 first (node.js > 10.0.0).
nvm install 10.16.3
will show error
Could not download npm for node v10.16.3.
Download npm version what you want - https://github.com/npm/cli/releases
I had downloaded 6.9.0 npm version - https://github.com/npm/cli/archive/v6.9.0.zip
It should be extracted to C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\npm
then go to C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\npm\bin and copy two npm files. first (npm .cmd file), second (npm file)
then paste both files in C:\Users\xxx\AppData\Roaming\nvm\v10.16.3
open cmd and run command node -v and npm -v
After that lighthouse CLI works as expected.
The command still does not work though. :/
I have followed the advice of JoostS - Testing a site with authentication
The technique does not work. It opens up an new, not logged in window, and behaves just like you would expect without the --port argument.
I got the following errors after ionic serve --lab:
Any Idea why the error above is occurred?
Ionic cli version 3.9.0
App scripts version 1.4.1
Typescript 2.3.9
Thanks.
Stylesheets don't get applied and javascript is not executed, because your browser reports wrong MIME types for these requested documents. They're all sent as text/html.
It seems to be the same problem, as reported here.
You may try to go to any of the .ts files like user.ts or app.ts and save them again. This will trigger the automatic build, once finished, your app should run fine again.
After some investigations I found very similar problems.
Could you try the following:
Add <base href="/"> in head before linking all css files
https://github.com/froala/angular-froala/issues/170#issuecomment-386117678
https://github.com/angular/angular-cli/issues/10325#issuecomment-399329033
I faced the same issue many times.when i close the console and run it again as ionic serve it worked for me properly.Try this once.
So I'm using this plugin (https://github.com/katzer/cordova-plugin-local-notifications) for my app to have local notifications however it is not working when I have tested it.
I followed this tutorial https://devdactic.com/local-notifications-ionic/
I have tested the app on Ionic View on both android and iOS. I press the buttons but nothing shows up.
I have tried switching $cordovaLocalNotification with cordova.plugins.notification.local. when trying to use the functions in the plugin but that didn't work.
For what it's worth, the plugin does not show up in the package.json file but it does show up when I run the 'cordova plugins' command.
EDIT 1: The following is an image taken from my iPhone after I clicked Add notification
In my $ionicPlatform.ready(function(){...}), I have the following code
if(window.cordova && window.cordova.plugins.notification) {
alert('This alert doesn't fire');
}
The alert doesn't appear which means window.cordova.plugins.notification is unavailable just like the picture indicates
EDIT 2: On the ionic forums it was suggested that the plugin is not working on the Ionic View app as it is not one of the supported plugins. Please refer to: https://forum.ionicframework.com/t/katzers-local-notification-plugin/86748
However it does work when running/testing on a device(android) instead of the Ionic View app.
Add --save at the end of your command, something like:
cordova plugin add de.appplant.cordova.plugin.local-notification --save
It will add it to your config file.
Edit: Maybe you have error while using it. See error log by running the app with following command:
ionic run android -l -c
Finally running in the real device solved the issue.