What is Angular cli? how to use?-JS Tutorial-php.cn

Table of Contents

1. What is Angular cli

2. How to install

3. How to use

new | n)" >3.1 Create project (new | n)

generate | g )" >3.2 Create a new file (generate | g )

serve | s) " >3.3 Run the project (serve | s)

build | b）" >3.4 打包项目（build | b）

update ）" >3.5 更新项目（update ）

3.6 其他

Home

Web Front-end

JS Tutorial

What is Angular cli? how to use?

青灯夜游

Nov 09, 2021 am 09:52 AM

angular

What is Angular cli? This article will take you through the Angular cli in Angular and introduce how to use Angular cli. I hope it will be helpful to you!

What is Angular cli? how to use?

1. What is Angular cli

It is a command line interface tool that can be used for initialization, development, building and maintenance Angular application. [Related tutorial recommendations: "angular tutorial"]

2. How to install

Without npm, download nodejs first

https://nodejs.org/en/download/

npm install -g @angular/cli

Copy after login

If you want to uninstall, you also need to bring -g

npm uninstall -g @angular/cli

Copy after login

3. How to use

new|n means n is the abbreviation of new, the effect is the same, the same below.

3.1 Create project (new | n)

ng new my-project

Copy after login

It will Create an angular basic project and download the dependencies to run the project. The default port is 4200.

Customized content that may need to be used

Usage format is:

 ng new my-project --xxx=x

Copy after login

The following default values are false unless otherwise noted

##`--force=true false``--routing=truefalse``--skipInstall=truefalse``--skipTests=truefalse``--force=truefalse``--style=cssscss`--packageManager=npmyarnSpecify the prefix (component, directive) of the selector, such as passing in

Parameters	Meaning







--prefix=prefix	--prefix=dep`Then the selector of the component will become` dep-xxx`,`

, there is no such thing when creating it Customization, how to remedy it? Change directly in
angular.json~

3.2 Create a new file (generate | g )

Create a new basic file with preset code snippets in it. For example,

ng generate service demo will create a new demo.service.ts in the current folder.

CommandFunctionAbbreviationng generate module xxNew moduleng g m xxng generate component xxNew componentng g c xxng generate directive xxNew commandng g d xxng generate service xxNew serviceng g s xxng generate pipe xxNew pipeng g p xx

There is a simpler way: download the Angular Files plug-in in

vscode and search for

alexiv.vscode-angular2-files can be found. Create wherever you want. It feels great to use. Later I will write a plug-in that is useful for developing Angular with vscode~

3.3 Run the project (serve | s)

ConfigurationMeaning##--host=xxxx##--open=true|false##--port--proxyConfig=xx--watch=true|false--aot=true|false

Set the host address of the application. Others can access the application you start based on this address. can be your ip or 0.0.0.0

true will automatically open the page after starting the project, abbreviation: ng server -o

Set the startup port number to avoid starting multiple projects that occupy the same port and fail to start

Settings Agent file

Whether to automatically rebuild the refresh page when the code changes, default true

Whether to start the project in pre-compiled mode, the default is false. Disadvantages: Project running time increases. Advantages: Sometimes there is no problem during development, but if there is a problem after the package is launched, you can enable it locally to debug errors.

3.4 打包项目（build | b）

配置	意义
`--baseHref=xx`	index.html访问其他静态资源文件的相对路径。也可以在index.html的`<base href="xx">`中配置，还可以在`.angular.json`中的`baseHref`配置。
`--aot=true\|false`	是否以预编译模式启动项目，默认false,一般在`angular.json`中配置
`--optimization=true\|false`	是否启用构建输出的优化。
`--configuration=xx`	指定打包环境的配置
`--prod=true\|false`	`--configuration=production`的简写。true则以生产环境的方式打包，进行摇树优化等操作。

--configuration详解

当我需要打成不同的环境包时，可以使用以下方法：

在angular.json中做了如下配置，：

