Scaffolding
Generate Angular Artifacts

Generate Artifacts

Add --dry-run or -d option to following commands to see which artifacts will be created, without actually creating them.

generate domain modules

1
# generate domain. optional flags: --platform <web/mobile/desktop/node> --app <appName> --lazy <true/false>
2
# defaults platform=web, app=defaultProject, lazy=true
3
nx g @xmlking/nxp-ddd:domain home
4
nx g @xmlking/nxp-ddd:domain dashboard
5
nx g @xmlking/nxp-ddd:domain admin
Copied!

generate feature modules for each domain

1
# generate feature module. optional flags: --platform <web/mobile/desktop/node> --lazy --entity <entity>
2
# defaults platform=web, lazy=true, entity= no entity created
3
nx g @xmlking/nxp-ddd:feature blog --domain home
4
nx g @xmlking/nxp-ddd:feature landing --domain home
5
6
nx g @xmlking/nxp-ddd:feature account --domain dashboard --entity account
Copied!

generate Lazy-loaded Feature Modules

with angular schematics (a.k.a. @nrwl/angular which is default in angular.json)
1
# ng g @nrwl/angular:lib ...
2
ng g lib home --routing --lazy --parent-module=apps/webapp/src/app/app.module.ts --defaults --tags=layout,entry-module
3
ng g lib dashboard --routing --lazy --parent-module=apps/webapp/src/app/app.module.ts --defaults --tags=layout,entry-module
4
ng g lib admin --routing --lazy --parent-module=apps/webapp/src/app/app.module.ts --defaults --tags=layout,entry-module
5
ng g lib NotFound --routing --lazy --parent-module=apps/webapp/src/app/app.module.ts --defaults --tags=entry-module
6
ng g lib experiments --routing --lazy --parent-module=libs/dashboard/src/lib/dashboard.module.ts --defaults --tags=child-module
7
ng g lib widgets --routing --lazy --parent-module=libs/dashboard/src/lib/dashboard.module.ts --defaults --tags=child-module
8
ng g lib accounts --routing --lazy --parent-module=libs/dashboard/src/lib/dashboard.module.ts --defaults --tags=child-module
9
10
# generate `node`, `nest` `grpcweb` modules for generated code for proto
11
nx g @nrwl/workspace:library node --directory=gen --testEnvironment=node --tags=scope:shared,type:generated,platform:web -d
12
nx g @nrwl/workspace:library nest --directory=gen --testEnvironment=node --tags=scope:shared,type:generated,platform:nest -d
13
nx g @nrwl/workspace:library grpcweb --directory=gen --tags=scope:shared,type:generated,platform:web -d
14
nx g @nrwl/workspace:library grpcweb2 --directory=gen --tags=scope:shared,type:generated,platform:web -d
15
16
# ng g worker app --project=webapp -d # TODO
Copied!

generate shared neutral libs

with no-framework (a.k.a. @nrwl/workspace schematics)
1
ng g @nrwl/workspace:lib gen --tags=utils --defaults -d
2
ng g @nrwl/workspace:lib tree --tags=utils --defaults -d
3
ng g @nrwl/workspace:lib utils --tags=utils --defaults -d
4
ng g @nrwl/workspace:lib animations --tags=utils --defaults -d
5
6
# system wide `models` module
7
ng g @nrwl/workspace:lib models --tags=utils --defaults -d
8
ng g interface User --project=models --type=model -d
9
ng g interface JwtToken --project=models --type=model -d
10
ng g interface Profile --project=models --type=model -d
11
ng g interface Image --project=models --type=model -d
12
ng g enum ImageType --project=models -d
13
ng g enum Gender --project=models -d
14
ng g enum AccountSourceType --project=models -d
15
ng g enum ZoneType --project=models -d
16
ng g enum EnvironmentType --project=models -d
17
ng g interface Labels --project=models --type=model -d
18
ng g interface Membership --project=models --type=model -d
19
ng g interface ResourceQuota --project=models --type=model -d
20
ng g interface Project --project=models --type=model -d
21
ng g interface Cluster --project=models --type=model -d
Copied!

