Category: angular Cli

Angular CLI – Useful Resources ”; Previous Next The following resources contain additional information on Angular CLI. Please use them to get more in-depth knowledge on this. Useful Video Courses Angular – The Complete Course 14 Lectures 48 mins Ganesh Kavhar More Detail Angular JS Full Stack: Create and Host Listing/Classified Site 59 Lectures 4 hours Jay R More Detail Full-Stack web app development with Angular 12, .NET Core Web API & Mongo DB Most Popular 20 Lectures 49 mins Vinay Kumar More Detail Angular 12, .NET Core Web API & Microsoft SQL Full Stack Web Development 21 Lectures 55 mins Vinay Kumar More Detail Angular 12, .NET Core Web API and MySQL Web Development 21 Lectures 51 mins Vinay Kumar More Detail Angular 12, .NET Core Web API & PostgreSQL Full Stack Web Development 5 Lectures 51 mins Vinay Kumar More Detail Print Page Previous Next Advertisements ”;

Angular CLI – ng version Command ”; Previous Next This chapter explains the syntax, options of ng version command along with an example. Syntax The syntax for ng version command is as follows − ng version [options] ng v [options] ng version command shows the Angular CLI version installed. Options Options are optional parameters. Sr.No. Option & Syntax Description 1 –help=true|false|json|JSON Shows a help message for this command in the console.Default: false Example An example for ng version command is given below − >Node ng version _ _ ____ _ ___ / _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / ? | ”_ / _` | | | | |/ _` | ”__| | | | | | | / ___ | | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___| |___/ Angular CLI: 9.1.0 Node: 12.16.1 OS: win32 x64 Angular: … Ivy Workspace: Package Version —————————————————— @angular-devkit/architect 0.901.0 @angular-devkit/core 9.1.0 @angular-devkit/schematics 9.1.0 @schematics/angular 9.1.0 @schematics/update 0.901.0 rxjs 6.5.4 Print Page Previous Next Advertisements ”;

Angular CLI – ng generate Command ”; Previous Next This chapter explains the syntax, argument and options of ng generate command along with an example. Syntax The 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. Argument The argument for ng help command is as follows − Sr.No. Argument & Syntax Description 1 <schematic> The schematicor collection:schematic to generate. This option can take one ofthe following sub-commands: appShell application class component directive enum guard interceptor interface library module pipe service serviceWorker webWorker Options Options are optional parameters. Sr.No. Option & Syntax Description 1 –defaults=true|false When true, disables interactive input prompts for options witha default. 2 –dryRun=true|false When true,runs through and reports activity without writing out results. Default:false. Aliases: -d. 3 –force=true|false When true,forces overwriting of existing files. Default:false. Aliases: -f. 4 –help=true|false|json|JSON Shows a helpmessage for this command in the console. Default: false. 5 –interactive=true|false When false, disables interactive input prompts. First move to an angular project created using ng new command and then run the command. This chapter is available athttps://www.tutorialspoint.com/angular_cli/angular_cli_ng_new.htm. Example An example for ng generate command is given below − >Node>TutorialsPoint> ng generate component goals CREATE 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 TutorialsPoint and added this new component entry in app.module.ts. Print Page Previous Next Advertisements ”;

Angular CLI – ng run Command ”; Previous Next This chapter explains the syntax, argument and options of ng run command along with an example. Syntax The syntax for ng run command is as follows − ng run project:target[:configuration] ng run command runs an Architect target with an optional custom builder configuration defined in angular.json in your project. Here project is the name of the application as defined in angular.json. Arguments The argument for ng run command is as follows − Sr.No. Argument & Syntax Description 1 <target> Architect target to run. Options Options are optional parameters. Sr.No. Option & Syntax Description 1 –configuration=configuration A named builder configuration, defined in the “configurations” section of angular.json. The builder uses the named configuration to run the given target. Aliases: -c. 2 –help=true|false|json|JSON Shows a help message for this command in the console. Default: false. First move to an angular project updated using ng generate command and then run the command.This chapter is available at https://www.tutorialspoint.com/angular_cli/angular_cli_ng_generate.htm. Example An example for ng run command is given below − >Node>TutorialsPoint> ng run TutorialsPoint:build Generating ES5 bundles for differential loading… ES5 bundle generation complete. chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered] chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered] chunk {main} main-es2015.js, main-es2015.js.map (main) 12.9 kB [initial] [rendered] chunk {main} main-es5.js, main-es5.js.map (main) 15.1 kB [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 {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.66 MB [initial] [rendered] chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial] [rendered] Date: 2020-06-04T02:31:28.919Z – Hash: dd73885c28e550d01341 – Time: 13742ms Here ng build command has built our project TutorialsPoint successfully. Print Page Previous Next Advertisements ”;

