Scribd
Upload
26 views

Angular PDF

This document discusses the dependencies needed to develop and run Angular and React projects. It explains that Node.js, npm, and the Angular CLI are essential for Angular, while React projects can be created using npx without a dedicated CLI.

Uploaded by

Balarajah Abinayan
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
26 views

Angular PDF

This document discusses the dependencies needed to develop and run Angular and React projects. It explains that Node.js, npm, and the Angular CLI are essential for Angular, while React projects can be created using npx without a dedicated CLI.

Uploaded by

Balarajah Abinayan
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Angular/React installation guide.

This article discusses about the dependencies needed to develop and run angular and
react projects.

Essential compionents to run angular,


1.Nodejs
2.npm
3.angular cli

Nodejs(node)
Though nodejs is a backend technology, we need it for the frontend technology
angular because of the runtime environment(app server?,etc). Further we could also
get the node package manager(npm) along with nodejs. npm is used to solve the
dependencies of the angular application(for getting different packages).
Search for nodejs in google. Get into the node website and download the latest(or
required) version for the particular platform(os).

we could change the version of node through ‘nvm’ command which helps to maintain
more than one version of node.

Node command is used to build the project. eg: node build/node compile

npm
npm will be automatically installed once you have installed the nodejs
successfully. npm manages the nodes modules. It helps to retrieve the
dependencies(packages) from the central repo. By default the node registry(repo
from where dependencies are downloaded) is set to be pointed to npmjs central repo.
we could change that to point to a custom registry. If a package is not in the
custom registry it will be checked in the npmjs registry. We could also set
different levels of registries to download the dependency packages and tools from.
npm set registry command is used to set the npm repository to download the node
modules from(eg: npm set registry https://registry.npmjs.org/).
All the npm commands will start with “npm”.
“npm install -g [email protected]” command is used to change the version of the npm.

Node central repo also will have tools needed for the developments purposes. That
is the executable packages.The packages inside the bin folder of node_modules
folder contains executables. We could use such tools with “npx” package to run.

npm install - installs necessary dependencies included in package.json.


npm start - executes the “start” script denoted in the scripts object which is
located in package.json file.

angular cli(ng)
angular cli is the real tool used to create angular application. After installing
the angular cli only you will be able to use the all the angular commands which
starts with “ng”.
“npm install -g angular/cli@latest”
The above command will install the latest version of angular cli globally. By
globally we mean that the angular commands could be accessible in any
location/folder. If we want install a specific version then replace the word
“latest” with the version number.

Now we are all set to create and run angular applications. But there are some
points to be needed to efficiently encounter some problems. One such thing is that,
we could have local angular cli version and global angular cli version.
Both global and local versions are important. Without global cli, we wont be able
to create a new angular project. Without local cli, only with global cli, if we run
ng serve ,we will get the error as “You have to be inside an Angular CLI project in
order to use the serve command. Please take the following steps to avoid issues:
"npm install --save-dev @angular/cli@latest" ”.

Ususally, the angular/cli will be included inside the package.json file of an


angular project. So when we clone the repository and do npm install, all the
dependencies inside the package.json will be downloaded into a newly created folder
called node modules and installed locally. In that way, we will be having local
version of the angular cli. This would be enough to run that particular project and
make changes. We dont need to install angular cli seperately or globally.
But in order to create a new angular project, you need to install angular cli
globally. If not it wont be created as the command will not be recognized.
Further when you try to create a new project inside a angular project folder, it
will through error as “You cannot use the new command inside an Angular CLI
project.”

1.”ng new my-app” - creates new mono repo style workspace with the angular
application.
2.after navigating into my-app folder, ”ng serve” - publish the angular application
using the build in server that comes with nodejs.

In case of deploying the angular app in a server(external),


“ng build” is used. This creates a folder called “dist” which contains all the
necessary files needed for the deployment of the application.

npx

npx is a tool for running npm executable(bin) packages that:


• live inside of a local node_modules folder or
• are not installed globally.

npx comes bundled with npm version 5.2+ (or as a standalone package).
npx looks into the local /node_modules/.bin folder for the package and if it can’t
find it, it will download and run it without having that package globally
installed.

Executable packages could be executed in different ways:


1. through npm.
a. get into the location of the exe package in terminal and run.
b. set the run script in pakage.json file and use npm run
command.
2. through npx.

In case of react, after installing nodejs, we will be having npm and npx. Through
npx we could make necessary steps to create and make a react project work using the
related executable node packages hosted in node repository(npmjs). React doesnt
have dedicated cli like angular cli.

“npx create-react-app my-app” - creating a new react project called “my-app”.


“cd my-app” - getting into project folder.
“npm start” - calls the start script to serve the web application.

Though this article discusses in high abstract level perspective hope this article
helps for those who dive into angular and react development

You might also like