WIXLIB

Angular CLICREATE TutorialsPoint/tslint.json (3125 bytes)CREATE TutorialsPoint/.editorconfig (274 bytes)CREATE TutorialsPoint/.gitignore (631 bytes)CREATE TutorialsPoint/browserslist (429 bytes)CREATE TutorialsPoint/karma.conf.js (1026 bytes)CREATE TutorialsPoint/tsconfig.app.json (210 bytes)CREATE TutorialsPoint/tsconfig.spec.json (270 bytes)CREATE TutorialsPoint/src/favicon.ico (948 bytes)CREATE TutorialsPoint/src/index.html (300 bytes)CREATE TutorialsPoint/src/main.ts (372 bytes)CREATE TutorialsPoint/src/polyfills.ts (2835 bytes)CREATE TutorialsPoint/src/styles.css (80 bytes)CREATE TutorialsPoint/src/test.ts (753 bytes)CREATE TutorialsPoint/src/assets/.gitkeep (0 bytes)CREATE s (51 bytes)CREATE TutorialsPoint/src/environments/environment.ts (662 bytes)CREATE TutorialsPoint/src/app/app-routing.module.ts (246 bytes)CREATE TutorialsPoint/src/app/app.module.ts (393 bytes)CREATE TutorialsPoint/src/app/app.component.html (25755 bytes)CREATE TutorialsPoint/src/app/app.component.spec.ts (1083 bytes)CREATE TutorialsPoint/src/app/app.component.ts (218 bytes)CREATE TutorialsPoint/src/app/app.component.css (0 bytes)CREATE TutorialsPoint/e2e/protractor.conf.js (808 bytes)CREATE TutorialsPoint/e2e/tsconfig.json (214 bytes)CREATE TutorialsPoint/e2e/src/app.e2e-spec.ts (647 bytes)CREATE TutorialsPoint/e2e/src/app.po.ts (301 bytes)Packages installed successfully.Here, ng new command has created an angular workspace and a project with nameTutorialsPoint in our Node directory.12

5. Angular CLI — ng help CommandAngular CLIThis chapter explains the syntax and options of ng help command along with an example.SyntaxAn example for ng help command is given below:ng help [options]ng help command lists the available commands with their short descriptions.OptionsOptions are optional parameters.Sr.No.1Option & SyntaxDescription--help Shows a help message for this command in the console.true false json JSONDefault: falseExample 1An example for ng help command is given below:\ Node ng helpAvailable Commands:add Adds support for an external library to your project.analytics Configures the gathering of Angular CLI usage metrics. ring.build (b) Compiles an Angular app into an output directory named dist/ at thegiven output path. Must be executed from within a workspace directory.deploy Invokes the deploy builder for a specified project or for the defaultproject in the workspace.config Retrieves or sets Angular configuration values in the angular.jsonfilefor the workspace.doc (d) Opens the official Angular documentation (angular.io) in a browser,an13

Angular CLId searches for a given keyword.e2e (e) Builds and serves an Angular app, then runs end-to-end tests usingProtractor.generate (g) Generates and/or modifies files based on a schematic.help Lists available commands and their short descriptions.lint (l) Runs linting tools on Angular app code in a given project folder.new (n) Creates a new workspace and an initial Angular app.run Runs an Architect target with an optional custom builder configurationdefined in your project.serve (s) Builds and serves your app, rebuilding on file changes.test (t) Runs unit tests in a project.update Updates your application and its dependencies. Seehttps://update.angular.io/version (v) Outputs Angular CLI version.xi18n (i18n-extract) Extracts i18n messages from source code.For more detailed help run "ng [command name] --help"In case of individual commands, use the --help or -h option with the command. First moveto an angular project created using ng new command and then run the command. thttps://www.tutorialspoint.com/angular cli/angular cli ng new.htm.Example 2An example is given below:\ Node\ TutorialsPoint ng serve --helpBuilds and serves your app, rebuilding on file changes.usage: ng serve project [options]arguments:projectThe name of the project to build. Can be an application or a library.options:--allowed-hosts14

Angular CLIWhitelist of hosts that are allowed to access the dev server.--aotBuild using Ahead of Time compilation.--base-hrefBase url for the application being built.--browser-targetTarget to serve.--build-event-log**EXPERIMENTAL** Output file path for Build Event Protocol events--common-chunkUse a separate bundle containing code used across multiple bundles.--configuration (-c)A named build target, as specified in the "configurations" section ofangular.json.Each named target is accompanied by a configuration of option defaults for that target.Setting this explicitly overrides the "--prod" flag--deploy-urlURL where files will be deployed.--disable-host-checkDon't verify connected clients are part of allowed hosts.--eval-source-mapOutput in-file eval sourcemaps.--helpShows a help message for this command in the console.--hmrEnable hot module replacement.--hmr-warningShow a warning when the --hmr option is enabled.--hostHost to listen on.--live-reloadWhether to reload the page on change, using live-reload.--open (-o)Opens the url in default browser.15

