Angular cli とは何ですか?この記事では、Angular の Angular cli について説明し、Angular cli の使用方法を紹介します。
初期化、開発、ビルドに使用できるコマンド ライン インターフェイス ツールです。 Angular アプリケーションのメンテナンス。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
npm を使用せずに、最初に Nodejs をダウンロードします
https://nodejs.org/en/download/
npm install -g @angular/cli
アンインストールする場合は、-g
npm uninstall -g @angular/cli
new|n は、n は new の略で、効果は同じ、以下同様です。
ng new my-project
ng new my-project --xxx=x
特に指定のない限り、次のデフォルト値は false
| 意味 | |
|---|---|
| false` | #`--routing=true |
| #`--skipInstall=true | |
| `--skipTests=true | |
| `--force=true | |
| `--style=css | |
| `--packageManager=npm | |
| --prefix=prefix | |
セレクターのプレフィックス (コンポーネント、ディレクティブ) を指定します。たとえば、次のように渡します。 --prefix=depすると、コンポーネントのセレクターは | dep-xxx, |
3.2 で直接変更します。新しいファイルを作成します (
を作成します。
| 省略形 | ||
|---|---|---|
| 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 | もっと簡単な方法があります。 |
が見つかります。好きな場所に作成します。とても使い心地が良いです。後で、vscode を使用した Angular の開発に役立つプラグインを作成します~
3.3 プロジェクトを実行します (
xx は IP または 0.0.0.0 | ##--open=true|false | ## です。 #true は、プロジェクトの開始後に自動的にページを開きます。省略形:
| ##--port#同じポートを占有して起動に失敗する複数のプロジェクトの起動を避けるために、起動ポート番号を設定します。 |
#--proxyConfig=xx | 設定エージェントfile|
#コード変更時に更新ページを自動的に再構築するかどうか、デフォルトは true | #--aot=true|false |
プロジェクトをプリコンパイル モードで開始するかどうか、デフォルトは 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则以生产环境的方式打包，进行摇树优化等操作。 |
当我需要打成不同的环境包时，可以使用以下方法：
在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"
}
],
...
}
},
}
}
}
}
}之后可以进行不同的环境打包：
ng build --c=qang build --c=sitng build --c=production--c 是 --configuration的缩写
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
ng lint: 运行代码规则检测ng test: 运行单元测试ng e2e： 运行端到端测试ng add: 添加一个第三方库到项目中，并且将其自定义配置也添加到项目中。如何写一个可以用ng add添加的自定义配置的第三方包？
更多用法更新于 github
https://github.com/deepthan/blog-angular
更多编程相关知识，请访问：编程视频！！
以上がAngular cli とは何ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
