\href{https://david-dm.org/angular/angular-cli}{\texttt{ }} \href{https://david-dm.org/angular/angular-cli?type=dev}{\texttt{ }}

\href{https://www.npmjs.com/package/@angular/cli}{\texttt{ }} \href{https://www.npmjs.com/package/@angular/cli}{\texttt{ }} \href{https://github.com/angular/angular-cli/blob/master/LICENSE}{\texttt{ }} \href{https://www.npmjs.com/package/@angular/cli}{\texttt{ }}

\href{https://gitter.im/angular/angular-cli?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge}{\texttt{ }}

\href{https://github.com/angular/angular-cli/fork}{\texttt{ }} \href{https://github.com/angular/angular-cli}{\texttt{ }}\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md174}{}\doxysection{Note}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md174}
If you are updating from a beta or RC version, check out our \href{https://github.com/angular/angular-cli/wiki/stories-1.0-update}{\texttt{ 1.\+0 Update Guide}}.

If you wish to collaborate, check out \href{https://github.com/angular/angular-cli/issues}{\texttt{ our issue list}}.

Before submitting new issues, have a look at \href{https://github.com/angular/angular-cli/issues?utf8=\%E2\%9C\%93&q=is\%3Aissue\%20label\%3A\%22type\%3A\%20faq\%22\%20}{\texttt{ issues marked with the {\ttfamily type\+: faq} label}}.\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md175}{}\doxysection{Prerequisites}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md175}
Both the CLI and generated project have dependencies that require Node 8.\+9 or higher, together with NPM 5.\+5.\+1 or higher.\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md176}{}\doxysection{Table of Contents}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md176}

\begin{DoxyItemize}
\item \href{\#installation}{\texttt{ Installation}}
\item \href{\#usage}{\texttt{ Usage}}
\item \href{\#generating-and-serving-an-angular-project-via-a-development-server}{\texttt{ Generating a New Project}}
\item \href{\#generating-components-directives-pipes-and-services}{\texttt{ Generating Components, Directives, Pipes and Services}}
\item \href{\#updating-angular-cli}{\texttt{ Updating Angular CLI}}
\item \href{\#development-hints-for-working-on-angular-cli}{\texttt{ Development Hints for working on Angular CLI}}
\item \href{\#documentation}{\texttt{ Documentation}}
\item \href{\#license}{\texttt{ License}}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md177}{}\doxysection{Installation}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md177}
{\bfseries{BEFORE YOU INSTALL\+:}} please read the \href{\#prerequisites}{\texttt{ prerequisites}}\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md178}{}\doxysubsection{Install Globally}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md178}

\begin{DoxyCode}{0}
\DoxyCodeLine{npm install -\/g @angular/cli }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md179}{}\doxysubsection{Install Locally}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md179}

\begin{DoxyCode}{0}
\DoxyCodeLine{npm install @angular/cli }

\end{DoxyCode}


To run a locally installed version of the angular-\/cli, you can call {\ttfamily ng} commands directly by adding the {\ttfamily .bin} folder within your local {\ttfamily node\+\_\+modules} folder to your PATH. The {\ttfamily node\+\_\+modules} and {\ttfamily .bin} folders are created in the directory where {\ttfamily npm install @angular/cli} was run upon completion of the install command.

Alternatively, you can install \href{https://www.npmjs.com/package/npx}{\texttt{ npx}} and run {\ttfamily npx ng $<$command$>$} within the local directory where {\ttfamily npm install @angular/cli} was run, which will use the locally installed angular-\/cli.\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md180}{}\doxysubsection{Install Specific Version (\+Example\+: 6.\+1.\+1)}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md180}

\begin{DoxyCode}{0}
\DoxyCodeLine{npm install -\/g @angular/cli@6.1.1 }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md181}{}\doxysection{Usage}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md181}

\begin{DoxyCode}{0}
\DoxyCodeLine{ng help }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md182}{}\doxysubsection{Generating and serving an Angular project via a development server}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md182}

\begin{DoxyCode}{0}
\DoxyCodeLine{ng new PROJECT-\/NAME}
\DoxyCodeLine{cd PROJECT-\/NAME}
\DoxyCodeLine{ng serve }

\end{DoxyCode}
 Navigate to {\ttfamily \href{http://localhost:4200/}{\texttt{ http\+://localhost\+:4200/}}}. The app will automatically reload if you change any of the source files.

You can configure the default HTTP host and port used by the development server with two command-\/line options \+:


\begin{DoxyCode}{0}
\DoxyCodeLine{ng serve -\/-\/host 0.0.0.0 -\/-\/port 4201 }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md183}{}\doxysubsection{Generating Components, Directives, Pipes and Services}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md183}
You can use the {\ttfamily ng generate} (or just {\ttfamily ng g}) command to generate Angular components\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{ng generate component my-\/new-\/component}
\DoxyCodeLine{ng g component my-\/new-\/component \# using the alias}
\DoxyCodeLine{}
\DoxyCodeLine{\# components support relative path generation}
\DoxyCodeLine{\# if in the directory src/app/feature/ and you run}
\DoxyCodeLine{ng g component new-\/cmp}
\DoxyCodeLine{\# your component will be generated in src/app/feature/new-\/cmp}
\DoxyCodeLine{\# but if you were to run}
\DoxyCodeLine{ng g component ./newer-\/cmp}
\DoxyCodeLine{\# your component will be generated in src/app/newer-\/cmp}
\DoxyCodeLine{\# if in the directory src/app you can also run}
\DoxyCodeLine{ng g component feature/new-\/cmp}
\DoxyCodeLine{\# and your component will be generated in src/app/feature/new-\/cmp }

\end{DoxyCode}
 You can find all possible blueprints in the table below\+:

\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{2}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Scaffold   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Usage    }\\\cline{1-2}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Scaffold   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Usage    }\\\cline{1-2}
\endhead
\href{https://angular.io/cli/generate\#component}{\texttt{ Component}}   &{\ttfamily ng g component my-\/new-\/component}    \\\cline{1-2}
\href{https://angular.io/cli/generate\#directive}{\texttt{ Directive}}   &{\ttfamily ng g directive my-\/new-\/directive}    \\\cline{1-2}
\href{https://angular.io/cli/generate\#pipe}{\texttt{ Pipe}}   &{\ttfamily ng g pipe my-\/new-\/pipe}    \\\cline{1-2}
\href{https://angular.io/cli/generate\#service}{\texttt{ Service}}   &{\ttfamily ng g service my-\/new-\/service}    \\\cline{1-2}
\href{https://angular.io/cli/generate\#class}{\texttt{ Class}}   &{\ttfamily ng g class my-\/new-\/class}    \\\cline{1-2}
\href{https://angular.io/cli/generate\#guard}{\texttt{ Guard}}   &{\ttfamily ng g guard my-\/new-\/guard}    \\\cline{1-2}
\href{https://angular.io/cli/generate\#interface}{\texttt{ Interface}}   &{\ttfamily ng g interface my-\/new-\/interface}    \\\cline{1-2}
\href{https://angular.io/cli/generate\#enum}{\texttt{ Enum}}   &{\ttfamily ng g enum my-\/new-\/enum}    \\\cline{1-2}
\href{https://angular.io/cli/generate\#module}{\texttt{ Module}}   &{\ttfamily ng g module my-\/module}   \\\cline{1-2}
\end{longtabu}


angular-\/cli will add reference to {\ttfamily components}, {\ttfamily directives} and {\ttfamily pipes} automatically in the {\ttfamily app.\+module.\+ts}. If you need to add this references to another custom module, follow these steps\+:


\begin{DoxyEnumerate}
\item {\ttfamily ng g module new-\/module} to create a new module
\item call {\ttfamily ng g component new-\/module/new-\/component}
\end{DoxyEnumerate}

This should add the new {\ttfamily component}, {\ttfamily directive} or {\ttfamily pipe} reference to the {\ttfamily new-\/module} you\textquotesingle{}ve created.\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md184}{}\doxysubsection{Updating Angular CLI}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md184}
If you\textquotesingle{}re using Angular CLI {\ttfamily 1.\+0.\+0-\/beta.\+28} or less, you need to uninstall {\ttfamily angular-\/cli} package. It should be done due to changing of package\textquotesingle{}s name and scope from {\ttfamily angular-\/cli} to {\ttfamily @angular/cli}\+: 
\begin{DoxyCode}{0}
\DoxyCodeLine{npm uninstall -\/g angular-\/cli}
\DoxyCodeLine{npm uninstall -\/-\/save-\/dev angular-\/cli }

\end{DoxyCode}


To update Angular CLI to a new version, you must update both the global package and your project\textquotesingle{}s local package.

Global package\+: 
\begin{DoxyCode}{0}
\DoxyCodeLine{npm uninstall -\/g @angular/cli}
\DoxyCodeLine{npm cache verify}
\DoxyCodeLine{\# if npm version is < 5 then use `npm cache clean`}
\DoxyCodeLine{npm install -\/g @angular/cli@latest }

\end{DoxyCode}


Local project package\+: 
\begin{DoxyCode}{0}
\DoxyCodeLine{rm -\/rf node\_modules dist \# use rmdir /S/Q node\_modules dist in Windows Command Prompt; use rm -\/r -\/fo node\_modules,dist in Windows PowerShell}
\DoxyCodeLine{npm install -\/-\/save-\/dev @angular/cli@latest}
\DoxyCodeLine{npm install }

\end{DoxyCode}


If you are updating to 1.\+0 from a beta or RC version, check out our \href{https://github.com/angular/angular-cli/wiki/stories-1.0-update}{\texttt{ 1.\+0 Update Guide}}.

You can find more details about changes between versions in \href{https://github.com/angular/angular-cli/releases}{\texttt{ the Releases tab on Git\+Hub}}.\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md185}{}\doxysection{Development Hints for working on Angular CLI}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md185}
\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md186}{}\doxysubsection{Working with master}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md186}

\begin{DoxyCode}{0}
\DoxyCodeLine{git clone https://github.com/angular/angular-\/cli.git}
\DoxyCodeLine{yarn}
\DoxyCodeLine{npm run build}
\DoxyCodeLine{cd dist/@angular/cli}
\DoxyCodeLine{npm link }

\end{DoxyCode}


{\ttfamily npm link} is very similar to {\ttfamily npm install -\/g} except that instead of downloading the package from the repo, the just built {\ttfamily dist/@angular/cli/} folder becomes the global package. Additionally, this repository publishes several packages and we use special logic to load all of them on development setups.

Any changes to the files in the {\ttfamily angular-\/cli/} folder will immediately affect the global {\ttfamily @angular/cli} package, meaning that, in order to quickly test any changes you make to the cli project, you should simply just run {\ttfamily npm run build} again.

Now you can use {\ttfamily @angular/cli} via the command line\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{ng new foo}
\DoxyCodeLine{cd foo}
\DoxyCodeLine{npm link @angular/cli}
\DoxyCodeLine{ng serve }

\end{DoxyCode}


{\ttfamily npm link @angular/cli} is needed because by default the globally installed {\ttfamily @angular/cli} just loads the local {\ttfamily @angular/cli} from the project which was fetched remotely from npm. {\ttfamily npm link @angular/cli} symlinks the global {\ttfamily @angular/cli} package to the local {\ttfamily @angular/cli} package. Now the {\ttfamily angular-\/cli} you cloned before is in three places\+: The folder you cloned it into, npm\textquotesingle{}s folder where it stores global packages and the Angular CLI project you just created.

You can also use {\ttfamily ng new foo -\/-\/link-\/cli} to automatically link the {\ttfamily @angular/cli} package.

Please read the official \href{https://docs.npmjs.com/cli/link}{\texttt{ npm-\/link documentation}} and the \href{http://browsenpm.org/help\#linkinganynpmpackagelocally}{\texttt{ npm-\/link cheatsheet}} for more information.

To run the Angular CLI E2E test suite, use the {\ttfamily node ./tests/legacy-\/cli/run\+\_\+e2e} command. It can also receive a filename to only run that test (e.\+g. {\ttfamily node ./tests/legacy-\/cli/run\+\_\+e2e tests/legacy-\/cli/e2e/tests/build/dev-\/build.\+ts}).

As part of the test procedure, all packages will be built and linked. You will need to re-\/run {\ttfamily npm link} to re-\/link the development Angular CLI environment after tests finish.\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md187}{}\doxysubsection{Debugging with VS Code}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md187}
In order to debug some Angular CLI behaviour using Visual Studio Code, you can run {\ttfamily npm run build}, and then use a launch configuration like the following\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{    "{}type"{}: "{}node"{},}
\DoxyCodeLine{    "{}request"{}: "{}launch"{},}
\DoxyCodeLine{    "{}name"{}: "{}ng serve"{},}
\DoxyCodeLine{    "{}cwd"{}: "{}<path to an Angular project generated with Angular-\/CLI>"{},}
\DoxyCodeLine{    "{}program"{}: "{}\$\{workspaceFolder\}/dist/@angular/cli/bin/ng"{},}
\DoxyCodeLine{    "{}args"{}: [}
\DoxyCodeLine{        "{}<ng command>"{},}
\DoxyCodeLine{        ...other arguments}
\DoxyCodeLine{    ],}
\DoxyCodeLine{    "{}console"{}: "{}integratedTerminal"{}}
\DoxyCodeLine{\} }

\end{DoxyCode}


Then you can add breakpoints in {\ttfamily dist/@angular} files.

For more informations about Node.\+js debugging in VS Code, see the related \href{https://code.visualstudio.com/docs/nodejs/nodejs-debugging}{\texttt{ VS Code Documentation}}.\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md188}{}\doxysubsection{CPU Profiling}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md188}
In order to investigate performance issues, CPU profiling is often useful.

To capture a CPU profiling, you can\+:
\begin{DoxyEnumerate}
\item install the v8-\/profiler-\/node8 dependency\+: {\ttfamily npm install v8-\/profiler-\/node8 -\/-\/no-\/save}
\end{DoxyEnumerate}
\begin{DoxyEnumerate}
\item set the NG\+\_\+\+CLI\+\_\+\+PROFILING Environment variable to the file name you want\+:
\begin{DoxyItemize}
\item on Unix systems (Linux \& Mac OS X)\+: ̀{\ttfamily export NG\+\_\+\+CLI\+\_\+\+PROFILING=my-\/profile}
\item on Windows\+: ̀̀{\ttfamily setx NG\+\_\+\+CLI\+\_\+\+PROFILING my-\/profile}
\end{DoxyItemize}
\end{DoxyEnumerate}

Then, just run the ng command on which you want to capture a CPU profile. You will then obtain a {\ttfamily my-\/profile.\+cpuprofile} file in the folder from which you ran the ng command.

You can use the Chrome Devtools to process it. To do so\+:
\begin{DoxyEnumerate}
\item open {\ttfamily chrome\+://inspect/\#devices} in Chrome
\end{DoxyEnumerate}
\begin{DoxyEnumerate}
\item click on \char`\"{}\+Open dedicated Dev\+Tools for Node\char`\"{}
\end{DoxyEnumerate}
\begin{DoxyEnumerate}
\item go to the \char`\"{}profiler\char`\"{} tab
\end{DoxyEnumerate}
\begin{DoxyEnumerate}
\item click on the \char`\"{}\+Load\char`\"{} button and select the generated .cpuprofile file
\end{DoxyEnumerate}
\begin{DoxyEnumerate}
\item on the left panel, select the associated file
\end{DoxyEnumerate}

In addition to this one, another, more elaborated way to capture a CPU profile using the Chrome Devtools is detailed in \href{https://github.com/angular/angular-cli/issues/8259\#issue-269908550}{\texttt{ https\+://github.\+com/angular/angular-\/cli/issues/8259\#issue-\/269908550}}.\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md189}{}\doxysection{Documentation}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md189}
The documentation for the Angular CLI is located in this repo\textquotesingle{}s \href{https://angular.io/cli}{\texttt{ wiki}}.\hypertarget{md_sfcode_node_modules__angular_cli_README_autotoc_md190}{}\doxysection{License}\label{md_sfcode_node_modules__angular_cli_README_autotoc_md190}
\href{https://github.com/angular/angular-cli/blob/master/LICENSE}{\texttt{ MIT}} 