generate shared angular libs

with angular schematics (a.k.a. @nrwl/angular which is default in angular.json)
1
# add `core` angular module which will be only inported into root/app module.
2
ng g lib core --tags=scope:core --defaults -d
3
# add global services for `core` Module
4
5
6
ng g service services/Layout --project=core -d
7
ng g service services/PageTitle --project=core -d
8
ng g service services/ServiceWorker --project=core -d
9
ng g service services/MediaQuery --project=core -d
10
ng g service services/DeepLink --project=core -d
11
ng g service services/Feature --project=core -d
12
ng g service services/Analytics --project=core -d
13
ng g service services/PushNotification --project=core -d
14
ng g service services/InMemoryData --project=core --skip-tests -d
15
ng g service services/Profile --project=core --skip-tests -d
16
ng g service services/hammer --project=core --skip-tests --type=config -d
17
ng g service services/AppConfig --project=core --skip-tests -d
18
ng g service services/Auth --project=core --skip-tests -d
19
ng g @ngxs/schematics:state state/auth --spec=false --sourceRoot=libs/core/src/lib --project=core -d
20
ng g @ngxs/schematics:state state/preference --spec=false --sourceRoot=libs/core/src/lib --project=core -d
21
ng g @ngxs/schematics:state profile --path=state --spec=false --sourceRoot=libs/core/src/lib --project=core -d
22
ng g guard guard/auth --project=core --implements CanActivate -d
23
ng g guard guard/admin --project=core --implements CanActivate -d
24
ng g @ngxs/schematics:store --name=auth --spec --project=core --sourceRoot=libs/core/src/lib -d
25
ng g i interfaces/RouterStateData --project=core -d
26
ng g i interfaces/UserInfo --project=core -d
27
28
# add `shared` module which will encapsulate angular and 3rd party modules, needed for all `Lazy-loaded Feature Modules`
29
ng g lib shared --tags=scope:shared --defaults -d
30
# generate containers, components for `shared` Module
31
ng g service containers/entity/entity --project=shared
32
ng g component components/entityTable --project=shared --export=true
33
ng g component containers/entity --project=shared --skip-import
34
ng g component containers/entityForm --project=shared --skip-import
35
36
# generate containers for `NotFound` Module
37
ng g component containers/NotFound --project=not-found -d
38
39
40
### generate `Reusable lib Modules`
41
42
# generate components for `AppConfirm` Module
43
ng g lib AppConfirm --tags=scope:shared --publishable=true --defaults -d
44
ng g component AppConfirm --project=app-confirm --flat -d
45
ng g service AppConfirm --project=app-confirm --skip-tests -d
46
47
# generate components for `Draggable` Module
48
ng g lib Draggable --tags=scope:shared --publishable=true --defaults -d
49
ng g directive directives/Draggable --project=draggable --export=true -d
50
51
# generate components for `Breadcrumbs` Module
52
ng g lib Breadcrumbs --tags=scope:shared --publishable=true --defaults -d
53
ng g component breadcrumbs --project=breadcrumbs --flat -d
54
ng g service breadcrumbs --project=breadcrumbs -d
55
56
# generate components for `ScrollToTop` Module
57
ng g lib ScrollToTop --tags=scope:shared --publishable=true --defaults -d
58
ng g component ScrollToTop --project=scroll-to-top --flat -d
59
60
ng g lib scrollbar --tags=scope:shared --publishable=true --defaults -d
61
62
# generate components for `ContextMenu` Module
63
ng g lib ContextMenu --tags=scope:shared --publishable=true --defaults -d
64
ng g component ContextMenu --project=context-menu --flat -d
65
ng g directive ContextMenuTrigger --project=context-menu --flat -d
66
67
# generate components, services for `ThemePicker` Module
68
ng g lib ThemePicker --tags=scope:shared --publishable=true --defaults -d
69
ng g component ThemePicker --project=theme-picker --flat -d
70
ng g service ThemeStorage --project=theme-picker -d
71
ng g service StyleManager --project=theme-picker -d
72
ng g module ThemePickerService --project=theme-picker --flat -d
73
74
# generate components for `Notifications` Module
75
ng g lib Notifications --tags=scope:shared --publishable=true --defaults -d
76
ng g component notifications --project=notifications --flat -d
77
ng g class notification --type=model --project=notifications --defaults -d
78
ng g service notifications --project=notifications -d
79
80
# generate components for `Quickpanel` Module
81
ng g lib Quickpanel --tags=scope:app1 --defaults -d
82
ng g component Quickpanel --project=quickpanel --flat -d
83
84
# generate components for `LoadingOverlay` Module
85
ng g lib LoadingOverlay --tags=scope:shared --publishable=true --defaults -d
86
ng g component LoadingOverlay --project=loading-overlay --flat -d
87
88
# generate components for `svgViewer` Module
89
ng g lib svgViewer --tags=scope:shared --publishable=true --defaults -d
90
ng g component svgViewer --project=svg-viewer --flat -d
91
92
# generate components for `led` Module
93
ng g lib led --tags=scope:shared --publishable=true --defaults -d
94
ng g component led --project=led --flat -d
95
96
# generate components for `chatBox` Module
97
ng g lib chatBox --tags=scope:shared --publishable=true --defaults -d
98
ng g component chatBox --project=chat-box --flat -d
99
ng g component components/typingIndicator --project=chat-box -d
100
ng g component components/chatCard --project=chat-box -d
101
ng g component components/TextToSpeechPreferences --project=chat-box -d
102
ng g service services/nlp --project=chat-box -d
103
ng g service services/SpeechToText --project=chat-box -d
104
ng g service services/TextToSpeech --project=chat-box -d
105
ng g service services/chat --project=chat-box -d
106
107
# generate components for `socketioPlugin` Module
108
ng g lib socketioPlugin --tags=scope:shared --publishable=true --spec=false --defaults -d
109
ng g service socketioSubject --project=socketio-plugin -d
110
111
# generate components for `openTracing` Module
112
ng g lib openTracing --tags=scope:shared --publishable=true --spec=false --defaults -d
113
ng g service services/ZipkinTracing --project=open-tracing -d
114
ng g interceptor interceptors/tracing --project=open-tracing -d
115
116
# generate components for `jsonDiff` Module
117
ng g lib jsonDiff --tags=scope:shared --publishable=true --defaults -d
118
ng g component jsonDiff --project=json-diff --flat -d
119
ng g component jsonDiffTree --project=json-diff --flat -d
120
121
# generate components for `clap` Module
122
ng g lib clap --tags=scope:shared --skip-tests --publishable=true --defaults -d
123
ng g component clap --project=clap -s -t --skip-tests --export --flat -d
124
ng g component components/counterBubble --project=clap -s -t --skip-tests --flat -d
125
ng g component components/totalCounter --project=clap -s -t --skip-tests --flat -d
126
ng g component components/fab --project=clap -s -t --skip-tests --flat -d
127
128
# generate components for `ngx-utils` Module
129
ng g lib ngxUtils --tags=scope:shared,utils --framework=none --publishable=true --defaults -d
130
ng g module pipes/truncate --project=ngx-utils --skip-tests -d
131
ng g pipe pipes/truncate/Characters --project=ngx-utils --module=truncate --export -d
132
ng g pipe pipes/truncate/Words --project=ngx-utils --module=truncate --export -d
133
ng g module pipes/helper --project=ngx-utils --skip-tests -d
134
ng g pipe pipes/helper/filter --project=ngx-utils --module=helper --export -d
135
ng g pipe pipes/helper/groupBy --project=ngx-utils --module=helper --export -d
136
ng g pipe pipes/helper/safeHtml --project=ngx-utils --module=helper --export -d
137
ng g module directives/ngLet --project=ngx-utils --skip-tests -d
138
ng g directive directives/ng-let/ngLet --selector=ngLet --project=ngx-utils --module=ng-let --export -d
139
ng g module directives/routerLinkMatch --project=ngx-utils --skip-tests -d
140
ng g directive directives/router-link-match/RouterLinkMatch --selector=routerLinkMatch --project=ngx-utils --module=router-link-match --export -d
141
ng g module pipes/dateFns --project=ngx-utils --skip-tests -d
142
ng g service pipes/date-fns/DateFnsConfiguration --project=ngx-utils --module=date-fns --skip-tests -d
143
ng g pipe pipes/date-fns/FormatTimeInWords --project=ngx-utils --module=date-fns --export -d
144
ng g module directives/inViewport --project=ngx-utils --skip-tests -d
145
ng g directive directives/in-viewport/inViewport --selector=inViewport --project=ngx-utils --module=in-viewport --export -d
146
ng g service directives/in-viewport/Viewport --project=ngx-utils --module=in-viewport -d
147
ng g module directives/clickOutside --project=ngx-utils --skip-tests -d
148
ng g directive directives/click-outside/clickOutside --selector=clickOutside --project=ngx-utils --module=click-outside --export -d
149
ng g module directives/min --project=ngx-utils --skip-tests -d
150
ng g directive directives/min/MinValidator --selector=appMin --project=ngx-utils --module=min --export -d
151
ng g module directives/mask --project=ngx-utils --skip-tests -d
152
ng g directive directives/mask/mask --selector=ngxMask --project=ngx-utils --module=mask --export -d
153
154
# generate components for `blog` Module
155
ng g lib blog --routing --lazy --parent-module=libs/home/src/lib/home.module.ts --tags=scope:app1 --defaults -d
156
ng g component containers/BlogOverview --project=blog -d
157
ng g component components/BlogPreview --project=blog -d
158
ng g component containers/BlogPost --project=blog -d
159
ng g service services/highlight --project=blog --skip-tests -d
160
161
# generate components for `toolbar` Module
162
ng g lib toolbar --tags=scope:app1 --defaults -d
163
ng g component toolbar --project=toolbar --flat -d
164
ng g component components/search --project=toolbar -d
165
ng g component components/searchBar --project=toolbar -d
166
ng g component components/UserMenu --project=toolbar -d
167
ng g component components/FullscreenToggle --project=toolbar -d
168
ng g component components/SidenavMobileToggle --project=toolbar -d
169
ng g component components/QuickpanelToggle --project=toolbar -d
170
171
# generate components for `sidenav` Module
172
ng g lib sidenav --tags=scope:app1 --defaults -d
173
ng g component sidenav --project=sidenav --flat -d
174
ng g component components/sidenavItem --project=sidenav -d
175
ng g directive IconSidenav --project=sidenav -d
176
177
# generate components for `auth` Module
178
ng g lib auth --tags=scope:app1,scope:core --defaults -d
179
ng g component components/login --project=auth -d
180
ng g guard admin --project=auth --implements CanActivate -d
181
ng g @ngxs/schematics:store --name=auth --spec --project=auth --sourceRoot=libs/auth/src/lib -d
182
183
# generate components for `oidc` Module
184
ng g lib oidc --tags=scope:app1 --spec=false --publishable=true --defaults -d
185
ng g service services/Auth --project=oidc -d
186
ng g service services/Keycloak --project=oidc -d
187
ng g service services/Generic --project=oidc -d
188
ng g service services/Ping --project=oidc -d
189
ng g guard BaseAuth --project=oidc --implements CanActivate -d
190
ng g interceptor DefaultOidc --project=oidc -d
191
ng g @ngxs/schematics:store --name=auth --spec --project=oidc --sourceRoot=libs/oidc/src/lib -d
192
ng g i interfaces/OidcModule config --project=oidc -d
193
ng g i interfaces/OidcProvider config --project=oidc -d
194
ng g i interfaces/OidcInit config --project=oidc -d
195
ng g i interfaces/OidcResourceInterceptor config --project=oidc -d
196
197
# generate components for `navigator` Module
198
ng g lib navigator --tags=scope:app1,scope:core --defaults -d
199
ng g service services/menu --project=navigator -d
200
ng g class models/menuItem --project=navigator --type=model -d
201
ng g class state/menu --project=navigator --type=state -d
202
203
# generate containers, components for `home` Module
204
ng g component components/header --project=home
205
ng g component components/footer --project=home
206
ng g component components/login --project=home
207
ng g component components/callback --project=home
208
ng g component containers/homeLayout --project=home
209
ng g component containers/landing --project=home
210
ng g component containers/blog --project=home
211
ng g component containers/about --project=home
212
213
# generate containers, components for `dashboard` Module
214
ng g component components/rainbow --project=dashboard
215
ng g component components/OidcProfile --project=dashboard
216
ng g component components/header --project=dashboard
217
ng g component components/footer --project=dashboard
218
ng g component containers/dashboardLayout --project=dashboard
219
ng g component containers/overview --project=dashboard
220
ng g component containers/profile --project=dashboard
221
ng g component containers/settings --project=dashboard
222
223
# generate containers, components for `widgets` Module
224
ng g component containers/wizdash --project=widgets -d
225
226
# generate containers, components for `accounts` Module
227
ng g component containers/AccountsGrid --project=accounts -d
228
ng g component containers/AccountsTable --project=accounts -d
229
ng g component components/AccountDetail --project=accounts -d
230
ng g component components/AccountEdit --project=accounts -d
231
ng g class models/account --project=accounts --type=model -d
232
ng g service services/account --project=accounts -d
233
234
235
# generate containers, components for `experiments` Module
236
ng g component containers/animations --project=experiments -d
237
ng g component components/hammerCard --project=experiments -d
238
ng g directive components/Hammertime/Hammertime --project=experiments -d
239
ng g component containers/ContextMenu --project=experiments -d
240
ng g component containers/FileUpload --project=experiments -d
241
ng g component containers/virtualScroll --project=experiments -d
242
ng g component containers/StickyTable --project=experiments -d
243
ng g component containers/clapButton --project=experiments -s -t --skip-tests -d
244
ng g component containers/knobDemo --project=experiments -d
245
ng g component containers/ledDemo --project=experiments -d
246
ng g component containers/ImageComp --project=experiments -d
247
ng g component containers/layout --project=experiments -d
248
ng g component containers/dashing --project=experiments -d
249
ng g component components/card --project=experiments -d
250
ng g component containers/viewport --project=experiments --skip-tests -d
251
252
# generate components for `ImageComparison` Module
253
ng g lib ImageComparison --tags=scope:shared --spec=false --publishable=true --defaults -d
254
ng g component ImageComparison --project=image-comparison --export --flat -d
255
256
257
# generate containers, components for `admin` Module
258
ng g component components/header --project=admin -d
259
ng g component components/footer --project=admin -d
260
ng g component containers/overview --project=admin -d
261
ng g component containers/adminLayout --project=admin -d
262
263
ng g component containers/notifications --project=admin -d
264
ng g component components/notificationDetail --project=admin -d
265
ng g component components/notificationEdit --project=admin -d
266
ng g service services/notification --project=admin -d
267
268
ng g component containers/subscriptions --project=admin -d
269
ng g component components/subscriptionDetail --project=admin -d
270
ng g class models/subscription --project=admin --type=model -d
271
ng g service services/subscription --project=admin -d
Copied!

Workspace Schematics

1
# generate workspace-schematic `store`
2
ng g workspace-schematic store
3
# run workspace-schematic `store`
4
# *** always delete ./dist folder when you change schematic implementation ***
5
yarn workspace-schematic store models/sumoDemo -- --project=accounts -d
6
# build workspace tools
7
yarn workspace @ngx-starter-kit/tools build
Copied!
Last modified 9mo ago