Angular CLI – ng doc Command ”; Previous Next This chapter explains the syntax, arguments and options of ng doc command along with an example. Syntax The syntax for ng doc command is as follows − ng doc <keyword> [options] ng d <keyword> [options] ng doc command opens the official Angular documentation in a browser, and searches for a given keyword. Options are optional parameters. Arguments The arguments for ng doc command is as follows − Sr.No. Argument & Syntax Description 1 <keyword> The keyword to search for, as provided in the search bar in angular.io. Options Options are optional parameters. Sr.No. Option & Syntax Description 1 –help=true|false|json|JSON Shows a help message for this command in the console. Default: false First move to an angular project updated using ng build command.This chapter is available at https://www.tutorialspoint.com/angular_cli/angular_cli_ng_build.htm. Now run the doc command. Example An example for ng doc command is given below − >Node>TutorialsPoint> ng doc build Now a browser window will open and search the relevant keyword. Print Page Previous Next Advertisements ”;

Angular CLI – ng config Command ”; Previous Next This chapter explains the syntax, arguments and options of ng config command along with an example. Syntax The syntax for ng config command is as follows − ng config <jsonPath> <value> [options] ng config command retrieves or sets angular configuration values in angular.json. Arguments The arguments for ng config command is as follows − Sr.No. Argument & Syntax Description 1 <jsonPath> The configuration key to set or query, in JSON path format. For example: “a[3].foo.bar[2]”. If no new value is provided, returns the current value of this key. 2 <value> If provided, a new value for the given configuration key. Options Options are optional parameters. Sr.No. Option & Syntax Description 1 –global=true|false When true, accesses the global configuration in the caller”s home directory. Default: false Aliases: -g 2 –help=true|false|json|JSON Shows a help message for this command in the console. Default: false First move to an angular project updated using ng build command.This chapter is available at https://www.tutorialspoint.com/angular_cli/angular_cli_ng_build.htm. Now run the config command. Example An example for ng config command is given below − >Node>TutorialsPoint> ng config projects.TutorialsPoint.projectType application Print Page Previous Next Advertisements ”;

Angular CLI – Code Coverage ”; Previous Next This chapter explains the syntax of code coverage command along with an example. Syntax The syntax for code coverage command is as follows − ng test <project> –codeCoverage=true ng test command allows to check code coverage using the test cases written. See the example below. Move to an angular project updated using ng xi18n command. This chapter is available at https://www.tutorialspoint.com/angular_cli/angular_cli_ng_xi18n.htm. Now, run the test with codeCoverage command. Example An example for ng code coverage command is given below − >Node>TutorialsPoint> ng test –codeCoverage=true 10% building 2/2 modules 0 active07 06 2020 15:21:46.292:WARN [karma]: No captur ed browser, open http://localhost:9876/ 07 06 2020 15:21:46.299:INFO [karma-server]: Karma v4.4.1 server started at http ://0.0.0.0:9876/ 07 06 2020 15:21:46.300:INFO [launcher]: Launching browsers Chrome with concurre ncy unlimited 07 06 2020 15:21:46.312:INFO [launcher]: Starting browser Chrome 07 06 2020 15:21:55.456:WARN [karma]: No captured browser, open http://localhost :9876/ 07 06 2020 15:21:55.533:INFO [Chrome 83.0.4103 (Windows 7.0.0)]: Connected on so cket gJgRaX_rXI6ZqoAiAAAA with id 261512 … Chrome 83.0.4103 (Windows 7.0.0): Executed 1 of 2 SUCCESS (0 secs / 0.053 secs) … Chrome 83.0.4103 (Windows 7.0.0): Executed 2 of 2 SUCCESS (0.107 secs / 0.082 se cs) TOTAL: 2 SUCCESS =============================== Coverage summary =============================== Statements : 100% ( 8/8 ) Branches : 100% ( 0/0 ) Functions : 100% ( 3/3 ) Lines : 100% ( 6/6 ) ================================================================================ Now ng test command has created a coverage folder within the TutorialsPoint, the project folder and has prepared the coverage report in html format available as >Node>TutorialsPoint>coverage>TutorialsPoint>index.html. Print Page Previous Next Advertisements ”;

