---
order: 20
title: ng g
subtitle: Business page
type: Documents
---

## Foreword

`ng generate` (shorthand: `ng g`) is used to generate business pages. The default Angular Cli template is different from the ng-alain specification. For example, we want to include a `SharedModule` when generating a module.

ng-alain adds cool operations based on this.

## Command format

```bash
ng g ng-alain:[command name] [name] [options]
```

Examples:

```bash
# Generate a trade module
ng g ng-alain:module trade
# Generate a TradeListComponent List component under the trade module
ng g ng-alain:list list -m=trade
# Generate a TradeListComponent List component and TradeService class under the trade module
ng g ng-alain:list list -m=trade --service=root
# Generate a ListComponent List component under the trade module
ng g ng-alain:list list -m=trade --withoutModulePrefixInComponentName=true
# Generate a TradeEditComponent Edit component under the trade module
ng g ng-alain:edit edit -m=trade
```

> ng-alain has own file structure specification, which can cause exceptions when you break this file structure.

| Option | Description |
| ---- | --- |
| `-m` or `--module` | Allows specification of the declaring module. |
| `-t` or `--target` | Specifies relative path, could be set like `bus/list` |
| `--modal` | Specifies using modal mode |
| `--withoutPrefix` | Without prefix to selectors |
| `--withoutModulePrefixInComponentName` | Without prefix to component name |
| `--service` | Specifies how to generate service classes, can be set: `ignore`, `root`, `none` |

## Module

Generate a `trade` module:

```bash
ng g ng-alain:module trade
```

Will be generated `trade.module.ts`, `trade-routing.module.ts` in the `routes/trade` directory.

The module imports `SharedModule` and some import and export specifications, and you can't destroy these variable names (like this: `COMPONENTS`, `routes`).

By default, all the codes are stored under `app/routes`, which can be pointed to other folder through `ng-alain.json`, for example:

```json
{
   "$schema": "./node_modules/ng-alain/schema.json",
   "projects": {
     // Indicates that ng-alain projects are stored under `app/pages`
     "ng-alain": {
       "routesRoot": "app/pages"
     }
   }
}
```

## Business page

- `empty` Blank page
- `list` List page
- `edit` Edit page
- `view` View page
- `curd` List, edit, view pages

Generate a `list` list page in the `trade` directory:

```bash
ng g ng-alain:list list -m=trade
```

**Note:** `-m` must be specified because ng-alain thinks the page should be in a specific module, not a ghost.


### Cool

In general, a module might includes the same type of business page, and its file structure might like this:

```
sys
  log
    view
      view.component.ts
    edit
      edit.component.ts
    log.component.ts
  sys.module.ts
```

So when you want to generate a view page that should be under the `log` directory (could be set like `log/list`):

```bash
ng g ng-alain:view view -m=sys -t=log
```

**Override the default template pages**

If the default pages generated by commands `list`, `edit`, `view`, and `empty` are not expected by the business, can be override.

For example, override the `list` command default template, create the directory name `_list` under the root directory `_cli-tpl`, and the directory structure must be equivalent to the [original list directory](https://github.com/ng-alain/delon/tree/master/packages/schematics/list/files).

### edit & view page

For `edit`, `view`, the default is modal render, you can use the page render:

```bash
ng g ng-alain:edit [page name] --modal=false
```

> If you receive `No provider for NzModalRef!` error, because of modal component must be opened with `nzModalService`, and does not need to register into route.

## Custom template page

In addition to the default, you can also customize the project-level business page.

For example, to create a custom edit page template, you only need to create the following directory structure in the project's root directory (You can get it via [Github](https://github.com/ng-alain/ng-alain/tree/master/_cli-tpl)):

```
└── _cli-tpl
│   └── edit                                                       // Your template name
│       └── __path__                                               // (name fixed value)
│           └── __name@dasherize@if-flat__                         // (name fixed value)
│               ├── __name@dasherize__.component.ts.template       // Component class file (name fixed value)
│               ├── __name@dasherize__.component.html.template     // Component html file (name fixed value)
│               └── __name@dasherize__.component.spec.ts.template  // Component spec file (name fixed value)
└── src
```

After that, just run:

```bash
ng g ng-alain:tpl [your template name] [name] -m=trade
```

### How to write a template file

In the directory structure of the custom page, the file name begins with the `__` prefix is a variable placeholder, Cli passes some parameters and methods:

| Type     | Name            | Default   | Description                                  |
| -------- | --------------- | --------- | -------------------------------------------- |
| Variable | project         | -         | Project name                                 |
| Variable | name            | -         | Name, equivalent command line `<name>`       |
| Variable | path            | -         | Target path                                  |
| Variable | flat            | `false`   | Whether file is flat                         |
| Variable | inlineTemplate  | `false`   | Whether inline template(Fixed value `false`) |
| Variable | selector        | -         | Component `selector`                         |
| Variable | componentName   | -         | Component name                               |
| Variable | changeDetection | `Default` | Component `changeDetection` value            |
| Variable | modal           | -         | Whether to use Modal to render               |
| Method   | decamelize      | -         | Converts a camelized string into all lower case separated by underscores     |
| Method   | dasherize       | -         | Replaces underscores, spaces, or camelCase with dashes                   |
| Method   | camelize        | -         | Returns the lowerCamelCase form of a string                 |
| Method   | classify        | -         | Returns the UpperCamelCase form of a string                 |
| Method   | underscore      | -         | More general than decamelize. Returns the lower_case_and_underscored
 form of a string.     |
| Method   | capitalize      | -         | Returns the Capitalized form of a string                         |

These variables or methods can be used in templates, for example: `<%=componentName%>` for component names, `<% %>` for JavaScript code. You can refer to:

- [delon](https://github.com/ng-alain/delon/blob/master/packages/schematics/edit/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html)
- [material2](https://github.com/angular/material2/blob/master/src/lib/schematics/dashboard/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html)

### Custom Data

The `tpl` command allows you to process the data further before generating the file, The command will check the `_cli-tpl/_fix.js` file during execution and call the `fix` method, which must return a `Promise` object, for example:

> **Note: ** CLI is a Node JS program, so the syntax is based on Node JS.

```js
function fix(options) {
  return new Promise((resolve) => {
    resolve();
  });
}

module.exports = {
  fix
};
```

The `fix` method has only an `options` parameter, which contains the CLI used to generate all parameter data, even if it is undefined, for example:

```bash
ng g ng-alain:tpl list -m=setting --import-type=UserDto
```

`import-type` is not a defined parameter of the command itself, but `options` will convert these undefined parameters to an `extraArgs` object, so the `options` you receive will be:

```json
{
  "tplName": "test",
  "modal": true,
  ...
  "extraArgs": {
    "import-type": "UserDto"
  }
}
```

The `options` object is passed to the template engine, so you can attach some processed data to `options` and use them in the template file, for example:

```json
{
  "tplName": "test",
  "modal": true,
  ...
  "extraArgs": {
    "import-type": "UserDto",
    "newData": "asdf"
  }
}
```

You can apply `newData` to the template, for example `__name@dasherize__.component.html`:

```html
<page-header></page-header>
<%= extraArgs.newData %>
```

The result is:

```html
<page-header></page-header>
asdf
```