What are the components of an Angular/Node/ng application? What does each do and how are they related? - node.js

I'm having version issues installing npm/node/angular/ng. What are the different components of an Angular/Node/ng application and how are they related? Are there bundled packages that include everything you need to start developing in a single download? The current project I'm on is managing all of this through npm and is going through the common growing pains of changing versions and changing components and changing dependencies. The npm documentation is good for npm basics but is there documentation that describes best (or common, or recommended) practices for installing everything needed for Angular/node/ng applications (#angular-devkit, #angular-cdk, #schematics/angular, ng, etc.).

The starting point is as follows visiting https://cli.angular.io/ which shows you how to start an Angular app from scratch using Angular CLI.
Now let's say you create a temp folder and do the following as described in above link:
npm install -g #angular/cli
ng new my-dream-app
cd my-dream-app
ng serve
Go to this folder and check the package.json file in the root of that project against yours. That should surely give you the idea of which packages you have.
As the next step run the following command
npm-check -u
and as the final tip: every now and then delete the contents of node_modules (make sure you have everything backed up) and do a
npm install
Then run
ng build --prod
This way around you can always be sure if you clone your app on some other machine, you can install all the dependencies and resume work and also your project builds with no issue.

Related

'ng' is not recognized as a command

This question has been posted several times, however, I have not been able to find a solution.
I am using a new computer given to me by my company.
node -v = 14.7.3
npm -v = 6.14.13
npm, node, and Angular's location have been added to %PATH%.
Angular has been installed globally.
I have tried to remove package-lock and node_modules and reinstalling using npm.
I have tried to install/uninstall in the projects root, the projects application folder (where node_modules and package-lock is located, and inside the parent of the project as well just to give it a go.
After all of that, I am still receiving the error. I even tried the old turn it off and back on again trick as well.
I am unsure what to try from here. Any assistance would be great!
I am worried that there is some permission I am missing. In order to do anything on my work computer it feels that I need an admin to come and sign in for me or take control and do it for me.
Please let me know any troubleshooting options I have, thank you.
Are you using nvm (or nvm for window)
they are used to manage node versions
if you install Angular globally under nvm node12, it won't be available on other node versions
Check what node modules are installed globally
npm list -g --depth=0
If global Angular isn't available just run the local projects version
revert any changes you made to package.json and package-lock.json
remove node_modules
npm install
npm run ng serve -- --port=4200
note the extra --, as you're passing down params to a sub command
I'd advise against installing Angular globally anyhow. Look up running angular cli with npm run ng or the equivalent via npx

npm install as a build step in TeamCity

I am studying a TeamCity project which has to do with a .NET application with Angular at the frontend. What it does not make sense to me is I cannot find anywhere npm install. For example:
The thing is in case I add a dependency in package.json which requires update of node_modules folder, everything works fine as far as the artifacts are concerned and Angular finds the files it needs!!
But how node_modules folder on TeamCity is updated?
Sorry, for being a little bit abstract; honestly, I cannot find npm install anywhere.
I would highly recommend looking at the TeamCity Node Plugin available at https://github.com/jonnyzzz/TeamCity.Node. The plugin, which is also available via the TeamCity Plugin repository for an integrated installer, will allow you to use NVM to install a specific version of Node as well as run NPM to install other dependencies, etc.
I hope this helps!

Using gulp for builds without npm install

I'm working in a web application (JavaScript/C#, version controlled by TFS) and our team wants to start using Visual Studio 2015. Microsoft is moving developers to use existing popular tools like Gulp for automated tasks, so I've written a few Gulp tasks that will run on the server.
My problem is that our automated builds generate new project folders on the build server, so I can't run gulp myBuildTask without first running npm install. The npm install adds over 2 minutes to the build process, and it seems very inefficient to download the same dependencies for every build (since they will change rarely).
Is there anyway I can run a Gulp task on a new project folder without first running npm install?
Options I've considered:
Include node_modules in TFS. I couldn't add the node_modules folder to TFS (which would cause it to exist in each new build folder) because bower's nested dependencies have file paths that are too long for Windows. I could go this route without bower, but I'm not certain I want all those files in my solution (much of which is not needed, like readme's and test files).
Run npm install after each automated build.
As already mentioned, I don't want to do this because it adds several minutes to the build process.
Install NPM modules globally.
I'm not sure if this is even possible, but I'm wondering if I can install all project dependencies globally on the build server (avoiding having to install at the project level). My concern with an approach like this is that I don't want to have to manually update the build server's globally installed NPM modules every time we add a gulp plugin.
Ideally, the solution would be something like #3. The modules would install globally, but every build could run an npm install which would verify every module is installed. If a new npm module was added to the package.json, it would be downloaded. This npm install would be pretty fast since in most cases, all modules would already exist (globally installed on the build server).
There are a few things you might do:
Make npm install run faster. For this purpose, use newest npm (if possible) or use npm dedupe. Running dedupe may result in having less dependencies than with plain npm install. Then run npm shrinkwrap which creates npm-shrinkwrap.json file which contain 'freezed' info about what exactly gets installed (and in which version) during npm install.
Remember, node_modules is just a directory, if you can copy / rsync it to your installation, you can skip the npm install phase altogether
Node package resolution approach is to first try local node_modules directory and if not successful, (node_modules not there or dependency missing in node_modules) check out node_modules of the parent directory, then grandparent directory and so on. This means, you don't have to install packages globally, semi-global installation is quite sufficient
:
my_project
node_modules/
dependency1
dependency2
build_001/
build_002/
build_00x/
no node_modules here,
no deps here
Note however, that this, naturally, works only if your dependencies are really not changing. Since in real life you install something new from time to time, slightly enhanced approach might be helpful: organize your directories as follows:
my_project
ver_af729b
node_modules
build_001
build_002
ver_82b5f3
node_modules
build_003
build_004
af729b and 82b5f3 being (prefixes of) sha hashes of your npm-shrinkwrap.json file. If you then add new dependency, shrinkwrap file gets updated, build script creates new ver_something directory and executes npm install in it. Doing all this would naturally require extra work, but it should work great.
------------------ EDIT -------------------
If you are not trying to avoid npm install completely (you just want it to be quick) you can stick to the typical scenario: you checkout the sources always to the same directory, and let npm install re-use the old node_modules as much as possible.
If you want always to create a new directory for your build, you may still create a node_modules symlink to the older version of node_modules - also in this scenario, npm will reuse as much as possible from symlinked folder.

Can't build my web application when integrating bootstrap template

I'm totally new to Node.js meteor and all development outside of visual studio.
When I go in the console and add bootstrap like this :
npm install twitter-bootstrap
It gets installed and adds all the bootstrap files in my solution but when I run my application with meteor it says
Process finished with exit code 254
No more information. No errors. If I delete all the bootstrap files, it builds and run just fine. Any idea what might be causing this?
I've tried looking for the exit code meaning but I can't find it for my IDE and I'm a bit clueless as for why simply adding those packages without even referencing them anywhere in the project might cause my application not to run at all.
You can't add npm packages in your project folder like that. It will create a node_modules sub-directory that meteor will treat like any other project folder, i.e., it will interpret all the files in it. That's not what you want. Either do the npm install in a super-directory, or, better yet, use the meteor meteorhacks:npm package (https://atmospherejs.com/meteorhacks/npm):
meteor add meteorhacks:npm
and then add the npm dependency to your packages.json file.
{
"twitter-bootstrap": "2.1.1"
}
But the real question is: why do you need this package? bootstrap3 is already part of the standard meteor packages, i.e., you already have full access to bootstrap, incl. javascript.
You can use atmosphere meteor packages called mizzao:bootstrap-3 by running the commend
meteor add mizzoa:bootstrap-3
Alternatively if you want to use npm packages you must add meteorhacks:npm packages.
meteor add meteorhacks:npm
npm install twitter-bootstrap
You can specify all the required npm packages inside a packages.json file.
{
"gm":"1.16.0",
"twitter":"0.2.12",
"twitter-bootstrap":"2.1.1",
}

cannot find module express, how to install it to make it globally available?

I want to experiment with some node.js stuff and I installed it yesterday following someone's instructions on the web which got it up and running, and I got the standard Hello World web page up on the screen.
I now went to move onto another example, but in order to not clutter my home directory, I created a directory off of it (~/node) and created the files I needed in there. Low and behold, when it came time to run the service, I got no joy stating the express module couldn't be found.
The instructions told me to install express using the -g flag, but that didn't help. I even ran it again without any luck.
Now I've found this:
Cannot find module `express` | socket.io [node.js]
and it appears I have to install it again under the current directory. I have done that and it works. Is it the case it has to be installed under each directory that I want services running from? It seems an unnecessary duplication.
edit:
Not knowing much about js I thought I would go digging and found
app.use(express['static'](__dirname ));
and have realised this is probably the cause of my problem. Further research has found this: http://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders and if I install it once in a higher level directory, that should 'solve' my problem. I'm not going to bother about uninstalling the module, but for my next project I will try it and see how it goes.
I don't know why the original author suggested the -g flag when installing express, since it hasn't seemed to work for me.
NPM is a really nice tool, allowing you to install node.js modules locally and globally.
Local module installation
If you want to use a module for your project, you have to install it locally.
That's why npm creates a subdirectory called node_modules inside your project directory.
If you use the same module for two different projects, npm will download the module and install it twice. That's perfectly normal, it helps you manage different versions of the same dependency.
The best way to manage dependencies and install modules for a specific project is to fill the package.json with your dependencies and install them using
npm install
inside your project directory.
To access your modules in your code, use the require() function.
For example, with expressjs :
var express = require('express');
var app = express();
...
Global module installation
npm allows you to install modules globally as well. But remember that installing a module globally only provides more commands in your terminal, as with expressjs and express(1).
In order to install expressjs globally, run this in your terminal
npm install -g express
If you want to use a globally installed module in a specific project, you also have to install it locally (in your project directory, without -g).
I hope this answers clearly your question.
Express is capable of generating a simple app structure when installed globally. See this link and scroll to Using express(1) to generate an app section. It's a good way to get you started easily.
Take a look into package.json, package.json in nodejitsu
All npm packages contain a file, usually in the project root, called package.json - this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies
a package.json example:
{
"name": "CRUD",
"description": "A simple CRUD",
"author": "Only for learn",
"dependencies": {
"express": "*",
},
}
so for install the dependencies go to level that package.json is, and run npm install this one will install all the dependencies you need for the project.
EDIT
a package.json interactive guide
I have found that when setting up node.js projects and dependencies, using Grunt [http://gruntjs.com/] has a lot of advantages. Although there are lots of different ways to setup a node and express project there is a lot to be said for using the Douglas Crockford approach and 'going with the grain'. In this case Grunt is the grain as it is becoming the de-facto standard for setting up a node project and there are existing templates for the most common types of node.js projects. You can find Grunt Express here [https://github.com/blai/grunt-express].
In this case Grunt would provide you with a project structure consistent with others, setup dependencies file for the node package manager and auto generate the express project for you. Packages are kept in a node_modules directory. If you are familiar with maven you might recognize the 'convention over configuration approach'.

Resources