Skip to content

Commit 04764fe

Browse files
committed
docs: update README to reflect route generation changes
1 parent 61c383c commit 04764fe

File tree

1 file changed

+7
-46
lines changed

1 file changed

+7
-46
lines changed

README.md

Lines changed: 7 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -99,57 +99,18 @@ used in `hero`):
9999
ng generate route hero
100100
```
101101

102-
This will create a folder with a routable component (`hero-root.component.ts`)
103-
with two sub-routes. The file structure will be as follows:
102+
This will create a folder which will contain the hero component and related test and style files.
104103

105-
```
106-
...
107-
|-- app
108-
| |-- hero
109-
| | |-- hero-detail.component.html
110-
| | |-- hero-detail.component.css
111-
| | |-- hero-detail.component.spec.ts
112-
| | |-- hero-detail.component.ts
113-
| | |-- hero-list.component.html
114-
| | |-- hero-list.component.css
115-
| | |-- hero-list.component.spec.ts
116-
| | |-- hero-list.component.ts
117-
| | |-- hero-root.component.spec.ts
118-
| | |-- hero-root.component.ts
119-
| | |-- hero.service.spec.ts
120-
| | |-- hero.service.ts
121-
| |-- ...
122-
|-- app.ts
123-
|-- route-config.ts
124-
...
125-
```
126-
127-
By default the cli will add the import statements for HeroList and HeroDetail to
128-
`hero-root.component.ts`:
129-
130-
```
131-
@RouteConfig([
132-
{path:'/', name: 'HeroList', component: HeroListComponent, useAsDefault: true},
133-
{path:'/:id', name: 'HeroDetail', component: HeroDetailComponent}
134-
])
135-
```
136-
137-
The generated `route-config.ts` file is also updated with the following:
104+
The generated route will also be registered with the parent component's `@RouteConfig` decorator.
138105

139-
```
140-
// DO NOT EDIT THIS FILE
141-
// IT IS AUTO GENERATED BY ANGULAR-CLI
142-
import {HeroRoot} from './hero/hero-root.component';
143-
144-
export const CliRouteConfig = [
145-
{path:'/hero/...', name: 'HeroRoot', component: HeroRoot}
146-
];
147-
```
106+
By default the route will be designated as a **lazy** route which means that it will be loaded into the browser when needed, not upfront as part of a bundle.
148107

149-
Visiting `http://localhost:4200/hero` will show the hero list.
108+
In order to visually distinguish lazy routes from other routes the folder for the route will be prefixed with a `+` per the above example the folder will be named `+hero`.
109+
This is done in accordance with the style guide.
150110

111+
The default lazy nature of routes can be turned off via the lazy flag (`--lazy false`)
151112

152-
There is an optional flag for `skip-router-generation` which will not add the route to the `CliRouteConfig` for the application.
113+
There is an optional flag for `skip-router-generation` which will not add the route to the parent component's `@RouteConfig` decorator.
153114

154115
### Creating a build
155116

0 commit comments

Comments
 (0)