{
    projects： {
        project-name: {
            architect: {
                build: {
                    configurations: {
                        production: {
                            "fileReplacements": [
                                {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            ...
                        },
                        qa: {
                             "fileReplacements": [
                                {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.qa.ts"
                                }
                            ],
                            ...
                        },
                        sit: {
                             "fileReplacements": [
                                {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.sit.ts"
                                }
                            ],
                            ...
                        }
                    },
                    
                }
            }
        }
    }
}

Copy after login

之后可以进行不同的环境打包：

qa: ng build --c=qa
sit: ng build --c=sit
prod: ng build --c=production

--c 是 --configuration的缩写

3.5 更新项目（update ）

angular半年更新一个大版本，及时更新版本是非常重要的事情，如果落后高于1个版本以上，后续可能升级会很麻烦（别问我怎么知道，再问跳楼）。

从一个主版本升级到另外一个主版本，升级之前最好看下官方的升级指南

ng update @angular/cli@^<major_version>  @angular/core@^<major_version>

Copy after login

先查看有哪些可以更新

ng update

Copy after login

可以单个更新，也可选择全部更新

ng update --all

Copy after login

如果更新时提示有的依赖包版本不一致，可以强制更新

Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2 <2.8", would install "2.5.3")
Incompatible peer dependencies found. See above.

Copy after login

强制更新办法:

ng update --all --force

Copy after login

如何修改update默认下载工具为yarn

ng config --global cli.packageManager yarn

Copy after login

ng set --global packageManager=yarn

Copy after login

3.6 其他

ng lint: 运行代码规则检测
ng test: 运行单元测试
ng e2e：运行端到端测试
ng add: 添加一个第三方库到项目中，并且将其自定义配置也添加到项目中。如何写一个可以用ng add添加的自定义配置的第三方包？

更多用法更新于 github

https://github.com/deepthan/blog-angular

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of What is Angular cli? how to use?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Dead Rails - How To Tame Wolves

4 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1657

CakePHP Tutorial

1415

Laravel Tutorial

1309

PHP Tutorial

1257

C# Tutorial

1230

Related knowledge

Let's talk about metadata and decorators in Angular Feb 28, 2022 am 11:10 AM

This article continues the learning of Angular, takes you to understand the metadata and decorators in Angular, and briefly understands their usage. I hope it will be helpful to everyone!

How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

An article exploring server-side rendering (SSR) in Angular Dec 27, 2022 pm 07:24 PM

Do you know Angular Universal? It can help the website provide better SEO support!

Detailed explanation of angular learning state manager NgRx May 25, 2022 am 11:01 AM

This article will give you an in-depth understanding of Angular's state manager NgRx and introduce how to use NgRx. I hope it will be helpful to you!

A brief analysis of how to use monaco-editor in angular Oct 17, 2022 pm 08:04 PM

How to use monaco-editor in angular? The following article records the use of monaco-editor in angular that was used in a recent business. I hope it will be helpful to everyone!

Angular + NG-ZORRO quickly develop a backend system Apr 21, 2022 am 10:45 AM

This article will share with you an Angular practical experience and learn how to quickly develop a backend system using angualr combined with ng-zorro. I hope it will be helpful to everyone!

How to use PHP and Angular for front-end development May 11, 2023 pm 04:04 PM

With the rapid development of the Internet, front-end development technology is also constantly improving and iterating. PHP and Angular are two technologies widely used in front-end development. PHP is a server-side scripting language that can handle tasks such as processing forms, generating dynamic pages, and managing access permissions. Angular is a JavaScript framework that can be used to develop single-page applications and build componentized web applications. This article will introduce how to use PHP and Angular for front-end development, and how to combine them

Token-based authentication with Angular and Node Sep 01, 2023 pm 02:01 PM

Authentication is one of the most important parts of any web application. This tutorial discusses token-based authentication systems and how they differ from traditional login systems. By the end of this tutorial, you will see a fully working demo written in Angular and Node.js. Traditional Authentication Systems Before moving on to token-based authentication systems, let’s take a look at traditional authentication systems. The user provides their username and password in the login form and clicks Login. After making the request, authenticate the user on the backend by querying the database. If the request is valid, a session is created using the user information obtained from the database, and the session information is returned in the response header so that the session ID is stored in the browser. Provides access to applications subject to

See all articles