Socket
Socket
Sign inDemoInstall

@angular/cli

Package Overview
Dependencies
19
Maintainers
3
Versions
807
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@angular/cli

CLI tool for Angular


Version published
Weekly downloads
3M
increased by4.61%
Maintainers
3
Install size
31.0 MB
Created
Weekly downloads
 

Package description

What is @angular/cli?

The @angular/cli package is a command-line interface tool that you can use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. It provides commands for creating new projects, generating application and library code, performing a variety of ongoing development tasks such as testing, bundling, and deployment.

What are @angular/cli's main functionalities?

Project Scaffolding

Creates a new Angular application with a default structure by running the 'ng new' command followed by the project name.

ng new my-angular-app

Generating Components, Services, and other features

Generates a new component and its associated files by using the 'ng generate' command followed by the feature type and name.

ng generate component my-component

Building and Serving the Application

Compiles the application and starts a web server, making the app accessible in a browser. The 'ng serve' command is used for this purpose.

ng serve

Running Unit Tests

Executes the unit tests defined in the application using the 'ng test' command.

ng test

Building for Production

Compiles the application for production deployment, optimizing the build for performance and size using the 'ng build' command with the '--prod' flag.

ng build --prod

Other packages similar to @angular/cli

Changelog

Source

13.1.0 (2021-12-09)

@angular/cli

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------ | | 56f802b7d | feat | ask to install angular-eslint when running ng lint in new projects | | ecd9fb5c7 | feat | provide more detailed error for not found builder | | 0b6071af3 | fix | ng doc does open browser on Windows |

@schematics/angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------- | | d5d9f042f | feat | add VS Code configurations when generating a new workspace | | f95cc8281 | feat | generate new projects using TypeScript 4.5 | | 21809e14c | feat | loosen project name validation |

@angular-devkit/schematics-cli

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------ | | 339bab06c | feat | generate new projects using TypeScript 4.5 |

@angular-devkit/build-angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------------- | | bc8563760 | feat | add estimated transfer size to build output report | | bc17cf0cd | feat | colorize file raw sizes based on failing budgets | | 3c681b68d | feat | set dir attribute when using localization | | 6d0f99a2d | feat | support JSON comments in dev-server proxy configuration file | | 9300545e6 | feat | watch i18n translation files with dev server | | 9bacba342 | fix | differentiate components and global styles using file query instead of filename | | 7408511da | fix | display cleaner errors | | d55fc62ef | fix | fallback to use language ID to set the dir attribute | | 4c288b8bd | fix | lazy modules bundle budgets | | 562dc6a89 | fix | prefer ES2015 entrypoints when application targets ES2019 or lower | | ac66e400c | fix | Sass compilation in StackBlitz webcontainers | | e1bac5bbb | fix | update Angular peer dependencies to v13.1 prerelease | | 789ddfaeb | perf | disable webpack backwards compatible APIs |

@ngtools/webpack

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------- | | 5402f99f8 | fix | add cjs and mjs to passthrough files | | 10d4ede2d | fix | handle promise rejection during Angular program analyzes |

Special Thanks

Alan Agius, Charles Lyding, Doug Parker, Ferdinand Malcher, Joey Perrott and Ruslan Lekhman

<!-- CHANGELOG SPLIT MARKER -->

<a name="12.2.14"></a>

Readme

Source

Angular CLI

Dependency Status devDependency Status

npm npm npm npm

Join the chat at https://gitter.im/angular/angular-cli

GitHub forks GitHub stars

Note

If you are updating from a beta or RC version, check out our 1.0 Update Guide.

If you wish to collaborate, check out our issue list.

Before submitting new issues, have a look at issues marked with the type: faq label.

Prerequisites

Both the CLI and generated project have dependencies that require Node 8.9 or higher, together with NPM 5.5.1 or higher.

Table of Contents

Installation

BEFORE YOU INSTALL: please read the prerequisites

Install Globally

npm install -g @angular/cli

Install Locally

npm install @angular/cli

To run a locally installed version of the angular-cli, you can call ng commands directly by adding the .bin folder within your local node_modules folder to your PATH. The node_modules and .bin folders are created in the directory where npm install @angular/cli was run upon completion of the install command.