Angular CLI--optimizationEnables optimization of the build output.--pollEnable and define the file watching poll time period in milliseconds.--portPort to listen on.--prodShorthand for "--configuration production".When true, sets the build configuration to the production target.By default, the production target is set up in the workspaceconfiguration such that all builds make use of bundling, limited tree-shaking, and alsolimiteddead code elimination.--progressLog progress to the console while building.--proxy-configProxy configuration file.--public-hostThe URL that the browser client (or live-reload client, if enabled)should usee to connect to the development server. Use for a complex dev server setup,such as one with reverse proxies.--serve-pathThe pathname where the app will be served.--serve-path-default-warningShow a warning when deploy-url/base-href use unsupported serve pathvalues.--source-mapOutput sourcemaps.--sslServe using HTTPS.--ssl-certSSL certificate to use for serving HTTPS.--ssl-keySSL key to use for serving HTTPS.--vendor-chunk16

Angular CLIUse a separate bundle containing only vendor libraries.--vendor-source-mapResolve vendor packages sourcemaps.--verboseAdds more details to output logging.--watchRebuild on change.17

6. Angular CLI — ng generate CommandAngular CLIThis chapter explains the syntax, argument and options of ng generate command alongwith an example.SyntaxThe syntax for ng generate command is as follows:ng generate schematic [options]ng g schematic [options]ng generate command generates and/or modifies files based on a schematic.ArgumentThe argument for ng help command is as follows:Sr.No.1DescriptionArgument &Syntax schematic The schematic or collection:schematic to generate. This option cantake one of the following sub-commands: ceWorkerwebWorkerOptionsOptions are optional parameters.18

Angular CLISr.No.Option & SyntaxDescription1--defaults true falseWhen true, disables interactive input prompts for optionswith a default.2--dryRun true falseWhen true, runs through and reports activity withoutwriting out results.Default: false.Aliases: -d.3--force true falseWhen true, forces overwriting of existing files.Default: false.Aliases: -f.45-help true false json JSONShows a help message for this command in the console.--interactive true falseWhen false, disables interactive input prompts.Default: false.First move to an angular project created using ng new command and then run orialspoint.com/angular cli/angular cli ng new.htm.ExampleAn example for ng generate command is given below:\ Node\ TutorialsPoint ng generate component goalsCREATE src/app/goals/goals.component.html (20 bytes)CREATE src/app/goals/goals.component.spec.ts (621 bytes)CREATE src/app/goals/goals.component.ts (271 bytes)CREATE src/app/goals/goals.component.css (0 bytes)UPDATE src/app/app.module.ts (471 bytes)Here, ng generate command has created a new component in our project TutorialsPointand added this new component entry in app.module.ts.19

7. Angular CLI — ng build CommandAngular CLIThis chapter explains the syntax, argument and options of ng build command along withan example.SyntaxThe syntax for ng build command is as follows:ng build project [options]ng b project [options]ng build command compiles an angular application/library into an output directory nameddist at given path.ArgumentsThe argument for ng build command is as follows:Sr.No.1Argument & Syntax project DescriptionThe name of the application or library to be built.OptionsOptions are optional parameters.Sr.No.1Option & Syntax--aot true falseDescriptionBuild using Ahead of Time compilation.Default: false.2--baseHref baseHrefBase url for the application being built.3--buildEventLog buildEventLogEXPERIMENTAL Output file path forBuild Event Protocol events.4--buildOptimizer true falseEnables'@angular-devkit/buildoptimizer' optimizations when usingthe 'aot' option.Default: false.20

Angular CLI5--commonChunk true falseUse a separate bundle containing codeused across multiple bundles.Default: false.6--configuration configurationA named build target, as specified inthe"configurations"sectionofangular.json. Each named target isaccompanied by a configuration ofoption defaults for that target. Settingthis explicitly overrides the "--prod"flag.Aliases: -c.7--crossOrigin none anonymous usecredentialsDefine the crossorigin attribute settingof elements that provide CORS support.Default: none.8--deleteOutputPath true falseDelete the output path before building.Default: true.9--deployUrl deployUrlURL where files will be deployed.10--experimentalRollupPass true falseConcatenate modules with Rollupbefore bundling them with Webpack.Default: false.11--extractCss true falseExtract css from global styles into cssfiles instead of js ones.Default: false.12--extractLicenses true falseExtract all licenses in a separate file.Default: false.13--forkTypeChecker true falseRun the TypeScript type checker in aforked process.Default: true.14--help true false json JSONShows a help messagecommand in the console.forDefault: false.21this

