Angular cli란 무엇인가요? 사용하는 방법?

Angular CLI란 무엇인가요? 이 글은 Angular의 Angular cli를 안내하고 Angular cli 사용 방법을 소개합니다. 도움이 되기를 바랍니다.

1. Angular cli란 무엇입니까

Angular 애플리케이션을 초기화, 개발, 빌드 및 유지하는 데 사용할 수 있는 명령줄 인터페이스 도구입니다. [관련 튜토리얼 추천 : "angular tutorial"]

2.npm 없이

설치하는 방법 먼저 nodejs를 다운로드

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

npm install -g @angular/cli

제거하려면 -g-g

npm uninstall -g @angular/cli

3. 如何使用

new|n指n是new的缩写，效果相同，下同。

3.1 创建项目(new | n)

ng new my-project

它会创建一个angular基础项目并且下载依赖运行项目，默认端口是4200。

可能需要用到的自定义内容

用法形如：

 ng new my-project --xxx=x

以下不特殊注明默认值均为false

参数	意义
`--force=true	false`
`--routing=true	false`
`--skipInstall=true	false`
`--skipTests=true	false`
`--force=true	false`
`--style=css	scss
`--packageManager=npm	yarn
--prefix=prefix	指定选择器的前缀（组件、指令），如传入--prefix=dep则组件的selector会成为dep-xxx，

呀，创建的时候没有自定义，怎么补救呢？ 直接在angular.json中改~

3.2 新建文件(generate | g)

新建一个基础文件，里面有预设的代码片段。如ng generate service demo，则会在当前文件夹新建一个demo.service.ts。

命令	作用	简写
ng generate module xx	新建模块	ng g m xx
ng generate component xx	新建组件	ng g c xx
ng generate directive xx	新建指令	ng g d xx
ng generate service xx	新建服务	ng g s xx
ng generate pipe xx	新建管道	ng g p xx

还有个更简单的方法：

vscode 中下载Angular Files插件，搜索alexiv.vscode-angular2-files即可找到。想在哪里创建点哪里。用起来爽歪歪。后面会写一个vscode开发angular好用的插件~

3.3 运行项目(serve | s)

3를 가져와야 합니다. new|n은 n이 다음의 약어임을 의미합니다. 새로운, 효과는 동일합니다. 아래와 동일합니다.

配置	意义
--host=xx	设置应用的主机地址，别人可以根据这个地址访问你启动的应用。xx可以是你的ip或者0.0.0.0
--open=true|false	true则在启动项目后自动打开页面，简写： ng server -o
--port	设置启动的端口号，避免启动多个项目占用同一个端口启动不起来
--proxyConfig=xx	设置代理文件
--watch=true|false	是否在代码更改时自动重新构建刷新页面，默认true
--aot=true|false { 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" } ], ... } }, } } } } }

3.1 프로젝트 만들기(🎜 🎜new | n🎜🎜🎜)🎜

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

🎜Angular 기본 프로젝트를 생성하고 프로젝트를 실행하기 위한 종속성을 다운로드합니다. 🎜🎜사용해야 할 사용자 정의 콘텐츠🎜🎜사용 형식은 다음과 같습니다.🎜

ng update

🎜🎜다음 기본값은 구체적으로 지정하지 않으면 false입니다🎜🎜🎜🎜`--force=true🎜🎜false`🎜🎜🎜`--routing=true 🎜🎜false` 🎜🎜🎜`--skipInstall=true🎜🎜false`🎜🎜🎜`--skipTests=true🎜🎜false`🎜🎜🎜`--force=true🎜🎜 false`🎜🎜 🎜`--style=css🎜🎜scss🎜🎜🎜`--packageManager=npm🎜🎜yarn🎜🎜🎜--prefix=prefix 🎜🎜선택 지정 장치의 접두사(구성 요소, 명령)입니다. --prefix=dep가 전달되면 구성 요소의 선택기가 dep-xxx가 됩니다. 🎜🎜🎜🎜🎜🎜 응, 생성해 커스터마이징이 안되는 경우 어떻게 해결하나요? angular.json에서 직접 변경~🎜🎜

🎜3.2 새 파일을 만듭니다(🎜🎜generate | g🎜🎜🎜)🎜

🎜미리 설정된 코드 조각이 포함된 새 기본 파일을 만듭니다. 예를 들어, ng generate service 데모는 현재 폴더에 새로운 demo.service.ts를 생성합니다. 🎜

매개변수	의미

🎜 🎜ng 모듈 xx 생성🎜🎜새 모듈🎜🎜ng g m xx🎜🎜🎜ng 생성 구성요소 xx🎜🎜새 구성요소🎜🎜ng g c xx🎜🎜🎜ng 생성 지시문 xx🎜🎜새 지시문🎜🎜ng g d xx🎜🎜🎜ng generate service xx🎜🎜New service🎜🎜ng g s xx🎜🎜🎜ng generate Pipe xx🎜🎜New Pipe🎜🎜ng g p xx🎜🎜🎜🎜🎜더 간단한 것이 있습니다 방법: 🎜🎜vscode에서 Angular Files 플러그인을 다운로드하고 alexiv.vscode-angular2-files를 검색하여 찾으세요. 원하는 곳 어디든 생성하세요. 사용감이 좋습니다. 나중에 vscode로 각도 개발에 유용한 플러그인을 작성하겠습니다~🎜

🎜3.3 프로젝트 실행(🎜🎜serve | s🎜🎜🎜)🎜

명령	함수	약어

🎜🎜--host=xx🎜🎜애플리케이션의 호스트 주소를 설정합니다. 다른 사람이 귀하가 시작한 애플리케이션에 액세스할 수 있습니다. 이 주소에. xx는 IP 또는 0.0.0.0🎜🎜🎜--open=true|false🎜🎜true가 시작 중일 수 있습니다. 자동으로 열립니다. 프로젝트 뒤의 페이지, 약어: ng server -o🎜🎜🎜--port🎜🎜동일한 프로젝트를 여러 개 시작하지 않으려면 시작 포트 번호를 설정하세요. time 포트를 시작할 수 없습니다🎜🎜🎜--proxyConfig=xx🎜🎜프록시 파일 설정🎜🎜🎜--watch=true|false🎜 🎜 코드 변경 시 새로 고침 페이지를 자동으로 다시 빌드할지 여부, 기본값은 true🎜🎜🎜--aot=true|false🎜🎜사전 컴파일 모드에서 프로젝트를 시작할지 여부, 기본값은 거짓입니다. 🎜단점: 프로젝트 실행 시간이 늘어납니다. 🎜장점: 개발 중에는 문제가 없을 때도 있지만 패키징 후 문제가 발생하고 온라인에 접속하면 로컬에서 활성화하여 오류를 디버그할 수 있습니다. 🎜🎜🎜🎜

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"
                                }
                            ],
                            ...
                        }
                    },
                    
                }
            }
        }
    }
}

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

• 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>

• 先查看有哪些可以更新

ng update

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

ng update --all

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

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.

强制更新办法:

ng update --all --force

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

ng config --global cli.packageManager yarn

ng set --global packageManager=yarn

3.6 其他

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

更多用法更新于 github

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

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

위 내용은 Angular cli란 무엇인가요? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!