Angular CLI installation tutorial

This article mainly introduces the installation and use of Angular CLI for Angular development and learning. Now I share it with you and give it as a reference.

We have prepared the development environment before, and now we can officially develop. As mentioned earlier, Angular provides a command line tool that can simplify our program development. We will also use this tool in future development, so we need to first install this development tool called Angular CLI.

The process of installing CLI is very simple, no different from installing other tools or even installing a common development package. We have configured NPM Registry and successfully installed yarn, so we can use yarn to install this tool. The specific command is:

yarn global add @angular/cli

Parametersglobal indicates global installation; add indicates "add"; the last is the CLI package name, which is not specified If the version is good, yarn will be asked to install the latest version of the CLI. . This statement is equivalent to the previous NPM

npm install -g @angular/cli

.

After that we run

ng version

If the version number of Angular CLI can be output, the installation is successful. Note that all Angular CLI commands start with ng.

Angular CLI is built on webpack and can help us generate Angular project framework, generate Angular modules, components, instructions, etc. If you build this development environment manually, you need to understand various details of webpack, write various automated scripts, etc., which requires higher front-end development technology. Considering our basic tutorial, using the CLI to assist development is definitely appropriate. We will introduce the use of Angular CLI in detail in subsequent chapters. If you are interested in Angular CLI, you can learn more details through its official website.

The CLI just installed uses NPM as the package management tool by default. If we want to use yarn, just run the following command:

ng set --global packageManager=yarn

On the other hand, if we want to switch back to NPM, just use

ng set --global packageManager=npm

.

After installing Angular CLI, let’s create the first sample project to understand the basic use of Angular CLI.

First, create a demo project using

ng new demo

. new is to create a new project, and the following demo is the name of the project. Angular CLI will help us generate a complete project framework - including all files, file structures, and various auxiliary files required for the project. Afterwards, Angular CLI will automatically run yarn install, which is to install various dependencies required by the project. The installation process will take a long time, so you need to wait patiently for some time.

When an interface similar to the above appears and prompts "Projecy 'demo' successfully created", it means that the project has been created. If there are errors, you need to check the installation process or network connection, etc.

After the project is created, a project folder will be generated in the current directory. After that we can enter the project directory

cd demo

and run

ng serve

##ng serve command will compile the project and then start a small built-in server, we can view the running results of the project through the browser. Pay attention to the above tip: NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/, that is to say, the address of this server should be http://localhost:4200, we only need to use Just access this address with your browser:

You can see the running results of the project page generated by Angular CLI by default.

Note that this built-in server is only suitable for development and testing and cannot be used as an actual server. Therefore, if we want to deploy to a formal server, we need to compile the project into a release version. Compiling the release version is also very simple. Just use one command:

ng build --prod

After the compilation is completed, open the project folder and you will see a dist directory. The files in it are the files needed to run the entire project. When we deploy the application, we only need to deploy all the files in this folder to the server.

We start from creating the project, to the development and testing of the project, and finally to the project packaging and deployment, all using the various functions provided by Angular CLI. As you can see, Angular CLI provides a one-stop development model. We can use Angular CLI to easily develop Angular projects. However, what we demonstrate here is only the simplest usage. In formal use, many additional parameters may be added to generate the files and projects we need. This requires reading the Angular CLI documentation for more information. In subsequent chapters, if we encounter relevant content, we will introduce it again.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Is there a better solution than asynchronous implementation using JavaScript?

Using Koa to build projects through Node.js

Detailed interpretation of React Native Flexbox layout

The above is the detailed content of Angular CLI installation tutorial. For more information, please follow other related articles on the PHP Chinese website!