Angular CLI15-i18nMissingTranslation warning error ignoreHow to handle missing translations fori18n.Default: warning.16--index index17--localize true false18--main mainThe full path for the main entry point tothe app, relative to the currentworkspace.19--namedChunks true falseUse file name for lazy loaded chunks.Configures the generationapplication's HTML index.oftheDefault: true.20--ngswConfigPath ngswConfigPathPath to ngsw-config.json.21--optimization true falseEnablesoutput.22--outputHashing none all media bundlesDefine the output filename cachebusting hashing mode.optimizationofthebuildDefault: none.23--outputPath outputPathThe full path for the new outputdirectory, relative to the currentworkspace. By default, writes output toa folder named dist/ in the currentproject.24--pollEnable and define the file watching polltime period in milliseconds.25--polyfills polyfillsThe full path for the polyfills file,relative to the current workspace.26--preserveSymlinks true falseDo not use the real path when resolvingmodules.Default: false.22

Angular CLI27--prod true falseShorthandfor"-configuration production". When true,sets the build configuration to theproduction target. By default, theproduction target is set up in theworkspace configuration such that allbuilds make use of bundling, limitedtree-shaking, and also limited deadcode elimination.28--progress true falseLog progress to the console whilebuilding.Default: true.27--resourcesOutputPath resourcesOutputPathThe path where style resources will beplaced, relative to outputPath.28--serviceWorker true falseGenerates a service worker config forproduction builds.Default: false.29--showCircularDependencies true falseShow circular dependency warnings onbuilds.Default: true.30--sourceMap true falseOutput sourcemaps.Default: true.31--statsJson true falseGenerates a 'stats.json' file which canbe analyzed using tools such as'webpack-bundle-analyzer'.Default: false.32--subresourceIntegrity true falseEnables the useintegrity validation.ofsubresourceDefault: false.33--tsConfig tsConfigThe full path for the TypeScriptconfiguration file, relative to thecurrent workspace.23

Angular CLI34--vendorChunk true falseUse a separate bundle containing onlyvendor libraries.Default: true.35--verbose true falseAdds more details to output logging.Default: true.36--watch true falseRun build when files change.Default: false.37--webWorkerTsConfig webWorkerTsConfigTypeScript configurationWorker modules.forFirst, move to an angular project updated using ng generate command. Replace contentof app.component.html with following contents and then, run the command. This chapteris available at https://www.tutorialspoint.com/angular cli/angular cli ng generate.htm. app-goals /app-goals router-outlet /router-outlet ExampleAn example for ng build command is given below:\ Node\ TutorialsPoint ng buildCompiling @angular/animations : es2015 as esm2015Compiling @angular/core : es2015 as esm2015Compiling @angular/compiler/testing : es2015 as esm2015Compiling @angular/animations/browser : es2015 as esm2015Compiling @angular/core/testing : es2015 as esm2015Compiling @angular/common : es2015 as esm2015Compiling @angular/platform-browser : es2015 as esm2015Compiling @angular/common/http : es2015 as esm2015Compiling @angular/common/testing : es2015 as esm2015Compiling @angular/platform-browser-dynamic : es2015 as esm2015Compiling @angular/platform-browser/testing : es2015 as esm2015Compiling @angular/router : es2015 as esm2015Compiling @angular/animations/browser/testing : es2015 as esm2015Compiling @angular/common/http/testing : es2015 as esm2015Compiling @angular/forms : es2015 as esm201524Web

Angular CLICompiling @angular/platform-browser/animations : es2015 as esm2015Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015Compiling @angular/router/testing : es2015 as esm2015Generating ES5 bundles for differential loading.ES5 bundle generation complete.chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141kB [initial] [rendered]chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB[entry] [rendered]chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry][rendered]chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 12.4 kB[initial] [rendered]chunk {styles} styles-es5.js, styles-es5.js.map (styles) 13.9 kB [initial][rendered]chunk {main} main-es2015.js, main-es2015.js.map (main) 61.4 kB [initial][rendered]chunk {main} main-es5.js, main-es5.js.map (main) 65 kB [initial] [rendered]chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5)656 kB [initial] [rendered]chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.67 MB[initial] [rendered]chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial][rendered]Date: 2020-06-04T01:31:35.612Z - Hash: d5fd9371cdc40ae353bc - Time: 210494msHere, ng build command has built our project

Angular command-line interface (CLI) makes it easy to start with any Angular project. It comes with commands that help us create and start on our project very fast. Let us now go through the commands available to create a project, a component and services, change the port, etc. To work with Angular CLI, we need to have it installed on our system.