-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
angular.json
2716 lines (2716 loc) · 134 KB
/
angular.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
{
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "angular",
"packageName": "@nrwl/angular",
"description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, Cypress, Karma, and Protractor. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
"root": "/packages/angular",
"source": "/packages/angular/src",
"documentation": [
{
"name": "Overview",
"id": "overview",
"path": "/packages/angular",
"file": "shared/angular-plugin",
"content": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Storybook, Jest, Cypress, Karma, and Protractor.\n- Generators to help scaffold code quickly, including:\n - Micro Frontends\n - Libraries, both internal to your codebase and publishable to npm\n - Upgrading AngularJS applications\n - Single Component Application Modules (SCAMs)\n- NgRx helpers.\n- Utilities for automatic workspace refactoring.\n\n{% callout type=\"note\" title=\"Currently using the Angular CLI?\" %}\nYou can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn more [here](/recipes/adopting-nx/migration-angular).\n{% /callout %}\n\n## Setting up the Angular plugin\n\nAdding the Angular plugin to an existing Nx workspace can be done with the following:\n\n```shell\nyarn add -D @nrwl/angular\n```\n\n```shell\nnpm install -D @nrwl/angular\n```\n\n## Using the Angular Plugin\n\n### Generating an application\n\nIt's straightforward to generate an Angular application:\n\n```shell\nnx g @nrwl/angular:app appName\n```\n\nBy default, the application will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n- Cypress as the E2E test runner.\n\nWe can then serve, build, test, lint, and run e2e tests on the application with the following commands:\n\n```shell\nnx serve appName\nnx build appName\nnx test appName\nnx lint appName\nnx e2e appName\n```\n\n### Generating a library\n\nGenerating an Angular library is very similar to generating an application:\n\n```shell\nnx g @nrwl/angular:lib libName\n```\n\nBy default, the library will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n\nWe can then test and lint the library with the following commands:\n\n```shell\nnx test libName\nnx lint libName\n```\n\nRead more about:\n\n- [Creating Libraries](/more-concepts/creating-libraries)\n- [Library Types](/more-concepts/library-types)\n- [Buildable and Publishable Libraries](/more-concepts/buildable-and-publishable-libraries)\n\n## More Documentation\n\n- [Angular Nx Tutorial](/angular-tutorial/1-code-generation)\n- [Migrating from the Angular CLI](recipe/migration-angular)\n- [Setup Module Federation with Angular and Nx](/recipes/module-federation/faster-builds)\n- [Using NgRx](/recipes/other/misc-ngrx)\n- [Using Data Persistence operators](/recipes/other/misc-data-persistence)\n- [Upgrading an AngularJS application to Angular](/recipes/adopting-nx/migration-angularjs)\n- [Using Tailwind CSS with Angular projects](/recipes/other/using-tailwind-css-with-angular-projects)\n"
},
{
"name": "Angular and Nx Version Matrix",
"id": "angular-nx-version-matrix",
"file": "shared/angular-nx-version-matrix",
"path": "/angular-nx-version-matrix",
"content": "# Nx and Angular Version Compatibility Matrix\n\nBelow is a reference table that matches versions of Angular to the version of Nx that is compatible with it. The table shows the version of Angular, the recommended version of Nx to use and the range of Nx versions that support the version of Angular.\n\nWe provide a recommended version, and it is usually the latest minor version of Nx in the range provided because there will have been bug fixes added since the first release in the range.\n\n| Angular Version | **Nx Version _(recommended)_** | Nx Version _(range)_ |\n| --------------- | ------------------------------ | -------------------- |\n| ^8.0.0 | **8.12.2** | 8.7.0 <= 8.12.2 |\n| ^9.0.0 | **9.6.0** | 8.12.4 <= 9.6.0 |\n| ^10.0.0 | **10.4.15** | 9.7.0 <= 10.4.15 |\n| ^11.0.0 | **12.2.0** | 11.0.0 <= 12.2.0 |\n| ^12.0.0 | **13.1.4** | 12.3.0 <= 13.1.4 |\n| ^13.0.0 | **14.1.9** | 13.2.0 <= 14.1.9 |\n| ~14.0.0 | **14.4.3** | 14.2.1 <= 14.4.3 |\n| ~14.1.0 | **14.5.10** | 14.5.0 <= 14.5.10 |\n| ~14.2.0 | **15.1.1** | 14.6.0 <= 15.1.1 |\n| ~15.0.0 | **latest** | 15.2.0 <= latest |\n\nIf you would like to see how the supported versions of Node and Typescript for the version of Angular you are using, [Lars Gyrup Brink Nielsen](https://twitter.com/LayZeeDK) has a very good resource for that [here](https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3).\n"
}
],
"generators": [
{
"name": "add-linting",
"factory": "./src/generators/add-linting/add-linting",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxAngularAddLintingGenerator",
"title": "Add linting to an Angular project.",
"description": "Adds linting configuration to an Angular project.",
"cli": "nx",
"type": "object",
"examples": [
{
"command": "nx g @nrwl/angular:add-linting --prefix=cool --projectName=cool-lib --projectRoot=libs/cool-lib",
"description": "Adds ESLint with Angular-specific rules for an existing project named `cool-lib` with the [prefix](https://angular.io/guide/styleguide#style-02-07) `cool`"
}
],
"properties": {
"prefix": {
"type": "string",
"format": "html-selector",
"description": "The prefix to apply to generated selectors."
},
"projectName": {
"type": "string",
"description": "The name of the project."
},
"projectRoot": {
"type": "string",
"description": "The path to the root of the selected project."
},
"setParserOptionsProject": {
"type": "boolean",
"description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
"default": false
},
"skipFormat": {
"type": "boolean",
"description": "Skip formatting files.",
"default": false
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`."
}
},
"additionalProperties": false,
"required": ["prefix", "projectName", "projectRoot"],
"presets": []
},
"description": "Adds linting configuration to an Angular project.",
"hidden": true,
"implementation": "/packages/angular/src/generators/add-linting/add-linting.ts",
"aliases": [],
"path": "/packages/angular/src/generators/add-linting/schema.json"
},
{
"name": "application",
"factory": "./src/generators/application/application",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "GeneratorNxApp",
"title": "Creates an Angular application.",
"description": "Creates an Angular application.",
"type": "object",
"cli": "nx",
"properties": {
"name": {
"description": "The name of the application.",
"type": "string",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "What name would you like to use for the application?",
"pattern": "^[a-zA-Z].*$"
},
"directory": {
"description": "The directory of the new application.",
"type": "string"
},
"style": {
"description": "The file extension to be used for style files.",
"type": "string",
"default": "css",
"enum": ["css", "scss", "sass", "less"],
"x-prompt": {
"message": "Which stylesheet format would you like to use?",
"type": "list",
"items": [
{ "value": "css", "label": "CSS" },
{
"value": "scss",
"label": "SASS(.scss) [ http://sass-lang.com ]"
},
{
"value": "sass",
"label": "SASS(.sass) [ http://sass-lang.com ]"
},
{
"value": "less",
"label": "LESS [ http://lesscss.org ]"
}
]
}
},
"routing": {
"type": "boolean",
"description": "Generate a routing module.",
"default": false,
"x-prompt": "Would you like to configure routing for this application?"
},
"inlineStyle": {
"description": "Specifies if the style will be in the ts file.",
"type": "boolean",
"default": false,
"alias": "s"
},
"inlineTemplate": {
"description": "Specifies if the template will be in the ts file.",
"type": "boolean",
"default": false,
"alias": "t"
},
"viewEncapsulation": {
"description": "Specifies the view encapsulation strategy.",
"enum": ["Emulated", "None", "ShadowDom"],
"type": "string"
},
"prefix": {
"type": "string",
"format": "html-selector",
"description": "The prefix to apply to generated selectors.",
"alias": "p"
},
"skipTests": {
"description": "Skip creating spec files.",
"type": "boolean",
"default": false,
"alias": "S"
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`."
},
"unitTestRunner": {
"type": "string",
"enum": ["karma", "jest", "none"],
"description": "Test runner to use for unit tests.",
"default": "jest"
},
"e2eTestRunner": {
"type": "string",
"enum": ["protractor", "cypress", "none"],
"description": "Test runner to use for end to end (E2E) tests. The `protractor` option is deprecated and it will be removed in v15.",
"default": "cypress"
},
"tags": {
"type": "string",
"description": "Add tags to the application (used for linting)."
},
"linter": {
"description": "The tool to use for running lint checks.",
"type": "string",
"enum": ["eslint", "none"],
"default": "eslint"
},
"backendProject": {
"type": "string",
"description": "Backend project that provides data to this application. This sets up `proxy.config.json`."
},
"strict": {
"type": "boolean",
"description": "Create an application with stricter type checking and build optimization options.",
"default": true
},
"standaloneConfig": {
"description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
"type": "boolean"
},
"port": {
"type": "number",
"description": "The port at which the remote application should be served."
},
"setParserOptionsProject": {
"type": "boolean",
"description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
"default": false
},
"addTailwind": {
"type": "boolean",
"description": "Whether to configure Tailwind CSS for the application.",
"default": false
},
"skipDefaultProject": {
"description": "Skip setting the project as the default project. When `false` (the default), the project is set as the default project only if there is no default project already set.",
"type": "boolean",
"default": false
},
"standalone": {
"description": "Generate an application that is setup to use standalone components.",
"type": "boolean",
"default": false
},
"rootProject": {
"description": "Create an application at the root of the workspace.",
"type": "boolean",
"default": false,
"hidden": true
}
},
"additionalProperties": false,
"required": ["name"],
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/angular:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n```bash\nnx g @nrwl/angular:app my-app --directory=my-dir --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Components application\" %}\n\nCreate an application with Single File Components (inline styles and inline templates):\n\n```bash\nnx g @nrwl/angular:app my-app --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Components application\" %}\n\nCreate an application that is setup to use standalone components:\n\n```bash\nnx g @nrwl/angular:app my-app --standalone\n```\n\n{% /tab %}\n\n{% tab label=\"Set custom prefix and tags\" %}\n\nSet the prefix to apply to generated selectors and add tags to the application (used for linting).\n\n```bash\nnx g @nrwl/angular:app my-app --prefix=admin --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
"presets": []
},
"aliases": ["app"],
"x-type": "application",
"description": "Creates an Angular application.",
"implementation": "/packages/angular/src/generators/application/application.ts",
"hidden": false,
"path": "/packages/angular/src/generators/application/schema.json"
},
{
"name": "component",
"factory": "./src/generators/component/component",
"schema": {
"$schema": "http://json-schema.org/draft-07/schema",
"$id": "SchematicsAngularComponent",
"title": "Angular Component Schema",
"cli": "nx",
"type": "object",
"description": "Creates a new, generic Angular component definition in the given or default project.",
"additionalProperties": false,
"properties": {
"path": {
"type": "string",
"format": "path",
"description": "The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.",
"visible": false
},
"project": {
"type": "string",
"description": "The name of the project.",
"x-dropdown": "projects"
},
"name": {
"type": "string",
"description": "The name of the component.",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "What name would you like to use for the component?"
},
"displayBlock": {
"description": "Specifies if the style will contain `:host { display: block; }`.",
"type": "boolean",
"default": false,
"alias": "b"
},
"inlineStyle": {
"description": "Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.",
"type": "boolean",
"default": false,
"alias": "s"
},
"inlineTemplate": {
"description": "Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.",
"type": "boolean",
"default": false,
"alias": "t"
},
"standalone": {
"description": "Whether the generated component is standalone.",
"type": "boolean",
"default": false
},
"viewEncapsulation": {
"description": "The view encapsulation strategy to use in the new component.",
"enum": ["Emulated", "None", "ShadowDom"],
"type": "string",
"alias": "v"
},
"changeDetection": {
"description": "The change detection strategy to use in the new component.",
"enum": ["Default", "OnPush"],
"type": "string",
"default": "Default",
"alias": "c"
},
"module": {
"type": "string",
"description": "The filename or path to the NgModule that will declare this component.",
"alias": "m"
},
"style": {
"description": "The file extension or preprocessor to use for style files, or `none` to skip generating the style file.",
"type": "string",
"default": "css",
"enum": ["css", "scss", "sass", "less", "none"]
},
"skipTests": {
"type": "boolean",
"description": "Do not create `spec.ts` test files for the new component.",
"default": false
},
"flat": {
"type": "boolean",
"description": "Create the new files at the top level of the current project.",
"default": false
},
"skipImport": {
"type": "boolean",
"description": "Do not import this component into the owning NgModule.",
"default": false
},
"selector": {
"type": "string",
"format": "html-selector",
"description": "The HTML selector to use for this component."
},
"skipSelector": {
"type": "boolean",
"default": false,
"description": "Specifies if the component should have a selector or not."
},
"type": {
"type": "string",
"description": "Adds a developer-defined type to the filename, in the format `name.type.ts`.",
"default": "component"
},
"export": {
"type": "boolean",
"description": "Specifies if the component should be exported in the declaring `NgModule`. Additionally, if the project is a library, the component will be exported from the project's entry point (normally `index.ts`) if the module it belongs to is also exported or if the component is standalone.",
"default": false
}
},
"required": ["name"],
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component`:\n\n```bash\nnx g @nrwl/angular:component my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Component\" %}\n\nCreate a standalone component named `my-component`:\n\n```bash\nnx g @nrwl/angular:component my-component --standalone\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `my-component` with inline styles and inline template:\n\n```bash\nnx g @nrwl/angular:component my-component --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `my-component` with OnPush Change Detection Strategy:\n\n```bash\nnx g @nrwl/angular:component my-component --changeDetection=OnPush\n```\n\n{% /tab %}\n",
"presets": []
},
"aliases": ["c"],
"description": "Generate an Angular Component.",
"implementation": "/packages/angular/src/generators/component/component.ts",
"hidden": false,
"path": "/packages/angular/src/generators/component/schema.json"
},
{
"name": "component-cypress-spec",
"factory": "./src/generators/component-cypress-spec/component-cypress-spec",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxAngularComponentCypressSpecGenerator",
"type": "object",
"cli": "nx",
"description": "Creates a Cypress spec for a UI component that has a story.",
"properties": {
"projectName": {
"type": "string",
"description": "The name of the project.",
"examples": ["ui-samples"]
},
"projectPath": {
"type": "string",
"description": "Path to the project.",
"examples": ["libs/ui-samples"]
},
"componentName": {
"type": "string",
"description": "Class name of the component.",
"examples": ["AwesomeComponent"]
},
"componentPath": {
"type": "string",
"description": "Relative path to the component file from the project root.",
"examples": ["awesome"]
},
"componentFileName": {
"type": "string",
"description": "Component file name without the `.ts` extension.",
"examples": ["awesome.component"]
},
"cypressProject": {
"type": "string",
"description": "The Cypress project to generate the stories under. By default, inferred from `projectName`."
},
"specDirectory": {
"type": "string",
"description": "Directory where to place the generated spec file. By default matches the value of the `componentPath` option."
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false
}
},
"additionalProperties": false,
"required": [
"projectName",
"projectPath",
"componentName",
"componentPath",
"componentFileName"
],
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\n\nCreate a cypress spec for a component that is set up with Storybook.\n\n```bash\nnx g @nrwl/angular:component-cypress-spec --componentName=MyButtonComponent --componentPath=libs/ui/src/lib/button/button.component.ts --componentFileName=button.component --projectName=ui --projectPath=libs/ui\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"description": "Creates a Cypress spec for a UI component that has a story.",
"hidden": true,
"implementation": "/packages/angular/src/generators/component-cypress-spec/component-cypress-spec.ts",
"aliases": [],
"path": "/packages/angular/src/generators/component-cypress-spec/schema.json"
},
{
"name": "component-story",
"factory": "./src/generators/component-story/component-story",
"schema": {
"$schema": "https://json-schema.org/schema",
"$id": "NxAngularComponentStoryGenerator",
"type": "object",
"cli": "nx",
"description": "Creates a `stories.ts` file for an Angular component.",
"properties": {
"projectPath": {
"type": "string",
"description": "Path to the project.",
"examples": ["libs/ui-samples"]
},
"componentName": {
"type": "string",
"description": "Class name of the component.",
"examples": ["AwesomeComponent"]
},
"componentPath": {
"type": "string",
"description": "Relative path to the component file from the project root.",
"examples": ["awesome"]
},
"componentFileName": {
"type": "string",
"description": "Component file name without the `.ts` extension.",
"examples": ["awesome.component"]
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false
}
},
"additionalProperties": false,
"required": [
"projectPath",
"componentName",
"componentPath",
"componentFileName"
],
"presets": []
},
"description": "Creates a stories.ts file for a component.",
"hidden": true,
"implementation": "/packages/angular/src/generators/component-story/component-story.ts",
"aliases": [],
"path": "/packages/angular/src/generators/component-story/schema.json"
},
{
"name": "component-test",
"factory": "./src/generators/component-test/component-test",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxAngularComponentTestGenerator",
"type": "object",
"cli": "nx",
"description": "Create a `*.cy.ts` file for Cypress component testing for an Angular component.",
"properties": {
"project": {
"type": "string",
"description": "The name of the project where the component is located.",
"x-dropdown": "projects",
"x-prompt": "What project is the component located in?"
},
"componentName": {
"type": "string",
"description": "Class name of the component to create a test for.",
"examples": ["MyFancyButtonComponent"],
"x-prompt": "What is the class name of the component to create a test for?"
},
"componentDir": {
"type": "string",
"description": "Relative path to the folder that contains the component from the project root.",
"examples": ["src/lib/my-fancy-button"],
"x-prompt": "What is the path to the component directory from the project root?"
},
"componentFileName": {
"type": "string",
"description": "File name that contains the component without the `.ts` extension.",
"examples": ["my-fancy-button.component"],
"x-prompt": "What is the file name that contains the component?"
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false
}
},
"additionalProperties": false,
"required": [
"project",
"componentName",
"componentDir",
"componentFileName"
],
"examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nAngular component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you're wanting to create Cypress tests for a Storybook story, then check out the [component-cypress-spec generator docs](/packages/angular/generators/component-cypress-spec)\n\nIf you're wanting to create Storybook stories for a component, then check out the [stories generator docs](/packages/angular/generators/stories) or [component-story generator docs](/packages/angular/generators/component-cypress-spec)\n{% /callout %}\n\nThis generator is used to create a Cypress component test file for a given Angular component.\n\n```shell\nnx g @nrwl/angular:component-test --project=my-cool-angular-project --componentName=CoolBtnComponent --componentDir=src/cool-btn --componentFileName=cool-btn.component\n```\n\nTest file are generated with the `.cy.ts` suffix. this is to prevent colliding with any existing `.spec.` files contained in the project.\n\nIt's currently expected the generated `.cy.ts` file will live side by side with the component. It is also assumed the project is already setup for component testing. If it isn't, then you can run the [cypress-component-project generator](/packages/angular/generators/cypress-component-configuration) to set up the project for component testing.\n",
"presets": []
},
"description": "Creates a cypress component test file for a component.",
"implementation": "/packages/angular/src/generators/component-test/component-test.ts",
"aliases": [],
"hidden": false,
"path": "/packages/angular/src/generators/component-test/schema.json"
},
{
"name": "convert-tslint-to-eslint",
"factory": "./src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint#conversionGenerator",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxAngularConvertTSLintToESLintGenerator",
"cli": "nx",
"title": "Convert an Angular project from TSLint to ESLint",
"description": "Convert an Angular project from TSLint to ESLint. NOTE: Does not work in `--dry-run mode`.",
"examples": [
{
"command": "nx g convert-tslint-to-eslint myapp",
"description": "The following will first configure the project, `myapp`, the same way a _new_ project is configured i.e. It will use Nx's new recommended ESLint config. By default, this also adds the existing TSLint configuration on top of the default ESLint config from Nx to continue checking what it checks today. This is done by migrating TSLint rules to their equivalent ESLint rules to the best of its abilities. Some TSLint rules may not have ESLint equivalents and will be reported during the conversion"
},
{
"command": "nx g convert-tslint-to-eslint myapp --ignoreExistingTslintConfig=true",
"description": "If your TSLint config isn't extremely important to you, ignoring it makes this process more deterministic. Unlike the prior example, this will discard the existing TSLint configuration, meaning that the project will only have the Nx's latest recommended ESLint configuration which may be good enough for some workspaces"
},
{
"command": "nx g convert-tslint-to-eslint myapp --removeTSLintIfNoMoreTSLintTargets=false",
"description": "By default, this process removes the TSLint related dependencies and configuration once no more projects use TSLint. This can be disabled with the following flag to keep TSLint related dependencies and configuration in the repo"
}
],
"type": "object",
"properties": {
"project": {
"description": "The name of the Angular project to convert. Please note, if the project is an Angular app with an associated Cypress e2e project, it will also attempt to convert that.",
"type": "string",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "Which Angular project would you like to convert from TSLint to ESLint?"
},
"ignoreExistingTslintConfig": {
"type": "boolean",
"description": "If true, it will not use existing TSLint config as a reference, it will just reset the project with the latest recommended ESLint config.",
"default": false,
"x-prompt": "Would you like to ignore the existing TSLint config? Recommended if the TSLint config has not been altered much as it makes the new ESLint config cleaner."
},
"removeTSLintIfNoMoreTSLintTargets": {
"type": "boolean",
"description": "If this conversion leaves no more TSLint usage in the workspace, it will remove TSLint and related dependencies and configuration.",
"default": true,
"x-prompt": "Would you like to remove TSLint and its related config if there are no TSLint projects remaining after this conversion?"
},
"skipFormat": {
"type": "boolean",
"description": "Skip formatting files.",
"default": false
}
},
"additionalProperties": false,
"required": ["project"],
"presets": []
},
"description": "Converts a project from TSLint to ESLint.",
"implementation": "/packages/angular/src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint#conversionGenerator.ts",
"aliases": [],
"hidden": false,
"path": "/packages/angular/src/generators/convert-tslint-to-eslint/schema.json"
},
{
"name": "downgrade-module",
"factory": "./src/generators/downgrade-module/downgrade-module",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxDowngradeModuleGenerator",
"title": "Generates downgradeModule setup.",
"description": "Sets up a Downgrade Module for using AngularJS and Angular.",
"cli": "nx",
"type": "object",
"properties": {
"project": {
"type": "string",
"description": "The name of the project."
},
"name": {
"type": "string",
"description": "The name of the main AngularJS module.",
"$default": { "$source": "argv", "index": 0 }
},
"angularJsImport": {
"type": "string",
"description": "Import expression of the AngularJS application (e.g., `--angularJsImport=some_node_module/my_app`)."
},
"skipFormat": {
"type": "boolean",
"description": "Skip formatting files.",
"default": false
},
"skipPackageJson": {
"type": "boolean",
"description": "Do not add `@angular/upgrade` to `package.json` (e.g., `--skipPackageJson`).",
"default": false
}
},
"additionalProperties": false,
"required": ["name", "project"],
"examplesFile": "## Examples\n\nBelow are some examples of how to generate configuration and setup for using `ngUpgrade`'s `DowngradeModule` for your application.\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\n\n```bash\nnx g @nrwl/angular:downgrade-module --name=myAngularJsModule --project=myapp\n```\n\n{% /tab %}\n\n{% tab label=\"Setup Router\" %}\n\nAllow a setup that configures routing for `DowngradeModule`.\n\n```bash\nnx g @nrwl/angular:downgrade-module --name=myAngularJsModule --project=myapp --router=true\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"description": "Sets up a Downgrade Module.",
"implementation": "/packages/angular/src/generators/downgrade-module/downgrade-module.ts",
"aliases": [],
"hidden": false,
"path": "/packages/angular/src/generators/downgrade-module/schema.json"
},
{
"name": "init",
"factory": "./src/generators/init/init",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "SchematicsAngularModuleInit",
"cli": "nx",
"title": "Init Angular Plugin",
"description": "Initializes the `@nrwl/angular` plugin. NOTE: Does not work in the `--dry-run` mode.",
"type": "object",
"examples": [
{
"command": "nx g @nrwl/angular:init --style=scss",
"description": "Installs angular dependencies and initializes the `@nrwl/angular` plugin with the `scss` stylesheet format."
}
],
"properties": {
"unitTestRunner": {
"type": "string",
"enum": ["karma", "jest", "none"],
"description": "Test runner to use for unit tests.",
"default": "jest"
},
"e2eTestRunner": {
"type": "string",
"enum": ["protractor", "cypress", "none"],
"description": "Test runner to use for end to end (e2e) tests.",
"default": "cypress"
},
"skipInstall": {
"type": "boolean",
"description": "Skip installing after adding `@nrwl/workspace`.",
"default": false
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false
},
"linter": {
"description": "The tool to use for running lint checks.",
"type": "string",
"enum": ["eslint", "none"],
"default": "eslint"
},
"style": {
"description": "The file extension to be used for style files.",
"type": "string",
"default": "css",
"enum": ["css", "scss", "sass", "less"],
"x-prompt": {
"message": "Which stylesheet format would you like to use?",
"type": "list",
"items": [
{ "value": "css", "label": "CSS" },
{
"value": "scss",
"label": "SASS(.scss) [ http://sass-lang.com ]"
},
{
"value": "sass",
"label": "SASS(.sass) [ http://sass-lang.com ]"
},
{
"value": "less",
"label": "LESS [ http://lesscss.org ]"
}
]
}
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`."
}
},
"additionalProperties": false,
"presets": []
},
"description": "Initializes the `@nrwl/angular` plugin.",
"hidden": true,
"implementation": "/packages/angular/src/generators/init/init.ts",
"aliases": [],
"path": "/packages/angular/src/generators/init/schema.json"
},
{
"name": "karma",
"factory": "./src/generators/karma/karma",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxAngularKarmaGenerator",
"title": "Add Karma Configuration to the workspace.",
"description": "Add Karma configuration to an Nx workspace.",
"cli": "nx",
"type": "object",
"examples": [
{
"command": "nx g @nrwl/angular:karma",
"description": "Add a base karma configuration to the workspace."
}
],
"properties": {
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`."
}
},
"additionalProperties": false,
"required": [],
"presets": []
},
"description": "Adds Karma configuration to a workspace.",
"implementation": "/packages/angular/src/generators/karma/karma.ts",
"aliases": [],
"hidden": false,
"path": "/packages/angular/src/generators/karma/schema.json"
},
{
"name": "karma-project",
"factory": "./src/generators/karma-project/karma-project",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxKarmaProjectGenerator",
"title": "Create Karma Configuration for a project",
"description": "Add Karma configuration to an angular project.",
"cli": "nx",
"type": "object",
"properties": {
"project": {
"type": "string",
"description": "The name of the project.",
"x-dropdown": "projects"
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false
},
"skipPackageJson": {
"description": "Skip updating package.json.",
"type": "boolean",
"default": false
}
},
"additionalProperties": false,
"required": ["project"],
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\n\nTo add karma to project, run the following command.\n\n```bash\nnx g @nrwl/angular:karma-project --project=myapp\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"description": "Adds Karma configuration to a project.",
"implementation": "/packages/angular/src/generators/karma-project/karma-project.ts",
"aliases": [],
"hidden": false,
"path": "/packages/angular/src/generators/karma-project/schema.json"
},
{
"name": "library",
"factory": "./src/generators/library/library",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "GeneratorAngularLibrary",
"title": "Create a library",
"description": "Creates an Angular library.",
"type": "object",
"cli": "nx",
"properties": {
"name": {
"type": "string",
"description": "The name of the library.",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "What name would you like to use for the library?",
"pattern": "^[a-zA-Z].*$"
},
"directory": {
"type": "string",
"description": "A directory where the library is placed."
},
"publishable": {
"type": "boolean",
"default": false,
"description": "Generate a publishable library."
},
"buildable": {
"type": "boolean",
"default": false,
"description": "Generate a buildable library."
},
"prefix": {
"type": "string",
"format": "html-selector",
"description": "The prefix to apply to generated selectors.",
"alias": "p"
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false
},
"simpleModuleName": {
"description": "Keep the module name simple (when using `--directory`).",
"type": "boolean",
"default": false
},
"addModuleSpec": {
"description": "Add a module spec file.",
"type": "boolean",
"default": false
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`."
},
"skipTsConfig": {
"type": "boolean",
"default": false,
"description": "Do not update `tsconfig.json` for development experience."
},
"routing": {
"type": "boolean",
"default": false,
"description": "Add router configuration. See `lazy` for more information."
},
"lazy": {
"type": "boolean",
"default": false,
"description": "Add `RouterModule.forChild` when set to true, and a simple array of routes when set to false."
},
"parent": {
"type": "string",
"description": "Path to the parent route configuration using `loadChildren` or `children`, depending on what `lazy` is set to."
},
"tags": {
"type": "string",
"description": "Add tags to the library (used for linting)."
},
"unitTestRunner": {
"type": "string",
"enum": ["karma", "jest", "none"],
"description": "Test runner to use for unit tests.",
"default": "jest"
},
"importPath": {
"type": "string",
"description": "The library name used to import it, like `@myorg/my-awesome-lib`. Must be a valid npm name."
},
"strict": {
"type": "boolean",
"description": "Create a library with stricter type checking and build optimization options.",
"default": true
},
"linter": {
"description": "The tool to use for running lint checks.",
"type": "string",
"enum": ["eslint", "none"],
"default": "eslint"
},
"standaloneConfig": {
"description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
"type": "boolean"
},
"compilationMode": {
"description": "Specifies the compilation mode to use. If not specified, it will default to `partial` for publishable libraries and to `full` for buildable libraries. The `full` value can not be used for publishable libraries.",
"type": "string",
"enum": ["full", "partial"]
},
"setParserOptionsProject": {
"type": "boolean",
"description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
"default": false
},
"addTailwind": {
"type": "boolean",
"description": "Whether to configure Tailwind CSS for the application. It can only be used with buildable and publishable libraries. Non-buildable libraries will use the application's Tailwind configuration.",
"default": false
},
"skipModule": {
"type": "boolean",
"description": "Whether to skip the creation of a default module when generating the library.",
"default": false
},
"standalone": {
"type": "boolean",
"description": "Generate a library that uses a standalone component instead of a module as the entry point.",
"default": false
},
"displayBlock": {
"description": "Specifies if the component generated style will contain `:host { display: block; }`. Disclaimer: This option is only valid when `--standalone` is set to `true`.",
"type": "boolean",
"default": false,
"alias": "b"
},
"inlineStyle": {
"description": "Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file. Disclaimer: This option is only valid when `--standalone` is set to `true`.",
"type": "boolean",
"default": false,
"alias": "s"
},
"inlineTemplate": {
"description": "Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file. Disclaimer: This option is only valid when `--standalone` is set to `true`.",
"type": "boolean",
"default": false,
"alias": "t"
},
"viewEncapsulation": {
"description": "The view encapsulation strategy to use in the new component. Disclaimer: This option is only valid when `--standalone` is set to `true`.",
"enum": ["Emulated", "None", "ShadowDom"],
"type": "string",
"alias": "v"
},
"changeDetection": {
"description": "The change detection strategy to use in the new component. Disclaimer: This option is only valid when `--standalone` is set to `true`.",
"enum": ["Default", "OnPush"],
"type": "string",
"default": "Default",
"alias": "c"
},
"style": {
"description": "The file extension or preprocessor to use for style files, or `none` to skip generating the style file. Disclaimer: This option is only valid when `--standalone` is set to `true`.",
"type": "string",
"default": "css",
"enum": ["css", "scss", "sass", "less", "none"]
},
"skipTests": {
"type": "boolean",
"description": "Do not create `spec.ts` test files for the new component. Disclaimer: This option is only valid when `--standalone` is set to `true`.",
"default": false
},
"selector": {
"type": "string",
"format": "html-selector",
"description": "The HTML selector to use for this component. Disclaimer: This option is only valid when `--standalone` is set to `true`."
},
"skipSelector": {
"type": "boolean",
"default": false,
"description": "Specifies if the component should have a selector or not. Disclaimer: This option is only valid when `--standalone` is set to `true`."
},
"flat": {
"type": "boolean",
"default": false,
"description": "Ensure the generated standalone component is not placed in a subdirectory. Disclaimer: This option is only valid when `--standalone` is set to `true`."
}
},
"additionalProperties": false,
"required": ["name"],
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Library\" %}\n\nCreates the `my-ui-lib` library with an `ui` tag:\n\n```bash\nnx g @nrwl/angular:library my-ui-lib --tags=ui\n```\n\n{% /tab %}\n\n{% tab label=\"Nested Folder & Import\"%}\nCreates the `my-lib` library in the `nested` directory and sets the import path to `@myorg/nested/my-lib`:\n\n```bash\nnx g @nrwl/angular:library --directory=nested --importPath=@myorg/nested/my-lib my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone component\"%}\nCreates the `my-standalone-lib` library with a standalone component as an entry point instead of an ng-module. The component can be used via the `myorg-standalone-component` selector.\n\n```bash\nnx g @nrwl/angular:library --standalone --selector=myorg-standalone-component my-standalone-lib\n```\n\n{% /tab %}\n",
"presets": []
},