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

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!

Related labels：

angular

source：juejin.cn

Previous article：A brief discussion on the usage of the Buffer module in Nodejs and see how to encode and decode binary data packets Next article：How to convert time to milliseconds in javascript

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