Ionic 1.x - from bower to npm - ionic-framework

I used to install plugins in my ionic 1 project with bower. The new trend, especially with ionic 2, is to install packages with npm. Some core packages, such as ionic.cloud are not provided at all anymore with bower, even for ionic 1.x.
So I need to migrate some packages to npm. What is the recommended way to do so ?
My problem:
"npm install" seems to install packages in the "my_project/node_modules" folder, unlike bower which installs packages directly in my_project/www/lib/
As explained for instance in the installation guide of ionic.cloud this requires an additional step to copy the newly installed npm package in the lib folder with the command:
cp node_modules/#ionic/cloud/dist/bundle/ionic.cloud.min.js www/lib
However, when I update the package and run "npm update", this will update the node_modules folder, but not the lib folder. This is a problem as only the files from my lib folder are included in my index.html.
Running the cp-command after each npm update does not seem such an elegant solution. What is the recommended way to deal with this?

I think you can reverse this make the .bowerrc file create your packages inside the node_modules folder and use this path as default. Otherwise the node_modules is mandatory there is no way around creating it.
Even you can npm i --prefix ./bower_components/ <package> you still need to cp to folders up from bower_components folder

Related

"Fixing missing packages and vulnerabilities in age-viewer package when installing from GitHub"

I am trying to install the age-viewer from GitHub by following these steps:
Cloning the repository
Changing directory to age-viewer
Running "npm run setup"
However, I am encountering issues with missing packages and 34 vulnerabilities (3 moderate, 22 high, 9 critical). I have attempted to resolve this by running "npm audit fix --force", but it did not work.
I am looking for a solution to fix the missing packages and vulnerabilities in the age-viewer package that I am trying to install from GitHub.
Cloning the age-viewer repository from GitHub
Changing directory to age-viewer
Running "npm run setup"
Running "npm audit fix --force" to resolve issues with missing packages and vulnerabilities
I encountered a similar error. Here is how I solved it:
Removed node_modules directory from root, frontend and backend folders.
Removed package-lock.json from root, frontend and backend folders.
Ensured node version is in range 14.16.0 - 14.21.2 (I switched to 14.16.0 using nvm)
Cd to root dir of the AGE-Viewer
npm run setup
npm run start
Hope this helps.
This error can arise due to a different reason. You can try some of the following steps to solve this error.
Try using node version 14.16.0.
If you are using WSL then make sure that the node version for your system's parent os and WSl is the same.
I had the same issue while installing, the 1st solution mentioned above worked for me [for ubuntu 22.04].
Try to use 14.16.0 version of node.
But if you are already using this version then try these steps:
npm cache clean --force
delete node_modules folder and package-lock.json file from your age-viewer root
directory.
delete node_modules folder and package-lock.json file from the frontend folder in age-viewer directory.
delete node_modules folder and package-lock.json file from the backend folder
in age-viewer directory.
npm run setup
npm run start
It works for me like this.

NPM: skip dev dependencies when installing a package from Github

Is it possible to exclude dev dependencies when installing directly from GitHub?
Unfortunately the command
npm install --only=production my-repo#github:path-to/my-repo
doesn't seem to work, it only excludes dev dependencies specified in the current package.json file, not the ones specified in the package I am installing.

Ionic 2: How to update Ionic library for an existing project?

Can't find any info on Ionic 2 website. For example, a project is created with Ionic library 2.0.1. How do I update it to Ionic library 2.1.0? What is the standard procedure? ionic lib update is deprecated.
If you want to update your CLI, you need to run:
npm install -g ionic#latest
For updating your project, open your package.json and update the version of ionic-angular entry and any other dependencies that need to be updated. Reference to a package.json is here which is the one that is downloaded when you start a new project.
Then delete your projects node_modules and run:
npm install in your project directory.
You can also go to your project directory and type:
npm install ionic-angular#latest --save
npm install #ionic/app-scripts#latest --save-dev
In my case, npm install -g ionic#latest installed globally the latest ionic but it didn't update the ionic version of my project. Only the above solution worked.
PS 1: I'm using ionic 3
PS 2: Delete the project's folder node_modules, in case of errors

How can I configure sass with ionic.

I am using the default ionic seed application, I have ran the setup
command ionic setup sass.
I run ionic serve, this should be watching for sass changes but it's not.
I tried to run gulp watch but I am getting an error.Error: Cannot find module 'semver'
Try using sudo ionic setup sass
You might not have had sufficient security privileges, thus not allowing sass to be setup properly. Using sudo will allow the user to act as a superuser and let sass setup correctly.
This worked for me.
First you need to run this command ionic setup sass when you run this command create a scss folder in www folder in scss folder here is style.scss file.
and #import this file in scss/ionic.app.scss path.
#import "www/scss/style.scss" in scss/ionic.app.scss path.
Try this I hope this is work for you.
Please delete the 'node_modules' folder in the project directory and re-run
'npm install'. This worked for me .
Make sure you have changed your index.html to include the relevant css files, as the one previously will no longer be used if you want to use the .min.css one generated by sass.
If removing the node_modules and running npm install doesn't work you can try installing gulp then install sass
npm install -g gulp
ionic setup sass
You can use sass via Ruby:
Install Ruby
Install Sass: npm install -g node-sass
On ionic project (v2) type: npm rebuild node-sass
So whenever you touch sass file(s), you can just rebuild the sass: npm rebuild node-sass if not, it's OK, just continue normal ionic serve
Remark: ionic2 requires sass
Using Sass in ionic project
if you are using windows node cli. goto in your project by
c:\projectname
after
c:\projectname>ionic setup sass
done
http://ionicframework.com/docs/cli/sass.html
Try this. It will setup the sass in your ionic project.
ionic setup sass
If gulp is not setup then run this command first
npm install gulp -g

How do I install package.json dependencies in the current directory using npm

I have a web app: fooapp. I have a package.json in the root. I want to install all the dependencies in a specific node_modules directory. How do I do this?
What I want
Lets say I have two widget dependencies. I want to end up with a directory structure like this:
node_modules/
widgetA
widgetB
fooapp/
package.js
lib
..
What I get
when I run npm install fooapp/ I get this:
node_modules/
fooapp/
node_modules/
widgetA
widgetB
package.js
lib/
..
fooapp/
package.js
lib/
..
npm makes a copy of my app directory in the node_modules dir and installs the packages inside another node_modules directory.
I understand this makes sense for installing a package. But I don't require() my web app inside of something else, I run it directly. I'm looking for a simple way to install my dependencies into a specific node_modules directory.
Running:
npm install
from inside your app directory (i.e. where package.json is located) will install the dependencies for your app, rather than install it as a module, as described here. These will be placed in ./node_modules relative to your package.json file (it's actually slightly more complex than this, so check the npm docs here).
You are free to move the node_modules dir to the parent dir of your app if you want, because node's 'require' mechanism understands this. However, if you want to update your app's dependencies with install/update, npm will not see the relocated 'node_modules' and will instead create a new dir, again relative to package.json.
To prevent this, just create a symlink to the relocated node_modules from your app dir:
ln -s ../node_modules node_modules
In my case I need to do
sudo npm install
my project is inside /var/www so I also need to set proper permissions.
Just execute
sudo npm i --save
That's all
npm i --force
from documention:
The -f or --force argument will force npm to fetch remote resources even if a local copy exists on disk