Angular CLI
<div><div>
<h1>一 Angular CLI 是啥</h1>
<p> Angular CLI 是一个命令行接口(Angular Command Line Interface)，用于实现自动化开发工作流程。能让开发者更容易搭建和运行Angular工程。</p>
<blockquote>
<p>Angular CLI 是Angular开发的一个辅助工具。</p>
</blockquote>
<h1>二 Angular CLI 安装</h1>
<p> 安装Angular CLI之前，先得安装Node.js和NPM。</p>
<blockquote>
<p>Angular需要Node.js的8.x或10.x版本。一般安装Node.js之后npm也顺带给安装上了。我们可以通过node -v 命令和 npm -v 命令来查看node.js或者npm是否安装。</p>
</blockquote>
<p> 在安装了Node.js和npm之后，咱们就可以用如下命令来安装Angular CLI</p>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-ruby"><code class="language-ruby"><span class="token comment"># window平台上使用如下命令
npm install <span class="token operator">-g <span class="token variable">@angular<span class="token operator">/cli
<span class="token comment"># mac或者linux平台上使用如下命令
sudo npm install <span class="token operator">-g angular<span class="token operator">-cli
</span></span></span></span></span></span></span></code></pre>
</div>
<p> 之后可以通过 ng version 命令来验证Angular CLI是否成功安装。</p>
<h1>三 Angular CLI 命令</h1>
<h2>3.1 ng new</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng new <name>
ng n <name>
</code></pre>
</div>
<p> ng new命令用于创建一个新的Angular项目。</p>
<blockquote>
<p>ng new 会创建目录并且创建Angular项目。</p>
</blockquote>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>目录名称和初始Angular项目的名称</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--collection=collection</td>
<td>别名：-c。用于生成初始应用程序的外部库，比如ng-zorro-antd</td>
</tr>
<tr>
<td>--commit=true|false</td>
<td>默认值：true。初始git存储库提交信息</td>
</tr>
<tr>
<td>--createApplication=true|false</td>
<td>默认值：true。如果为true，则在新工作空间的src文件夹中创建一个新的初始应用程序项目。如果为false，则创建一个没有初始应用程序的空工作区。然后，您可以使用ng generate application命令，以便在projects文件夹中创建所有应用程序</td>
</tr>
<tr>
<td>--defaults=true|false</td>
<td>如果为true。则禁用具有默认选项的交互式输入提示</td>
</tr>
<tr>
<td>--directory=directory</td>
<td>用于创建工作空间的目录名称</td>
</tr>
<tr>
<td>--dryRun=true|false</td>
<td>默认值：false,别名：-d。如果为true，则运行并报告活动而不写出结果</td>
</tr>
<tr>
<td>--experimentalIvy=true|false</td>
<td>默认值：false。如果为true，则创建一个使用Ivy渲染引擎的新应用程序</td>
</tr>
<tr>
<td>--force=true|false</td>
<td>默认值：false,别名：-f。是否覆盖现有文件</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--inlineStyle=true|false</td>
<td>默认值：false,别名：-s。如果为true，则在组件TS文件中包含内联样式。默认情况下，在组件TS文件中创建并引用外部样式文件</td>
</tr>
<tr>
<td>--inlineTemplate=true|false</td>
<td>默认值：false,别名：-t。如果为true，则在组件TS文件中包含模板内联。默认情况下，在组件TS文件中创建并引用外部模板文件</td>
</tr>
<tr>
<td>--interactive=true|false</td>
<td>如果为false。则禁用交互式输入提示</td>
</tr>
<tr>
<td>--minimal=true|false</td>
<td>默认值：false。如果为true，则创建一个没有任何测试框架的项目</td>
</tr>
<tr>
<td>--newProjectRoot=newProjectRoot</td>
<td>默认值：projects。相对于新工作区根目录，将创建新项目的路径</td>
</tr>
<tr>
<td>--prefix=prefix</td>
<td>默认值：app,别名：-p。要应用于初始项目的生成选择器的前缀</td>
</tr>
<tr>
<td>--routing=true|false</td>
<td>默认值：false。如果为true，则为初始项目生成路由模块</td>
</tr>
<tr>
<td>--skipGit=true|false</td>
<td>默认值：false,别名：-g。如果为true，则不初始化git存储库</td>
</tr>
<tr>
<td>--skipInstall=true|false</td>
<td>默认值：false。如果为true，则不安装依赖包</td>
</tr>
<tr>
<td>--skipTests=true|false</td>
<td>默认值：false,别名：-S。如果为true，则不会为新项目生成“spec.ts”测试文件</td>
</tr>
<tr>
<td>--style=css|scss|sass|less|styl</td>
<td>默认值：css。用于样式文件的文件扩展名或预处理器</td>
</tr>
<tr>
<td>--verbose=true|false</td>
<td>默认值：false,别名：-v。如果为true，则向输出日志记录添加更多详细信息</td>
</tr>
<tr>
<td>--viewEncapsulation=Emulated|Native|None|ShadowDom</td>
<td>在初始项目中使用的视图封装策略</td>
</tr>
</tbody>
</table>
<h2>3.2 ng add</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-csharp"><code class="language-csharp">ng <span class="token keyword">add <span class="token operator"><collection<span class="token operator">> <span class="token punctuation">
</span></span></span></span></span></code></pre>
</div>
<p> <br>
为项目添加对外部库的支持。比如 ng add ng-zorro-antd 命令添加ng-zorro-antd ui框架。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><collection></td>
<td>要添加的包，外部库</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>--defaults=true|false</td>
<td>如果为true。则禁用具有默认选项的交互式输入提示</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--interactive=true|false</td>
<td>如果为false。则禁用交互式输入提示</td>
</tr>
</tbody>
</table>
<h2>3.3 ng generate</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate <schematic>
ng g <schematic>
</code></pre>
</div>
<p> 根据schematic的设置生成或修改对应的文件。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><schematic></td>
<td>描述我们要生成的对象是啥</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--defaults=true|false</td>
<td>如果为true，则禁用具有默认选项的交互式输入提示</td>
</tr>
<tr>
<td>--dryRun=true|false</td>
<td>默认值：false,别名：-d。如果为true，则运行并报告活动而不写出结果</td>
</tr>
<tr>
<td>--force=true|false</td>
<td>默认值：false,别名：-f。如果为true，则强制覆盖现有文件</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--interactive=true|false</td>
<td>如果为false，则禁用交互式输入提示</td>
</tr>
</tbody>
</table>
<p> ng generate可以生成或者修改多种类型的文件，通过schematic来指定生成或者修改的文件类型。schematic可以设置的类型有：appShell、application、class、component、directive、enum、guard、interface、library、module、pipe、service、serviceWorker、universal。</p>
<h3>3.3.1 appShell</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate appShell
ng g appShell
</code></pre>
</div>
<p> 生成用于运行应用程序的服务器端版本的应用程序shell。</p>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--appDir=appDir</td>
<td>默认值：app。应用程序目录的名称</td>
</tr>
<tr>
<td>--appId=appId</td>
<td>默认值：serverApp。要在withServerTransition()中使用的应用程序ID</td>
</tr>
<tr>
<td>--clientProject=clientProject</td>
<td>相关客户端应用程序的名称</td>
</tr>
<tr>
<td>--index=index</td>
<td>默认值：index.html。index文件的名字</td>
</tr>
<tr>
<td>--main=main</td>
<td>默认值：main.server.ts。主入口点文件的名称</td>
</tr>
<tr>
<td>--name=name</td>
<td>通用应用程序的HTML选择器</td>
</tr>
<tr>
<td>--outDir=outDir</td>
<td>默认值：dist-server。构建结果的输出目录</td>
</tr>
<tr>
<td>--root=root</td>
<td>默认值：src。应用程序的根目录</td>
</tr>
<tr>
<td>--rootModuleClassName=rootModuleClassName</td>
<td>默认值：AppServerModule。根模块类的名称</td>
</tr>
<tr>
<td>--rootModuleFileName=rootModuleFileName</td>
<td>默认值：app.server.module.ts。根模块文件的名称</td>
</tr>
<tr>
<td>--route=route</td>
<td>默认值：shell。用于生成app shell的路径路径</td>
</tr>
<tr>
<td>--sourceDir=sourceDir</td>
<td>默认值：src,别名：-D。源目录的路径</td>
</tr>
<tr>
<td>--test=test</td>
<td>测试入口点文件的名称</td>
</tr>
<tr>
<td>--testTsconfigFileName=testTsconfigFileName</td>
<td>默认值：tsconfig.spec。测试的TypeScript配置文件的名称</td>
</tr>
<tr>
<td>--tsconfigFileName=tsconfigFileName</td>
<td>默认值：tsconfig.server。TypeScript配置文件的名称</td>
</tr>
<tr>
<td>--universalProject=universalProject</td>
<td>相关通用应用程序的名称</td>
</tr>
</tbody>
</table>
<h3>3.3.2 application</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate application <name>
ng g application <name>
</code></pre>
</div>
<p> 在当前工作区的“projects”文件夹下生成一个新的Angular应用。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>新app的名称</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--experimentalIvy=true|false</td>
<td>默认值： false。如果为True，则创建一个使用Ivy渲染引擎的新应用</td>
</tr>
<tr>
<td>--inlineStyle=true|false</td>
<td>默认值：false,别名：-s。 如果为true，则在根component.ts文件中包含内联样式。只能嵌入CSS样式。默认值为false，表示在根component.ts文件中创建并引用外部样式文件</td>
</tr>
<tr>
<td>--inlineTemplate=true|false</td>
<td>默认值：false,别名：-t。如果为true，则在根component.ts文件中包含内联模板。默认值为false，表示在根component.ts文件中创建并引用外部模板文件</td>
</tr>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false。如果为true，则在生成应用程序后应用lint修复</td>
</tr>
<tr>
<td>--minimal=true|false</td>
<td>默认值： false。如果为true，则创建一个没有任何测试框架的简单项目</td>
</tr>
<tr>
<td>--prefix=prefix</td>
<td>默认值： app，别名： -p。应用于生成的选择器的前缀</td>
</tr>
<tr>
<td>--routing=true|false</td>
<td>默认值：false。如果为true，则创建路由NgModule</td>
</tr>
<tr>
<td>--skipInstall=true|false</td>
<td>默认值：false。跳过安装依赖包</td>
</tr>
<tr>
<td>--skipPackageJson=true|false</td>
<td>默认值： false。如果为true，则不会向“package.json”文件添加依赖项</td>
</tr>
<tr>
<td>--skipTests=true|false</td>
<td>默认值： false,别名： -S。如果为true，则不会为应用程序创建“spec.ts”测试文件</td>
</tr>
<tr>
<td>--style=css|scss|sass|less|styl</td>
<td>默认值： css。用于样式文件的文件扩展名或预处理器</td>
</tr>
<tr>
<td>--viewEncapsulation=Emulated|Native|None|ShadowDom</td>
<td>要在新应用中使用的视图封装策略</td>
</tr>
</tbody>
</table>
<h3>3.3.3 class</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-ruby"><code class="language-ruby">ng generate <span class="token keyword">class <span class="token operator"><name<span class="token operator">> <span class="token punctuation">
ng g <span class="token keyword">class <span class="token operator"><name<span class="token operator">> <span class="token punctuation">
</span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p> 在给定或默认项目中创建类。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>类名字</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false。如果为true，则在生成类后应用lint修复</td>
</tr>
<tr>
<td>--project=project</td>
<td>项目名称</td>
</tr>
<tr>
<td>--skipTests=true|false</td>
<td>默认值：false。如果为true，则不会为新类创建“spec.ts”测试文件</td>
</tr>
<tr>
<td>--type=type</td>
<td>将开发人员定义的类型添加到文件名中，格式为“name.type.ts”</td>
</tr>
</tbody>
</table>
<h3>3.3.4 component</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate component <name>
ng g component <name>
</code></pre>
</div>
<p> 在给定或默认项目中创建组件。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>组件名字</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--changeDetection=Default|OnPush</td>
<td>默认值：Default,别名：-c。要在新组件中使用的更改检测策略</td>
</tr>
<tr>
<td>--entryComponent=true|false</td>
<td>默认值：false。如果为true，则新组件是声明NgModule的入口组件</td>
</tr>
<tr>
<td>--export=true|false</td>
<td>默认值：false。如果为true，则声明NgModule导出此组件</td>
</tr>
<tr>
<td>--flat=true|false</td>
<td>默认值：false。如果为true，则在当前项目的顶级创建新文件</td>
</tr>
<tr>
<td>--inlineStyle=true|false</td>
<td>默认值：false，别名：-s。如果为true，则在component.ts文件中包含内联样式。只能嵌入CSS样式。默认情况下，在component.ts文件中创建并引用外部样式文件</td>
</tr>
<tr>
<td>--inlineTemplate=true|false</td>
<td>默认值：false，别名：-t。如果为true，则在component.ts文件中包含内联模板。默认情况下，会在component.ts文件中创建并引用外部模板文件</td>
</tr>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false。如果为true，则在生成组件后应用lint修复</td>
</tr>
<tr>
<td>--module=module</td>
<td>别名：-m。声明NgModule</td>
</tr>
<tr>
<td>--prefix=prefix</td>
<td>别名：-p。要应用于生成的组件选择器的前缀</td>
</tr>
<tr>
<td>--project=project</td>
<td>项目名称</td>
</tr>
<tr>
<td>--selector=selector</td>
<td>用于此组件的HTML选择器</td>
</tr>
<tr>
<td>--skipImport=true|false</td>
<td>默认值：false。如果为true，则不会将此组件导入到拥有的NgModule中</td>
</tr>
<tr>
<td>--skipTests=true|false</td>
<td>默认值：false。如果为true，则不会为新组件创建“spec.ts”测试文件</td>
</tr>
<tr>
<td>--style=css|scss|sass|less|styl</td>
<td>默认值：css.用于样式文件的文件扩展名或预处理器</td>
</tr>
<tr>
<td>--viewEncapsulation=Emulated|Native|None|ShadowDom</td>
<td>别名：-v.要在新组件中使用的视图封装策略</td>
</tr>
</tbody>
</table>
<h3>3.3.5 directive</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate directive <name>
ng g directive <name>
</code></pre>
</div>
<p> 在给定或默认项目中创建新的通用指令。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>指令名字</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--export=true|false</td>
<td>默认值：false。如果为true，则声明NgModule会导出此指令</td>
</tr>
<tr>
<td>--flat=true|false</td>
<td>默认值：true。如果为true，则在当前项目的顶级创建新文件</td>
</tr>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false.如果为true，则在生成指令后应用lint修复</td>
</tr>
<tr>
<td>--module=module</td>
<td>别名：-m.声明NgModule</td>
</tr>
<tr>
<td>--prefix=prefix</td>
<td>别名：-p.要应用于生成的选择器的前缀</td>
</tr>
<tr>
<td>--project=project</td>
<td>项目名称</td>
</tr>
<tr>
<td>--selector=selector</td>
<td>用于此指令的HTML选择器</td>
</tr>
<tr>
<td>--skipImport=true|false</td>
<td>默认值：false。如果为true，则不会将此指令导入到拥有的NgModule中</td>
</tr>
<tr>
<td>--skipTests=true|false</td>
<td>默认值：false。如果为true，则不会为新类创建“spec.ts”测试文件</td>
</tr>
</tbody>
</table>
<h3>3.3.6 enum</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-rust"><code class="language-rust">ng generate <span class="token keyword">enum <span class="token operator"><name<span class="token operator">> <span class="token punctuation">
ng g <span class="token keyword">enum <span class="token operator"><name<span class="token operator">> <span class="token punctuation">
</span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p> 为给定或默认项目生成新的通用枚举。</p>
<table>
<thead>
<tr><th>参数</th><th>名字</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>枚举enum名字</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>名字</th></tr>
</thead>
<tbody>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false.如果为true，则在生成枚举后应用lint修复</td>
</tr>
<tr>
<td>--project=project</td>
<td>要在其中创建枚举的项目的名称。默认值是工作区的已配置默认项目</td>
</tr>
</tbody>
</table>
<h3>3.3.7 guard</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate guard <name>
ng g guard <name>
</code></pre>
</div>
<p> <br>
在给定或默认项目中生成新的通用路由守卫定义。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>路由守卫的名字</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>--flat=true|false</td>
<td>默认值：true。如果为true，则在当前项目的顶级创建新文件</td>
</tr>
<tr>
<td>--implements</td>
<td>指定要实现的接口</td>
</tr>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false.如果为true，则在生成路由守卫后应用lint修复</td>
</tr>
<tr>
<td>--project=project</td>
<td>项目名称</td>
</tr>
<tr>
<td>--skipTests=true|false</td>
<td>默认值：false。如果为true，则不会为路由守卫创建“spec.ts”测试文件</td>
</tr>
</tbody>
</table>
<h3>3.3.8 interface</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-go"><code class="language-go">ng generate <span class="token keyword">interface <span class="token operator"><name<span class="token operator">> <span class="token operator"><<span class="token keyword">type<span class="token operator">> <span class="token punctuation">
ng g <span class="token keyword">interface <span class="token operator"><name<span class="token operator">> <span class="token operator"><<span class="token keyword">type<span class="token operator">> <span class="token punctuation">
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p> 在给定或默认项目中创建新的通用接口定义。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>接口名字</td>
</tr>
<tr>
<td><type></td>
<td>将开发人员定义的类型添加到文件名中，格式为“name.type.ts”</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false。如果为true，则在生成接口后应用lint修复</td>
</tr>
<tr>
<td>--project=project</td>
<td>项目名字</td>
</tr>
</tbody>
</table>
<h3>3.3.9 library</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate library <name>
ng g library <name>
</code></pre>
</div>
<p> 在当前工作空间中创建新的通用库项目</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>库的名称</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--entryFile=entryFile</td>
<td>默认值：public_api。相对于工作空间根目录创建库的公共API文件的路径</td>
</tr>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false。如果为true，则在生成库后应用lint修复</td>
</tr>
<tr>
<td>--prefix=prefix</td>
<td>默认值：lib，别名：-p。要应用于生成的选择器的前缀</td>
</tr>
<tr>
<td>--skipInstall=true|false</td>
<td>默认值：false。如果为true，则不安装依赖包</td>
</tr>
<tr>
<td>--skipPackageJson=true|false</td>
<td>默认值：false。如果为true，则不会向“package.json”文件添加依赖项</td>
</tr>
<tr>
<td>--skipTsConfig=true|false</td>
<td>默认值：false。如果为true，则不更新“tsconfig.json”以添加新库的路径映射。在应用程序中使用库需要路径映射，但可以在此处禁用以简化开发</td>
</tr>
</tbody>
</table>
<h3>3.3.10 module</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-ruby"><code class="language-ruby">ng generate <span class="token keyword">module <span class="token operator"><name<span class="token operator">> <span class="token punctuation">
ng g <span class="token keyword">module <span class="token operator"><name<span class="token operator">> <span class="token punctuation">
</span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p> 在给定或默认项目中创建新的通用NgModule。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>NgModule对应的名字</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--flat=true|false</td>
<td>默认值：false。如果为true，则在当前项目根目录的顶级创建新文件</td>
</tr>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false。如果为true，则在生成模块后应用lint修复</td>
</tr>
<tr>
<td>--module=module</td>
<td>别名：-m。声明NgModule</td>
</tr>
<tr>
<td>--project=project</td>
<td>项目名称</td>
</tr>
<tr>
<td>--routing=true|false</td>
<td>默认值：false。如果为true，则创建路由模块</td>
</tr>
<tr>
<td>--routingScope=Child|Root</td>
<td>默认值：Child。新路由模块的作用范围</td>
</tr>
</tbody>
</table>
<h3>3.3.11 pipe</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate pipe <name>
ng g pipe <name>
</code></pre>
</div>
<p> 在给定或默认项目中创建新的通用管道。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>管道对应的名字</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--export=true|false</td>
<td>默认值：false。如果为true，则声明NgModule导出此管道</td>
</tr>
<tr>
<td>--flat=true|false</td>
<td>默认值： true。如果为true，则在项目的顶级创建文件</td>
</tr>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false。如果为true，则在生成管道后应用lint修正</td>
</tr>
<tr>
<td>--module=module</td>
<td>别名：-m.声明NgModule</td>
</tr>
<tr>
<td>--project=project</td>
<td>项目名字</td>
</tr>
<tr>
<td>--skipImport=true|false</td>
<td>默认值：false。如果为true，则不会将此管道导入到拥有的NgModule中</td>
</tr>
<tr>
<td>--skipTests=true|false</td>
<td>默认值：false。如果为true，则不会为新管道创建“spec.ts”测试文件</td>
</tr>
</tbody>
</table>
<h3>3.3.12 service</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate service <name>
ng g service <name>
</code></pre>
</div>
<p> 在给定或默认项目中创建新的通用服务。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><name></td>
<td>通用服务对应的名字</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--flat=true|false</td>
<td>默认值：true。如果为true，则在项目的顶级创建文件</td>
</tr>
<tr>
<td>--lintFix=true|false</td>
<td>默认值：false。如果为true，则在生成管道后应用lint修正</td>
</tr>
<tr>
<td>--project=project</td>
<td>项目名称</td>
</tr>
<tr>
<td>--skipTests=true|false</td>
<td>默认值：false。如果为true，则不会为新服务创建“spec.ts”测试文件</td>
</tr>
</tbody>
</table>
<h3>3.3.13 serviceWorker</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate serviceWorker
ng g serviceWorker
</code></pre>
</div>
<p> 将此原理图传递给“run”命令以创建serviceWorker。</p>
<blockquote>
<p>serviceWorker是浏览器在后台独立于网页运行的一段脚本。他通过域名标识不同的网页。网页通过注册自己的serviceWorker，可以将一些相对独立的任务丢到serviceWorker里面运行，并最终通过postMessage进行通信。</p>
</blockquote>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--configuration=configuration</td>
<td>默认值：production。应用服务工作者的配置</td>
</tr>
<tr>
<td>--project=project</td>
<td>项目名称</td>
</tr>
<tr>
<td>--target=target</td>
<td>默认值：build。应用服务工作者的目标</td>
</tr>
</tbody>
</table>
<h3>3.3.14 universal</h3>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng generate universal
ng g universal
</code></pre>
</div>
<p> 将此原理图传递给“run”命令，为应用程序设置服务器端渲染。</p>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--appDir=appDir</td>
<td>默认值：app。应用程序文件夹的名称</td>
</tr>
<tr>
<td>--appId=appId</td>
<td>默认值：serverApp。用于转换的应用程序标识符</td>
</tr>
<tr>
<td>--clientProject=clientProject</td>
<td>相关客户端应用程序的名称。需要代替“项目”</td>
</tr>
<tr>
<td>--main=main</td>
<td>默认值：main.server.ts。主入口点文件的名称</td>
</tr>
<tr>
<td>--rootModuleClassName=rootModuleClassName</td>
<td>默认值：AppServerModule。根NgModule类的名称</td>
</tr>
<tr>
<td>--rootModuleFileName=rootModuleFileName</td>
<td>默认值：app.server.module.ts。根NgModule文件的名称</td>
</tr>
<tr>
<td>--skipInstall=true|false</td>
<td>默认值：false。如果为true，则不安装依赖项的包</td>
</tr>
<tr>
<td>--test=test</td>
<td>测试入口点文件的名称</td>
</tr>
<tr>
<td>--testTsconfigFileName=testTsconfigFileName</td>
<td>默认值：tsconfig.spec。测试的TypeScript配置文件的名称</td>
</tr>
<tr>
<td>--tsconfigFileName=tsconfigFileName</td>
<td>默认值：tsconfig.server。TypeScript配置文件的名称</td>
</tr>
</tbody>
</table>
<h2>3.4 ng build</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng build <project>
ng b <project>
</code></pre>
</div>
<p> <br>
将Angular应用程序编译到给定输出路径中名为dist /的输出目录中。前提是必须在工作空间目录中执行。</p>
<p> 执行ng build命令之后将会做下面几件事情：</p>
<ul>
<li>Angular CLI 从 .angular-cli.json 文件中加载配置信息</li>
<li>Angular CLI 运行 Webpack 打包项目相关的 JavaScript 与 CSS 文件</li>
<li>打包后的资源，将被输出到配置文件中 outDir 所指定的目录，默认是输出到 dist 目录</li>
</ul>
<table>
<thead>
<tr><th>参数</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><project></td>
<td>要构建的项目的名称。可以是应用程序或库</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>--aot=true|false</td>
<td>默认值：false。是否使用AOT编译。AOT(预编译)；JIT(即使编译)</td>
</tr>
<tr>
<td>--baseHref=baseHref</td>
<td>设置 index.html 文件中 <base> 元素的链接地址</td>
</tr>
<tr>
<td>--buildEventLog=buildEventLog</td>
<td>构建事件协议事件的输出文件路径</td>
</tr>
<tr>
<td>--buildOptimizer=true|false</td>
<td>默认值：false。使用'aot'选项时，启用'@ angular-devkit / build-optimizer'优化</td>
</tr>
<tr>
<td>--commonChunk=true|false</td>
<td>默认值：true。使用包含跨多个包使用的代码的单独包</td>
</tr>
<tr>
<td>--configuration=configuration</td>
<td>别名：-c。指定构建目标，在angular.json的“configurations”部分中指定。每个目标都附带该目标的选项默认配置</td>
</tr>
<tr>
<td>--deleteOutputPath=true|false</td>
<td>默认值：true。在构建之前删除输出路径</td>
</tr>
<tr>
<td>--deployUrl=deployUrl</td>
<td>将部署文件的URL</td>
</tr>
<tr>
<td>--es5BrowserSupport=true|false</td>
<td>默认值：false。启用有条件加载的ES2015 polyfill。</td>
</tr>
<tr>
<td>--extractCss=true|false</td>
<td>默认值：false。将全局样式中的css提取为css文件而不是js文件</td>
</tr>
<tr>
<td>--extractLicenses=true|false</td>
<td>默认值：false。在单独的文件中提取所有许可证</td>
</tr>
<tr>
<td>--forkTypeChecker=true|false</td>
<td>默认值：true。在fork进程中运行TypeScript类型检查器</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--i18nFile=i18nFile</td>
<td>用于i18n的本地化文件</td>
</tr>
<tr>
<td>--i18nFormat=i18nFormat</td>
<td>使用--i18n-file指定的本地化文件的格式</td>
</tr>
<tr>
<td>--i18nLocale=i18nLocale</td>
<td>用于i18n的语言环境</td>
</tr>
<tr>
<td>--i18nMissingTranslation=i18nMissingTranslation</td>
<td>如何处理i18n的缺失翻译</td>
</tr>
<tr>
<td>--index=index</td>
<td>index HTML 文件对应的名字</td>
</tr>
<tr>
<td>--lazyModules</td>
<td>将延迟加载的NgModule文件列表。将自动发现延迟路由器模块</td>
</tr>
<tr>
<td>--main=main</td>
<td>相对于当前工作空间的应用程序主入口点的完整路径</td>
</tr>
<tr>
<td>--namedChunks=true|false</td>
<td>默认值：true。使用延迟加载的块的文件名</td>
</tr>
<tr>
<td>--ngswConfigPath=ngswConfigPath</td>
<td>ngsw-config.json文件路径</td>
</tr>
<tr>
<td>--optimization=true|false</td>
<td>启用构建输出的优化</td>
</tr>
<tr>
<td>--outputHashing=none|all|media|bundles</td>
<td>默认值：none。定义输出文件名缓存清除散列模式</td>
</tr>
<tr>
<td>--outputPath=outputPath</td>
<td>新输出目录的完整路径，相对于当前工作空间。默认情况下，将输出写入当前项目中名为dist /的文件夹</td>
</tr>
<tr>
<td>--poll</td>
<td>启用并定义查看轮询时间段的文件(以毫秒为单位)</td>
</tr>
<tr>
<td>--polyfills=polyfills</td>
<td>polyfills文件的完整路径，相对于当前工作空间</td>
</tr>
<tr>
<td>--preserveSymlinks=true|false</td>
<td>默认值：false。解析模块时不要使用真实路径</td>
</tr>
<tr>
<td>--prod=true|false</td>
<td>如果为true，则将构建配置设置为生产目标</td>
</tr>
<tr>
<td>--profile=true|false</td>
<td>默认值：false。Chrome Profiler的输出配置文件事件</td>
</tr>
<tr>
<td>--progress=true|false</td>
<td>在构建时将进度记录到控制台</td>
</tr>
<tr>
<td>--resourcesOutputPath=resourcesOutputPath</td>
<td>相对于outputPath，将放置样式资源的路径</td>
</tr>
<tr>
<td>--serviceWorker=true|false</td>
<td>默认值：false。为生产版本生成serviceWorker配置</td>
</tr>
<tr>
<td>--showCircularDependencies=true|false</td>
<td>默认值：true。在构建上显示循环依赖性警告</td>
</tr>
<tr>
<td>--sourceMap=true|false</td>
<td>默认值：true。输出sourcemaps</td>
</tr>
<tr>
<td>--statsJson=true|false</td>
<td>默认值：false。生成'stats.json'文件，可以使用'webpack-bundle-analyzer'等工具进行分析</td>
</tr>
<tr>
<td>--subresourceIntegrity=true|false</td>
<td>默认值：false。允许使用子资源完整性验证</td>
</tr>
<tr>
<td>--tsConfig=tsConfig</td>
<td>TypeScript配置文件的完整路径，相对于当前工作空间</td>
</tr>
<tr>
<td>--vendorChunk=true|false</td>
<td>默认值：true。使用仅包含供应商库的单独捆绑包</td>
</tr>
<tr>
<td>--verbose=true|false</td>
<td>默认值：false。添加更多详细信息以输出日志记录</td>
</tr>
<tr>
<td>--watch=true|false</td>
<td>默认值：false。文件更改时运行构建</td>
</tr>
</tbody>
</table>
<h2>3.5 ng config</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-xml"><code class="language-xml">ng config <span class="token tag"><span class="token tag"><span class="token punctuation"><jsonPath<span class="token punctuation">> <span class="token tag"><span class="token tag"><span class="token punctuation"><value<span class="token punctuation">>
</span></span></span></span></span></span></span></span></code></pre>
</div>
<p> <br>
在工作空间的angular.json文件中检索或设置Angular配置值。(查看或者设置angular.json文件中某个配置对应的值)</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><jsonPath></td>
<td>以JSON路径格式设置或查询配置键(configuration)。例如：“a.foo.bar ”。如果未提供新值，则返回此键的当前值。</td>
</tr>
<tr>
<td><value></td>
<td>如果提供，则为给指定的配置(configuration)设置新值</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>--global=true|false</td>
<td>默认值：false，别名：-g。如果为true，则访问调用方主目录中的全局配置</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
</tbody>
</table>
<p> ng config的使用我们举一个简单的例子来说明。比如我们有这样的一个angular.json(我们删掉了很多东西)</p>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-json"><code class="language-json"><span class="token punctuation">{
<span class="token property">"$schema"<span class="token operator">: <span class="token string">"./node_modules/@angular/cli/lib/config/schema.json"<span class="token punctuation">,
<span class="token property">"version"<span class="token operator">: <span class="token number">1<span class="token punctuation">,
<span class="token property">"newProjectRoot"<span class="token operator">: <span class="token string">"projects"<span class="token punctuation">,
<span class="token property">"projects"<span class="token operator">: <span class="token punctuation">{
<span class="token property">"verify-demo"<span class="token operator">: <span class="token punctuation">{
<span class="token property">"sourceRoot"<span class="token operator">: <span class="token string">"src"
<span class="token punctuation">}
<span class="token punctuation">}<span class="token punctuation">,
<span class="token property">"defaultProject"<span class="token operator">: <span class="token string">"verify-demo"
<span class="token punctuation">}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p>获取 projects.verify-demo.sourceRoot 对应的值</p>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng config projects.verify-demo.sourceRoot
</code></pre>
</div>
<p>设置 projects.verify-demo.sourceRoot 对应的值为app</p>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng config projects.verify-demo.sourceRoot app
</code></pre>
</div>
<h2>3.6 ng doc</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng doc <keyword>
ng d <keyword>
</code></pre>
</div>
<p> <br>
在浏览器中打开官方Angular文档（angular.io），并搜索给定的关键字。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><keyword></td>
<td>要搜索的关键字，如angular.io中的搜索栏中所提供</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--search=true|false</td>
<td>默认值：false，别名：-s。如果为true，则搜索angular.io的所有内容。否则，仅搜索API参考文档</td>
</tr>
</tbody>
</table>
<h2>3.7 ng e2e</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng e2e <project>
ng e <project>
</code></pre>
</div>
<p> 构建并提供Angular应用程序，然后使用Protractor运行e2e测试。</p>
<blockquote>
<p>必须从工作空间目录中执行。如果未提供项目名称，则将对所有项目执行</p>
</blockquote>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><project></td>
<td>要构建的项目的名称。可以是应用程序或库</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--configuration=configuration</td>
<td>别名：-c。构建目标，在angular.json的“configurations”部分中指定各个目标</td>
</tr>
<tr>
<td>--devServerTarget=devServerTarget</td>
<td>开发服务器目标以运行测试</td>
</tr>
<tr>
<td>--elementExplorer=true|false</td>
<td>默认值：false。启动Protractor的Element Explorer进行调试</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--host=host</td>
<td>默认值：localhost。监听地址</td>
</tr>
<tr>
<td>--port</td>
<td>用于为应用程序提供服务的端口</td>
</tr>
<tr>
<td>--prod=true|false</td>
<td>如果为true，则将构建配置设置为生产目标</td>
</tr>
<tr>
<td>--protractorConfig=protractorConfig</td>
<td>Protractor配置文件的名称</td>
</tr>
<tr>
<td>--specs</td>
<td>Override specs in the protractor config.</td>
</tr>
<tr>
<td>--suite=suite</td>
<td>Override suite in the protractor config</td>
</tr>
<tr>
<td>--webdriverUpdate=true|false</td>
<td>默认值：true。尝试更新webdriver</td>
</tr>
</tbody>
</table>
<h2>3.8 ng help</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-bash"><code class="language-bash">ng help
</code></pre>
</div>
<p> 列出可用的命令及其简短描述。</p>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
</tbody>
</table>
<h2>3.9 ng lint</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng lint <project>
ng l <project>
</code></pre>
</div>
<p> 在给定项目文件夹中的Angular应用程序代码上运行linting工具。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><project></td>
<td>lint项目的名称</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--configuration=configuration</td>
<td>别名：-c。要使用的linting配置(angular.json文件里面configuration配置)</td>
</tr>
<tr>
<td>--exclude</td>
<td>要从linting中排除的文件</td>
</tr>
<tr>
<td>--files</td>
<td>要包含在linting中的文件</td>
</tr>
<tr>
<td>--fix=true|false</td>
<td>默认值：false。修复了linting错误(可能会覆盖linted文件)</td>
</tr>
<tr>
<td>--force=true|false</td>
<td>默认值：false。即使有linting错误也能成功</td>
</tr>
<tr>
<td>--format=format</td>
<td>默认值：prose。输出格式(prose, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist)</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--silent=true|false</td>
<td>默认值：false。显示输出文本</td>
</tr>
<tr>
<td>--tsConfig=tsConfig</td>
<td>TypeScript配置文件的名称</td>
</tr>
<tr>
<td>--tslintConfig=tslintConfig</td>
<td>TSLint配置文件的名称</td>
</tr>
<tr>
<td>--typeCheck=true|false</td>
<td>默认值：false。控制linting的类型检查</td>
</tr>
</tbody>
</table>
<h2>3.10 ng run</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng run <target>
</code></pre>
</div>
<p> 使用项目中定义的可选自定义构建器配置运行Architect目标。</p>
<blockquote>
<p>Architect是CLI用于执行复杂任务（如编译）的工具,根据提供的配置(configurations),CLI命令运行Architect目标，例如build，serve，test和lint。每个命名目标都有一个默认配置，由“options”对象指定，以及“配置”对象中一组可选的命名备用配置。</p>
</blockquote>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><target></td>
<td>要运行的Architect目标</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--configuration=configuration</td>
<td>别名：-c。angular.json文件configuration节点配置的名字</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
</tbody>
</table>
<h2>3.11 ng serve</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng serve <project>
ng s <project>
</code></pre>
</div>
<p> 构建并运行应用程序，而且在工程里面的文件有改动之后会自动rebuild。</p>
<p> 当执行ng serve命令后，将发生以下几件事情：</p>
<ul>
<li>Angular CLI 从 .angular-cli.json 文件中加载配置信息。</li>
<li>Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件。</li>
<li>Angular CLI 启动 webpack dev server 本地开发服务器，默认的地址是 localhost:4200。</li>
</ul>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><project></td>
<td>要构建的项目的名称。可以是应用程序或库</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--aot=true|false</td>
<td>默认值：false。是否使用AOT编译。AOT(预编译)；JIT(即使编译)</td>
</tr>
<tr>
<td>--baseHref=baseHref</td>
<td>正在构建的应用程序的基础URL</td>
</tr>
<tr>
<td>--browserTarget=browserTarget</td>
<td>目标服务</td>
</tr>
<tr>
<td>--buildEventLog=buildEventLog</td>
<td>构建事件协议事件的输出文件路径</td>
</tr>
<tr>
<td>--commonChunk=true|false</td>
<td>使用包含跨多个包使用的代码的单独包</td>
</tr>
<tr>
<td>--configuration=configuration</td>
<td>别名：-c。构建目标，在angular.json的“configuration”部分中指定</td>
</tr>
<tr>
<td>--deployUrl=deployUrl</td>
<td>将部署文件的URL</td>
</tr>
<tr>
<td>--disableHostCheck=true|false</td>
<td>默认值：false。不验证连接的客户端是否是允许的主机的一部分</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--hmr=true|false</td>
<td>默认值：false。启用热模块更换</td>
</tr>
<tr>
<td>--hmrWarning=true|false</td>
<td>默认值：true。启用--hmr选项时显示警告</td>
</tr>
<tr>
<td>--host=host</td>
<td>默认值：localhost。host对应的监听地址</td>
</tr>
<tr>
<td>--liveReload=true|false</td>
<td>默认值：true。是否使用实时重新加载来重新加载页面</td>
</tr>
<tr>
<td>--open=true|false</td>
<td>默认值：false，别名：-o。在默认浏览器中打开网址</td>
</tr>
<tr>
<td>--optimization=true|false</td>
<td>启用构建输出的优化</td>
</tr>
<tr>
<td>--poll</td>
<td>启用并定义查看轮询时间段的文件(以毫秒为单位)</td>
</tr>
<tr>
<td>--port</td>
<td>默认值：4200。监听端口</td>
</tr>
<tr>
<td>--prod=true|false</td>
<td>如果为true，则将构建配置设置为生产目标</td>
</tr>
<tr>
<td>--progress=true|false</td>
<td>在构建时将进度记录到控制台</td>
</tr>
<tr>
<td>--proxyConfig=proxyConfig</td>
<td>代理配置文件</td>
</tr>
<tr>
<td>--publicHost=publicHost</td>
<td>指定浏览器客户端将使用的URL</td>
</tr>
<tr>
<td>--servePath=servePath</td>
<td>应用程序的路径名</td>
</tr>
<tr>
<td>--servePathDefaultWarning=true|false</td>
<td>默认值：true。当deploy-url / base-href使用不支持的服务路径值时显示警告</td>
</tr>
<tr>
<td>--sourceMap=true|false</td>
<td>默认值：true。输出源图</td>
</tr>
<tr>
<td>--ssl=true|false</td>
<td>默认值：false。使用HTTPS服务</td>
</tr>
<tr>
<td>--sslCert=sslCert</td>
<td>用于提供HTTPS的SSL证书</td>
</tr>
<tr>
<td>--sslKey=sslKey</td>
<td>用于提供HTTPS的SSL密钥</td>
</tr>
<tr>
<td>--vendorChunk=true|false</td>
<td>Use a separate bundle containing only vendor libraries</td>
</tr>
<tr>
<td>--verbose=true|false</td>
<td>默认值：false。添加更多详细信息以输出日志记录</td>
</tr>
<tr>
<td>--watch=true|false</td>
<td>默认值：true。有改变的时候重新构建</td>
</tr>
</tbody>
</table>
<h2>3.12 ng test</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng test <project>
ng t <project>
</code></pre>
</div>
<p> 在项目中运行单元测试。</p>
<blockquote>
<p>Angular CLI 在新建项目的时候，自动为我们集成了 Karma test runner 测试框架</p>
</blockquote>
<p> 运行ng test命令之后，将会执行以下几个动作：</p>
<ul>
<li>Angular CLI 从 .angular-cli.json 文件中加载配置信息。</li>
<li>Angular CLI 基于 .angular-cli.json 文件中的 Karma 相关的配置信息，运行 Karma。Karma 的配置文件默认在根目录下，文件名为 karma.conf.js 。</li>
<li>Karma 打开配置中设定的浏览器，默认是 Chrome。<br>
Karma 然后指示浏览器 (Chrome) 使用 Karma 配置中指定的测试框架运行 src/test.ts。默认情况下，采用的是 Jasmine 框架。创建应用程序时，会自动创建 src/test.ts 文件。它预先配置为加载和配置测试Angular 应用程序所需的代码，并运行 src 目录中以 .spec.ts 结尾的所有文件。</li>
<li>Karma 将测试结果报告给控制台。</li>
<li>Karma 监听 src 目录下的文件的变化，然后自动运行单元测试。</li>
</ul>
<table>
<thead>
<tr><th>参数</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><project></td>
<td>要构建的项目的名称。可以是应用程序或库</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>--browsers=browsers</td>
<td>覆盖针对哪些浏览器测试运行</td>
</tr>
<tr>
<td>--codeCoverage=true|false</td>
<td>默认值：false。输出代码覆盖率报告</td>
</tr>
<tr>
<td>--codeCoverageExclude</td>
<td>要从代码覆盖范围中排除的Globs</td>
</tr>
<tr>
<td>--configuration=configuration</td>
<td>别名：-c。构建目标，在angular.json的“configuration”部分中的某一个</td>
</tr>
<tr>
<td>--environment=environment</td>
<td>定义构建环境</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--karmaConfig=karmaConfig</td>
<td>Karma配置文件的名称</td>
</tr>
<tr>
<td>--main=main</td>
<td>主入口点文件的名称</td>
</tr>
<tr>
<td>--poll</td>
<td>启用并定义查看轮询时间段的文件(以毫秒为单位)</td>
</tr>
<tr>
<td>--polyfills=polyfills</td>
<td>polyfills文件的名称</td>
</tr>
<tr>
<td>--preserveSymlinks=true|false</td>
<td>默认值：false。解析模块时不要使用真实路径</td>
</tr>
<tr>
<td>--prod=true|false</td>
<td>如果为true，则将构建配置设置为生产目标</td>
</tr>
<tr>
<td>--progress=true|false</td>
<td>在构建时将进度记录到控制台</td>
</tr>
<tr>
<td>--reporters</td>
<td>Karma reporters to use. Directly passed to the karma runner</td>
</tr>
<tr>
<td>--sourceMap=true|false</td>
<td>默认值：true。Output sourcemaps.</td>
</tr>
<tr>
<td>--tsConfig=tsConfig</td>
<td>TypeScript配置文件的名称</td>
</tr>
</tbody>
</table>
<h2>3.13 ng update</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng update
</code></pre>
</div>
<p> 更新您的应用程序及其依赖项。参见https://update.angular.io/。</p>
<p>比如可以通过运行以下命令，对核心框架和CLI的v7执行基本更新</p>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng update @angular/cli @angular/core
</code></pre>
</div>
<blockquote>
<p>有关更新应用程序的详细信息和指导可以参考https://update.angular.io/。</p>
</blockquote>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--all=true|false</td>
<td>默认值：false。是否更新package.json中的所有包</td>
</tr>
<tr>
<td>--force=true|false</td>
<td>默认值：false。如果为false，如果安装的软件包与更新不兼容，则会出错</td>
</tr>
<tr>
<td>--from=from</td>
<td>要从中迁移的版本。仅适用于正在更新的单个程序包，且仅适用于仅迁移</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--migrateOnly=true|false</td>
<td>默认值：false。仅执行迁移，不更新已安装的版本</td>
</tr>
<tr>
<td>--next=true|false</td>
<td>默认值：false。使用最大的版本，包括beta和RC</td>
</tr>
<tr>
<td>--packageManager=npm|yarn</td>
<td>默认值：npm。用于注册表设置的首选包管理器配置文件</td>
</tr>
<tr>
<td>--packages</td>
<td>要更新的包的名称</td>
</tr>
<tr>
<td>--registry=registry</td>
<td>要使用的NPM注册表</td>
</tr>
<tr>
<td>--to=to</td>
<td>要应用迁移的版本。仅适用于正在更新的单个程序包，且仅适用于仅迁移。需要指定。默认为检测到的已安装版本</td>
</tr>
<tr>
<td>--verbose=true|false</td>
<td>在更新过程中显示其他详细信息</td>
</tr>
</tbody>
</table>
<h2>3.14 ng version</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng version
ng v
</code></pre>
</div>
<p> 输出Angular CLI对应的版本</p>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
</tbody>
</table>
<h2>3.15 ng xi18n</h2>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">ng xi18n <project>
</code></pre>
</div>
<p> 从源代码中提取i18n信息。</p>
<table>
<thead>
<tr><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><project></td>
<td>要构建的项目的名称。可以是应用程序或库</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>选项</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>--browserTarget=browserTarget</td>
<td>提取的目标</td>
</tr>
<tr>
<td>--configuration=configuration</td>
<td>别名：-c。构建目标，在angular.json的“configuration”部分中某个目标</td>
</tr>
<tr>
<td>--help=true|false|json|JSON</td>
<td>默认值：false。在控制台中显示此命令的帮助消息</td>
</tr>
<tr>
<td>--i18nFormat=xmb|xlf|xlif|xliff|xlf2|xliff2</td>
<td>默认值：xlf。生成文件的输出格式</td>
</tr>
<tr>
<td>--i18nLocale=i18nLocale</td>
<td>指定应用程序的源语言</td>
</tr>
<tr>
<td>--outFile=outFile</td>
<td>要输出的文件的名称</td>
</tr>
<tr>
<td>--outputPath=outputPath</td>
<td>将放置输出的路径</td>
</tr>
<tr>
<td>--prod=true|false</td>
<td>如果为true，则将构建配置设置为生产目标</td>
</tr>
<tr>
<td>--progress=true|false</td>
<td>默认值：true。将进度记录到控制台</td>
</tr>
</tbody>
</table>
</div>
<br><br>作者：tuacy<br>链接：https://www.jianshu.com/p/88821d8ad1ed#<br>来源：简书<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</div>
<div> </div>
<div>@@angular-cli 所有版本</div>
<div>cli 命令行接口 执行后生成基础工程</div><br><br>
来源：https://www.cnblogs.com/wl-blog/p/17416054.html
頁:
[1]