-
Notifications
You must be signed in to change notification settings - Fork 1
/
Angular.txt
230 lines (191 loc) · 9.91 KB
/
Angular.txt
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
npm install -g @angular/cli
ng v or ng -v or ng --version
ng help
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve
http://localhost:4200/
ng serve --host 0.0.0.0 --port 4201
Generating Components, Directives, Pipes and Services
-----------------------------------------------------
ng generate (or just ng g) command to generate Angular components
ng generate component my-new-component
ng g component my-new-component # using the alias
# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ./newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp
Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module
angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow this steps:
ng g module new-module to create a new module
call ng g component new-module/new-component
This should add the new component, directive or pipe reference to the new-module you've created.
Updating Angular CLI
--------------------
If you're using Angular CLI 1.0.0-beta.28 or less, you need to uninstall angular-cli package. It should be done due to changing of package's name and scope from angular-cli to @angular/cli:
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
To update Angular CLI to a new version, you must update both the global package and your project's local package.
Global package:
npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest
Local project package:
rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install
npm install --only=dev
Bundling
--------
All builds make use of bundling, and using the --prod flag in ng build --prod or ng serve --prod will also make use of uglifying and tree-shaking functionality.
Running unit tests
------------------
ng test
Tests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via --watch=false or --single-run.
Running end-to-end tests
------------------------
ng e2e
Before running the tests make sure you are serving the app via ng serve. End-to-end tests are run via Protractor.
Additional Commands
-------------------
ng new
ng add
ng serve
ng generate
ng lint
ng test
ng e2e
ng build
ng get/ng set
ng doc
ng eject
ng xi18n
ng update
ng new
------
Overview
ng new [name] creates a new angular application.
Default applications are created in a directory of the same name, with an initialized Angular application.
Options
directory
dry-run
inline-style
inline-template
minimal
prefix
routing
--routing default value: false
Generate a routing module.
skip-commit
skip-git
skip-install
skip-tests
source-dir
style
verbose
Angular CLI Config Schema
-------------------------
Options
project: The global configuration of the project.
name (string): The name of the project.
ejected(boolean): Whether or not this project was ejected. Default is false.
apps (array): Properties of the different applications in this project.
name (string): Name of the app.
root (string): The root directory of the app.
outDir (string): The output directory for build results. Default is dist/.
assets (array): List of application assets.
deployUrl (string): URL where files will be deployed.
index (string): The name of the start HTML file. Default is index.html
main (string): The name of the main entry-point file.
polyfills (string): The name of the polyfills entry-point file. Loaded before the app.
test (string): The name of the test entry-point file.
tsconfig (string): The name of the TypeScript configuration file. Default is tsconfig.app.json.
testTsconfig (string): The name of the TypeScript configuration file for unit tests.
prefix (string): The prefix to apply to generated selectors.
serviceWorker (boolean): Experimental support for a service worker from @angular/service-worker. Default is false.
showCircularDependencies (boolean): Show circular dependency warnings on builds. Default is true.
styles (string|array): Global styles to be included in the build.
stylePreprocessorOptions : Options to pass to style preprocessors.
includePaths (array): Paths to include. Paths will be resolved to project root.
scripts (array): Global scripts to be included in the build.
environmentSource (string): Source file for environment config.
environments (object): Name and corresponding file for environment config.
e2e: Configuration for end-to-end tests.
protractor
config (string): Path to the config file.
lint (array): Properties to be passed to TSLint.
files (string|array): File glob(s) to lint.
project (string): Location of the tsconfig.json project file. Will also use as files to lint if 'files' property not present.
tslintConfig (string): Location of the tslint.json configuration. Default is tslint.json.
exclude (string|array): File glob(s) to ignore.
test: Configuration for unit tests.
karma
config (string): Path to the karma config file.
codeCoverage
exclude (array): Globs to exclude from code coverage.
defaults: Specify the default values for generating.
styleExt (string): The file extension to be used for style files.
poll (number): How often to check for file updates.
class: Options for generating a class.
spec (boolean): Specifies if a spec file is generated. Default is false.
component: Options for generating a component.
flat (boolean): Flag to indicate if a dir is created. Default is false.
spec (boolean): Specifies if a spec file is generated. Default is true.
inlineStyle (boolean): Specifies if the style will be in the ts file. Default is false.
inlineTemplate (boolean): Specifies if the template will be in the ts file. Default is false.
viewEncapsulation (string): Specifies the view encapsulation strategy. Can be one of Emulated, Native or None.
changeDetection (string): Specifies the change detection strategy. Can be one of Default or OnPush.
directive: Options for generating a directive.
flat (boolean): Flag to indicate if a dir is created. Default is true.
spec (boolean): Specifies if a spec file is generated. Default is true.
guard: Options for generating a guard.
flat (boolean): Flag to indicate if a dir is created. Default is true.
spec (boolean): Specifies if a spec file is generated. Default is true.
interface: Options for generating a interface.
prefix (string): Prefix to apply to interface names. (i.e. I)
module: Options for generating a module.
flat (boolean): Flag to indicate if a dir is created. Default is false.
spec (boolean): Specifies if a spec file is generated. Default is false.
pipe: Options for generating a pipe.
flat (boolean): Flag to indicate if a dir is created. Default is true.
spec (boolean): Specifies if a spec file is generated. Default is true.
service: Options for generating a service.
flat (boolean): Flag to indicate if a dir is created. Default is true.
spec (boolean): Specifies if a spec file is generated. Default is true.
build: Properties to be passed to the build command.
sourcemaps (boolean): Output sourcemaps.
baseHref (string): Base url for the application being built.
progress (boolean): Log progress to the console while building. Default is true.
poll (number): Enable and define the file watching poll time period (milliseconds).
deleteOutputPath (boolean): Delete output path before build. Default is true.
preserveSymlinks (boolean): Do not use the real path when resolving modules. Default is false.
showCircularDependencies (boolean): Show circular dependency warnings on builds. Default is true.
namedChunks (boolean): Use file name for lazy loaded chunks.
serve: Properties to be passed to the serve command
port (number): The port the application will be served on. Default is 4200.
host (string): The host the application will be served on. Default is localhost.
ssl (boolean): Enables ssl for the application. Default is false.
sslKey (string): The ssl key used by the server. Default is ssl/server.key.
sslCert (string): The ssl certificate used by the server. Default is ssl/server.crt.
proxyConfig (string): Proxy configuration file.
packageManager (string): Specify which package manager tool to use. Options include npm, cnpm and yarn.
warnings: Allow people to disable console warnings.
nodeDeprecation (boolean): Show a warning when the node version is incompatible. Default is true.
packageDeprecation (boolean): Show a warning when the user installed angular-cli. Default is true.
versionMismatch (boolean): Show a warning when the global version is newer than the local one. Default is true.