I have got this ionic serve command problem that I just get this error Hmm,we can't reach this page and when I try to see the result of ionic address command, I get nothing to see. I don't know what is the problem in here. Please someone assist. Thanks
"scripts": {
"build": "ionic-app-scripts build",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "watch",
"deploy:before": "build",
"build:before": "build",
"run:before": "watch"
}
make sure that package.json (inside scripts )has all the above mentioned lines........
Related
vscode debugger encounter problem :Cannot find module 'webpack-command', i've installed webpack-cli global, here is my config
{
"type": "node",
"request": "launch",
"name": "node",
"program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js",
"args": ["--config", "./build/dev-server"]
},
I just encountered this error too. I was able to solve it with:
npm install --save-dev webpack-command
I am a complete noobie on the ionic/webpack build process, but for this task I am referring specifically to this: https://github.com/ionic-team/ionic-app-scripts#environments. I don't quite fully understand what is meant by "If the variable exists in the process environment it will be replaced with that value."
The scripts in my package.json are as follows:
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build --dev",
"build:after": "",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
}
From what I understand, I should be able to set up an env variable, say process.env.BASE_URL for example, anywhere in my code that could be a different value depending on the build.
My question is how do I structure my script to set that variable in my process environment? Is it just a matter of setting the "build" script as "BASE_URL=myurl ionic-app-scripts build --dev"? And if it really is that easy, how would I then access the script for the --prod flag to set the variable for that one as well?
Thank you in advance. I really love this community.
You're almost correct. Usually, the way that I do things is to define an item in my scripts config like "ionic:build:prod" : "BASE_URL=myurl ionic-app-scripts build --prod. That way you can run that whole thing with one easy command(npm run ionic:build:prod)
Hi, Waiting for connectivity with ionic-app-scripts continues with
ionic serve--lab?
[app-scripts] [18:17:21] tslint: ...orkSpace_Ionic3_MobileApp/prototype/src/pages/profile-details/profile-details.ts, line: 2
[INFO] Waiting for connectivity with ionic-app-scripts...
[INFO] Waiting for connectivity with ionic-app-scripts...
[INFO] Waiting for connectivity with ionic-app-scripts...
Ionic Info :
Ionic:
ionic (Ionic CLI) : 4.0.3 (C:\Users\user\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.1.11
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : browser 5.0.3
System:
Android SDK Tools : 26.1.1
NodeJS : v9.1.0 (C:\Program Files\nodejs\node.exe)
npm : 5.5.1
OS : Windows 10
Environment:
ANDROID_HOME : C:\Users\user2\AppData\Local\Android\Sdk
Below I have updated mine package.json file.
package.json
{
"name": "name",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build --aot --minifyjs --minifycss --release",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
Try npm run start instead of ionic serve.
This will work.
Try the modified part. And try executing "npm start" command
{
"name": "name",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build --aot --minifyjs --minifycss --release",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"start": "ionic-app-scripts serve" //instead of ionic:serve, write start
},
If none of these works,
then make sure your FIREWALL is OFF. (into antivirus software as well.)
Check whether you have installed any Antivirus for protection
If yes turn off Browser protection and do ionic serve --host 0.0.0.0
You can turn it on after a successful serve.
The reason is in that the app starts with 0.0.0.0 IP address.
Try to add in our command "--address localhost" part.
So
ionic serve --address localhost
Do not downgrade the node version, update the version of "app-scripts":
To get the latest #ionic/app-scripts, please run:
npm install #ionic/app-scripts#latest --save-dev
I got this error only when I was connected to VPN. Once I turned VPN off, It start working again.
If you are using Ionic 6 and you came here looking for a solution to the following problem (like me):
Waiting for connectivity with ng...
Then check this answer, it's probably the solution to all your problems (remember to upvote if it helped you):
https://stackoverflow.com/a/74412994/6499181
I am using Ionic 2 via CLI. In this version they use NPM SCRIPTS as opposed to gulp.
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
I have read about adding custom scripts to the config but am not clear how to do this. this is my current config...
"config": {
"ionic_bundler": "webpack",
"ionic_source_map": "source-map",
"ionic_source_map_type": "eval"
},
I need to create a custom script called "replace" It will be using NPM replace. How can I add this so that when I run ionic serve or build it will run?
Here is the gulp code I want to run.
var gulp = require('gulp');
var replace = require('gulp-string-replace');
var p = require('./package.json');
var version = p.version;
gulp.task('serve:after', ['version']);
console.log('Task init!!!');
gulp.task('version', function() {
gulp.src(["./www/index.html"])
.pipe(replace(/VERSION/g, p.version))
.pipe(gulp.dest('./www/'));
});
Ionic CLI (v3.X) goes directly to gulpfile.js and looks for CLI hooks.
ionic serve:
gulp.task('ionic:watch:before', function() {
console.log("this is run before 'ionic serve'");
});
ionic build:
gulp.task('ionic:build:before', function() {
console.log("this is run before 'ionic build'");
});
so you should add something like this to your gulpfile.js:
gulp.task('ionic:watch:before', ['version']);
gulp.task('ionic:build:before', ['version']);
To simply run your gulp task just add it to your package.json.
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
--> "ionic:build": "ionic-app-scripts build && gulp serve:after",
"ionic:serve": "ionic-app-scripts serve",
"watch": "ionic-app-scripts watch"
}
Note: this will not work if you put the "&& gulp" after ionic:serve - the gulp task will wait for the first part to finish, but ionic serve will start up a dev server and stay running so the second part never executes.
As you want to run your Gulp Task from NPM
Add the gulp-npm-script-sync as follows npm install --save-dev gulp-npm-script-sync
Now we need to sync this gulp task to the package.json as follows
var gulp = require('gulp');
var sync = require('gulp-npm-script-sync');
// your gulpfile contents
sync(gulp);
Every time you update your gulpfile with a new task it will update your package.json.
You can even throw it inside a gulp task:
gulp.task('sync', function () {
sync(gulp);
}
First, you have to copy and existing task that you want to modify and paste in your source code /project/task. Then add your task in that file. and change package.json to overwrite ionic 2 default config.
"config": {
"ionic_cleancss": "./task/cleancss.config.js"
},
More info :
https://github.com/ionic-team/ionic-app-scripts#custom-configuration
I have multiple browser windows usually and it's always not popping up on the one I want.
Can I disable the feature of ionic serve opening in a browser?
You can pass in the --nobrowser option, or simply -b:
ionic serve --nobrowser
Old CLI: As #Claudiu mentioned ionic server -b will not start a browser.
New CLI: the new command is ionic serve --no-open.
If you want to start a browser but not the default one, you can use the -w option.
Eg if Chrome is your default browser, but you want ionic serve to use Firefox instead, you can do something like
ionic serve -w "path/to/firefox.exe" or just ionic serve -w firefox if Firefox is in the path.
More info on ionic serve options:
http://ionicframework.com/docs/v2/cli/serve/
ionic serve --help
ionic serve --no-open is the new command. The no-browser has been deprecated
Hello you can pass in the package.json in the :
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
}
and pass in the ionic:serve.
like this: "ionic:serve": "ionic-app-scripts serve --nobrowser"
and run in the terminal of your project the:
npm run ionic:serve