Discuss Angular CLI ”; Previous Next Angular CLI makes it easy to start with any Angular project. Angular CLI comes with commands that help us create and start on our project very fast. It has commands to create a project, a component and services, change the port, etc. Print Page Previous Next Advertisements ”;

Angular CLI – ng update Command ”; Previous Next This chapter explains the syntax, argument and options of ng update command along with an example. Syntax The syntax for ng update command is as follows − ng update [options] ng update command updates the application and its dependencies. Arguments The argument for ng update command is as follows − Sr.No. Argument & Syntax Description 1 <keyword> The keyword to search for, as provided in the search bar in angular.io. Options Options are optional parameters. Sr.No. Option & Syntax Description 1 –all=true|false Whether to update all packages in package.json. Default: false 2 –allowDirty=true|false Whether to allow updating when the repository contains modified or untracked files. 3 –createCommits=true|false Create source control commits for updates and migrations. Default: false Aliases: -C 4 –force=true|false If false, will error out if installed packages are incompatible with the update. Default: false 5 –from=from Version from which to migrate from. Only available with a single package being updated, and only on migration only. 6 –help=true|false|json|JSON Shows a help message for this command in the console. Default: false 7 –migrateOnly=true|false Only perform a migration, does not update the installed version. 8 –next=true|false Use the largest version, including beta and RCs. Default: false 9 –packages The names of package(s) to update. 10 –to=to Version up to which to apply migrations. Only available with a single package being updated, and only on migrations only. Requires from to be specified. Default to the installed version detected. 11 –verbose=true|false Display additional details about internal operations during execution. Default: false First move to an angular project updated using ng build command.The chapter is available at https://www.tutorialspoint.com/angular_cli/angular_cli_ng_build.htm. Now run the update command. Now ng will update dependencies using npm. Example An example for ng update command is given below − >Node>TutorialsPoint> ng update Using package manager: ”npm” Collecting installed dependencies… Found 31 dependencies. We analyzed your package.json and everything seems to be in order. Good work! Print Page Previous Next Advertisements ”;

Angular CLI – ng xi18n Command ”; Previous Next This chapter explains the syntax, arguments and options of ng xi18n command along with an example. Syntax The syntax for ng xi18n command is as follows − ng xi18n <project> [options] ng i18n-extract <project> [options] ng xi18n command extracts i18n messages from source code. Arguments The argument for ng xi18n command is as follows − Sr.No. Argument & Syntax Description 1 <project> The name of the project. It can be an application or library. Options Options are optional parameters. Sr.No. Option & Syntax Description 1 –browserTarget=browserTarget Target to extract from. 2 –configuration=configuration A named build target, as specified in the “configurations” section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the “–prod” flag. Aliases: -c 3 –createCommits=true|false Create source control commits for updates and migrations. Default: false Aliases: -C 4 –format=xmb|xlf|xlif|xliff|xlf2|xliff2 Output format for the generated file. Default: xlf 5 –help=true|false|json|JSON Shows a help message for this command in the console. Default: false 6 –outFile=outFile Name of the file to output. 7 –outputPath=outputPath Path where output will be placed. 8 –prod=true|false Shorthand for “–configuration=production”. When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination. 9 –progress=true|false Log progress to the console. Default: true First move to an angular project updated using ng build command. The chapter is available at https://www.tutorialspoint.com/angular_cli/angular_cli_ng_build.htm. Update the app.component.html as follows − app.component.spec.ts <div class=”content” role=”main”> <span i18n>app is running!</span> </div> <app-goals></app-goals> <router-outlet></router-outlet> Now run the xi18n command. Example An example for ng xi18n command is given below − >Node>TutorialsPoint> ng xi18n Add localization support. >Node>TutorialsPoint> ng add @angular/localize Installing packages for tooling via npm. Installed packages for tooling via npm. UPDATE src/polyfills.ts (3064 bytes) Now ng will create a messages.xlf file in root folder which is a industry standard translation file. messages.xlf <?xml version=”1.0″ encoding=”UTF-8″ ?> <xliff version=”1.2″ xmlns=”urn:oasis:names:tc:xliff:document:1.2″> <file source-language=”en-US” datatype=”plaintext” original=”ng2.template”> <body> <trans-unit id=”6226cbeebaffaec0342459915ef7d9b0e9e92977″ datatype=”html”> <source>app is running!</source> <context-group purpose=”location”> <context context-type=”sourcefile”>src/app/app.component.html</context> <context context-type=”linenumber”>2</context> </context-group> </trans-unit> </body> </file> </xliff> Print Page Previous Next Advertisements ”;