Develop Reference

Proper way to add jquery packages to an Angular 10+ project?

I am trying to install jquery and jquery-slimscroll packages to an Angular project (version > 10), but the packages are not seems to be installed properly. So, regarding to this issue, could you please clarify me about the following issues below?
Assume that I have the following client structure:
ClientApp ---
|--- node_modules
|--- package.json
|--- angular.json
1. What is the proper way to add jquery and jquery-slimscroll to the project?
Should I run npm install on the ClientApp folder? Or is there a better way for the latest Angular versions?
2. I think there are several ways to add these packages as script like the following:
in angular.json:
"scripts": [
".../jquery/dist/jquery.min.js",
".../jquery-slimscroll/jquery.slimscroll.js",
]
Is it not a good approach to add them like this? Should I add them in npm as in the 1st question?
3. What about the packages.json? Some packages are added to packages.json instead of angular.json. What is the difference and why some packages are added another?

First of all, you have to understand the function of angular.json and package.json.
Angular.json
A file named angular.json at the root level of an Angular workspace
provides workspace-wide and project-specific configuration defaults
for build and development tools provided by the Angular CLI. Path
values given in the configuration are relative to the root workspace
folder.
Package.json
Initially, this package.json includes a starter set of packages, some
of which are required by Angular and others that support common
application scenarios. You add packages to package.json as your
application evolves. You may even remove some.
The package.json is organized into two groups of packages:
Dependencies are essential to running applications. DevDependencies
are only necessary to develop applications.
So, for the questions of the proper way to add these jquery dependencies, you can do both, the npm install jquery or add to the package.json and if needed to the angular.json.
The difference of both ways is that if you use npm install jquery it will add the dependencies automatically and download the packages to your node_modules, you add it manually, you will need to run npm install anyway, tp get the packages.

After update ember-cli 2.11.0 version how to npm instead of bower?

When I updated ember-cli to 2.11.0 and I found EMBER NO LONGER SUPPLIED VIA bower. So I check npm instead of bower, but I don't know what to do.
Such as moment.js use bower look like:
bower.json
"dependencies": {
...
"moment": "2.14.1"
}
ember-cli-build.js
...
app.import('bower_components/moment/moment.js');
...
.jshintrc
...
"moment": true,
...
This way can run in help and controller.
But I use npm and set ember-cli-build.js code app.import('node_modules/moment/moment.js'); had errors.
And cssaslo have this problem.
What is best way to npm instead of bower in ember-cli? Thanks.

Through ember-browserify
npm install ember-browserify --save-dev
npm install moment --save-dev
you can import it by import moment from 'npm:moment'
Try ember-cli-moment-shim
ember packages are not served through bower. It does not mean you can't use bower at all. You can still use bower.json and include it like you did.
You can have it in vendor folder and include it ember-cli-build.js file . but for moment.js inclusion. this is not the right way.
I prefer 1 or 2 options. and 3 and 4 is not applicable in this case.

Generate bower file automatically?

In current project I have pretty big bower file. Many dependencies are out of dated and have hardcoded version like ~1.2. I have replaced it with "latest" and run bower install/update and everything went ok.
The problem is that I don't want to have such settings like "latest" on production server. What is the easiest way to grab current versions of bower components and put it to the bower file? aka generate bower file from existing dependencies.

Using bower init, you'll be able to regenerate from scratch your bower.json file with all the current dependencies

With bower install --save jquery#<version_number> you can install specific versions of bower components, e.g.
bower install --save jquery#1.10.2
the --save automatically adds the dependency to bower.json. Normally there is no need to edit bower.json manually.

How to stop Bower pulling more than I need?

I've only just started using Bower, so I'm likely doing it wrong. However, when I pull down jQuery through bower using this:
bower install jQuery#1.9.1
I get a folder which is about 700k in size. The only thing I need in that folder however is the jquery.js or jquery.min.js, which are 239k, and 82k respectively.
As far as I understand it, this is because bower simply pulls down everything that's in the Github repository whether it's needed or not.
Is there any way to stop this? So that bower only pulls down what is needed to develop? Or Am I misunderstanding how I should be using Bower?
Thanks.

You're using it correctly. You should have a bower.json file with all of your dependencies specified so that you don't have to include bower's plugin directory with your source code, then just run bower install from a new machine to get the dependencies.
When you install a plugin and want your bower.json automatically updated, run bower install mydependency --save.

How to update bower.json with installed packages?

In my project I've installed bower components without save option. Now, I would like update to bower.json?
How can I update bower.json with installed packages?

Just list your dependencies:
bower list
Then you should run all install command with param '--save' like this:
bower install bootstrap --save
It's a hard work, but if you have a thousand dependencies, could you create a script to automatize the task.

A little trick if you don't want to write a script for that:
before doing anything rename your bower.json in bower2.json for example.
then you can do a:
$ bower init
(automatically create a bower.json file).
note that all questions should be pre-filled with your current config.
When it will ask you:
set currently installed components as dependencies?
say yes,
You now have all your dependencies in the new bower.json file (and you can check if everything is right with the old bower2.json)

A bit arduous way is to run bower list, look for packages labeled extraneous and add those manually to the dependencies in the bower.json.
If there are a lot of extraneous packages, it might be easier to workaround this by running bower init and answering Yes to "set currently installed components as dependencies?". This will take your current bower.json, read it and then create new one using information from the old one. So in an ideal case you will have the same file just with extraneous packages added.
Warning: Firstly, there might be something lost in the process (e.g. devDependecies). Secondly in the last version of bower (v1.2.7) this will not preserve current packages info! I feel it is a bug. However you can save the old file and (manually) merge it with the generated one.
Also, you should ask for an option or something by opening a bower issue as this would be welcomed by many developers.

You can use bower-check-updates (you need installed node.js on your machine):
bower-check-updates is a utility that automatically adjusts a bower.json with the latest version of all dependencies
bower-check-updates - is a fork of npm-check-updates, so it's all the same but updates bower.json, instead of package.json
npm install -g bower-check-updates
bower-check-updates -u
bower install
This will install bower-check-updates globally, so you can launch it from anywhere.
P.S. for more information about npm-check-updates pleas see this topic

If there aren't that many bower packages you have installed, try writing bower install [package_name] --save. This will just update your bower.json file.

After bower-check-updates -u you must run bower install instead of npm install