Angular Shortcuts and CLI Terminal Commands

Angular Shortcuts and Terminal Commands

Oct 23, 2024 - 06:43
Nov 1, 2024 - 17:09
 0  7
Angular Shortcuts and CLI Terminal Commands
Angular Shortcuts and Terminal CommandsProgramming, thetechfoyer,thetechfoyer.com

Manage Angular Environment

Create New Application
Create Application  ng new angularpractice --no-standalone
Update Material
Update Material latest version  npm update @angular/material @angular/cdk or ng update @angular/material
Update CLI to latest version 

One essential tool for managing your Angular applications is the Angular CLI (Command Line Interface).
Update the Angular CLI globally first:

  • Uninstall the current Angular CLI:
    • npm uninstall -g @angular/cli
  • Install the latest Angular CLI:
    • npm install -g @angular/cli@latest
  • Update the local Angular CLI in your project:
    • ng update @angular/cli @angular/core
    • in case of above error, run following command instead --allow-dirty flag to bypass the repo check
    • ng update @angular/cli @angular/core --allow-dirty


CLI Commands

Manage Angular Environment
Build and compile App

 ng build Command

  • Syntax
    ng build [options]  
    ng b [options]  
  • Parameter:
    : the name of the project to build. It can be an app or a library.
  • options
    • --aot=true|false: It builds using Ahead of Time compilation. Default: false
    • --baseHref=baseHref: It specifies the base url for the application being built.
    • --buildEventLog=buildEventLog: (experimental) Output file path for Build Event Protocol events.
    • --buildOptimizer=true|false: It enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option. Default: false
    • --commonChunk=true|false: It uses a separate bundle containing code used across multiple bundles. Default: true
    • --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.
    • --deleteOutputPath=true|false: It is used to delete the output path before building. Default: true
    • --deployUrl=deployUrl: URL where files will be deployed.
    • --es5BrowserSupport=true|false: Enables conditionally loaded ES2015 polyfills. Default: false
    • --extractCss=true|false: It is used to extract css from global styles into css files instead of js ones. Default: false
Generate and/or modify file

ng generate Command

  • Syntax
    ng generate [options]  
    ng g [options]  
  • Parameter:
    : specifies the schematic which you want to generate, by using one of the following sub-commands.
  • sub-commands
    • appShell
      • Generate an app shell for running a server-side version of an app
    • application
      • Create a new basic app definition in the "projects" subfolder of the workspace.
    • class
      •  Create a new generic class definition in the given or default project.
    • component
      • Create a new generic component definition in the given or default project.
    • directive
      • Create a new generic directive definition in the given or default project.
    • enum
      • Create a new, generic enum definition for the given or default project
    • guard
      • Generate a new, generic route guard definition in the given or default project.
    • interface
      • Create a new generic interface definition in the given or default project.
    • library
      • Create a new generic library project in the current workspace.
    • module
      • Create a new generic NgModule definition in the given or default project.
    • pipe
      • Create a new generic pipe definition in the given or default project.
    • service
      • Create a new, generic service definition in the given or default project.
    • serviceWorker
      • To pass this schematic to the "run" command to create a service worker.
    • universal
      • To pass this schematic to the "run" command to set up server-side rendering for an app.
  • Options
    • --defaults=true|false: When true, it disables interactive input prompts for options with a default.
    • --dryRun=true|false: When true, it runs through and reports activity without writing out results. Default: false
    • --force=true|false: When true, it forces overwriting of existing files. Default: false
    • --help=true|false|json|JSON: It is used to show a help message in the console. Default: false
    • --interactive=true|false: When false, it disables interactive input prompts.


...

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow

Deepak Talwar Technical Architect and Full Stack Developer with 18+ years of Professional Experience in Microsoft Technologies & PHP Platform. Hands on experience with C#, VB, ASP.NET, ASP.NET MVC, ASP.NET Core, ASP.NET Web API, Linq, ADO.NET, Entity Framework, Entity Framework Core, Sql Server, MYSQL, NoSql, Javascript, Angular, jQuery, AWS, Azure, React, Angular, Laravel, Codeingiter, Serenity, VBA, Cloud Computing, Microservices, Design Patterns, Software Architecture, Web Design and Development.