Angular cli とは何ですか?使い方？

Angular cli とは何ですか?この記事では、Angular の Angular cli について説明し、Angular cli の使用方法を紹介します。

1. Angular cli とは

初期化、開発、ビルドに使用できるコマンド ライン インターフェイス ツールです。 Angular アプリケーションのメンテナンス。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

2. インストール方法

npm を使用せずに、最初に Nodejs をダウンロードします

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

npm install -g @angular/cli

アンインストールする場合は、-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#`--routing=truefalse`false`false`false`scssyarn--prefix=prefixdep-xxx になります。カスタマイズを作成するときにそのようなことはありません、それを修正するにはどうすればよいですか? angular.json

false`
	#`--skipInstall=true
	`--skipTests=true
	`--force=true
	`--style=css
	`--packageManager=npm
セレクターのプレフィックス (コンポーネント、ディレクティブ) を指定します。たとえば、次のように渡します。 --prefix=depすると、コンポーネントのセレクターは	,

~

3.2 で直接変更します。新しいファイルを作成します (

generate | g )プリセット コード スニペットを含む新しい基本ファイルを作成します。たとえば、nggenerateservicedemo は、現在のフォルダーに新しい

demo.service.ts

を作成します。

コマンド関数ng 生成モジュール xx新しいモジュール 新しいコンポーネント 新しいコマンド新しいサービス新しいパイプもっと簡単な方法があります。vscode で Angular Files プラグインをダウンロードし、

省略形
ng g m xx		ng コンポーネント xx
ng を生成g c xx		ng ディレクティブを生成 xx
ng g d xx		ng サービスを生成xx
ng g s xx		ng パイプを生成します xx
ng g p xx

alexiv.vscode-angular2-files を検索します。

が見つかります。好きな場所に作成します。とても使い心地が良いです。後で、vscode を使用した Angular の開発に役立つプラグインを作成します~

3.3 プロジェクトを実行します (

serve | s)

構成意味##- -host=xxアプリケーションのホスト アドレスを設定します。他の人は、このアドレスに基づいて、あなたが起動したアプリケーションにアクセスできます。 ## です。 #true は、プロジェクトの開始後に自動的にページを開きます。省略形: ng server -o##--port 設定エージェントfile#--watch=true|false#--aot=true|false

3.4 打包项目（build | b）

xx は IP または 0.0.0.0	##--open=true|false
	#同じポートを占有して起動に失敗する複数のプロジェクトの起動を避けるために、起動ポート番号を設定します。
#--proxyConfig=xx
#コード変更時に更新ページを自動的に再構築するかどうか、デフォルトは true
プロジェクトをプリコンパイル モードで開始するかどうか、デフォルトは false です。 欠点: プロジェクトの実行時間が増加します。 利点: 開発中に問題がない場合もありますが、パッケージの起動後に問題が発生した場合は、ローカルで有効にしてエラーをデバッグできます。

配置	意义
--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 中国語 Web サイトの他の関連記事を参照してください。