> For the complete documentation index, see [llms.txt](https://fancyloves.gitbook.io/frontendtech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fancyloves.gitbook.io/frontendtech/angularjs/cli.md).

# CLI

### The Angular CLI

\[R] <https://github.com/angular/angular-cli/wiki>

a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Generate a new project and skeleton application

```
ng new my-app --routing
```

```
cd my-app
```

```
ng serve --open
```

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

the --open (or just -o) option will automatically open your browser on <http://localhost:4200/>.

## ng  generate

### Component

```
ng generate component <component_name>
ng g c <component_name>

ng generate component module_name/heroes --spec=false (no spec file)
ng generate component heroes -it  (inline template)
```

![](https://1446434960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lj5eW9OkNxblWR8nxhy%2F-Lj5eYEmjXUslgNsWm3V%2F-Lj5eaZDkk1wmB18lETL%2Fimport.png?generation=1562406186207705\&alt=media)

### Service

There are several ways to provide the HeroService: in the HeroesComponent, in the AppComponent, in the AppModule. Each option has pros and cons.

```
ng generate service hero
ng g s core/<service_name> --module=core

ng generate service hero

ng generate service core/hero --module=core
ng generate service hero --spec=false --module=app
```

![](https://1446434960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lj5eW9OkNxblWR8nxhy%2F-Lj5eYEmjXUslgNsWm3V%2F-Lj5eaZFrKUZiXNu7MR8%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202018-04-24%20%E4%B8%8B%E5%8D%888.03.35.png?generation=1562406186003157\&alt=media)

### Module

```
ng generate module <module_name>
ng g m <module_name>

ng g m share --routing --module=app
ng g m core --module=app
ng generate module app-routing --flat --module=app --routing
```

\--flat puts the file in src/app instead of its own folder.\
\--module=app tells the CLI to register it in the imports array of the AppModule.

### Directives

```
ng generate directives <directive_name>
ng g d <directive_name>

ng g d Demo --spec=false
```