Alternatively, you can install npx and run npx ng <command> within the local directory where npm install @angular/cli was run, which will use the locally installed angular-cli.

Install Specific Version (Example: 6.1.1)

npm install -g @angular/cli@6.1.1

Usage

ng help

Generating and serving an Angular project via a development server

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

You can configure the default HTTP host and port used by the development server with two command-line options :

ng serve --host 0.0.0.0 --port 4201

Generating Components, Directives, Pipes and Services

You can use the 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

You can find all possible blueprints in the table below:

ScaffoldUsage
Componentng g component my-new-component
Directiveng g directive my-new-directive
Pipeng g pipe my-new-pipe
Serviceng g service my-new-service
Classng g class my-new-class
Guardng g guard my-new-guard
Interfaceng g interface my-new-interface
Enumng g enum my-new-enum
Moduleng 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 these steps:

  1. ng g module new-module to create a new module
  2. 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

If you are updating to 1.0 from a beta or RC version, check out our 1.0 Update Guide.

You can find more details about changes between versions in the Releases tab on GitHub.

Development Hints for working on Angular CLI

Working with master

git clone https://github.com/angular/angular-cli.git
yarn
npm run build
cd dist/@angular/cli
npm link

npm link is very similar to npm install -g except that instead of downloading the package from the repo, the just built dist/@angular/cli/ folder becomes the global package. Additionally, this repository publishes several packages and we use special logic to load all of them on development setups.

Any changes to the files in the angular-cli/ folder will immediately affect the global @angular/cli package, meaning that, in order to quickly test any changes you make to the cli project, you should simply just run npm run build again.

Now you can use @angular/cli via the command line:

ng new foo
cd foo
npm link @angular/cli
ng serve

npm link @angular/cli is needed because by default the globally installed @angular/cli just loads the local @angular/cli from the project which was fetched remotely from npm. npm link @angular/cli symlinks the global @angular/cli package to the local @angular/cli package. Now the angular-cli you cloned before is in three places: The folder you cloned it into, npm's folder where it stores global packages and the Angular CLI project you just created.

You can also use ng new foo --link-cli to automatically link the @angular/cli package.

Please read the official npm-link documentation and the npm-link cheatsheet for more information.

To run the Angular CLI E2E test suite, use the node ./tests/legacy-cli/run_e2e command. It can also receive a filename to only run that test (e.g. node ./tests/legacy-cli/run_e2e tests/legacy-cli/e2e/tests/build/dev-build.ts).

As part of the test procedure, all packages will be built and linked. You will need to re-run npm link to re-link the development Angular CLI environment after tests finish.

Debugging with VS Code

In order to debug some Angular CLI behaviour using Visual Studio Code, you can run npm run build, and then use a launch configuration like the following:

{
    "type": "node",
    "request": "launch",
    "name": "ng serve",
    "cwd": "<path to an Angular project generated with Angular-CLI>",
    "program": "${workspaceFolder}/dist/@angular/cli/bin/ng",
    "args": [
        "<ng command>",
        ...other arguments
    ],
    "console": "integratedTerminal"
}

Then you can add breakpoints in dist/@angular files.

For more informations about Node.js debugging in VS Code, see the related VS Code Documentation.

CPU Profiling

In order to investigate performance issues, CPU profiling is often useful.

Creating a profile

Node.js 16+ users can use the Node.js command line argument --cpu-prof to create a CPU profile.

node --cpu-prof node_modules/.bin/ng build

In addition to this one, another, more elaborated way to capture a CPU profile using the Chrome Devtools is detailed in https://github.com/angular/angular-cli/issues/8259#issue-269908550.

Opening a profile

You can use the Chrome Devtools to process it. To do so:

  1. open chrome://inspect in Chrome
  2. click on "Open dedicated DevTools for Node"
  3. go to the "profiler" tab
  4. click on the "Load" button and select the generated .cpuprofile file
  5. on the left panel, select the associated file

Documentation

The documentation for the Angular CLI is located on our documentation website.

License

MIT

Keywords

FAQs

Last updated on 09 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc