ng new in Angular CLI

ng new is the Angular CLI command that creates a new workspace and initial application project. The new application will become the default application in that workspace.

ng new syntax

The syntax of ng new is as follows.

name: The name of the new workspace and initial project.

options: The options are optional parameters. The list of options is specified at the end of this article.

ng new examples

The following examples show how to use ng new in Angular.

Creating a new Angular application

To create a new workspace and new project, run the following command.

The above code will create a new folder HelloWorld in the current working folder. It will also create the hello-world application inside the src folder.

Note that Angular uses the dash-case (or kebab-case) for project names, file names, component selectors, etc. Hence HelloWorld will change to hello-world.

You can run the application using the command ng serve.

Angular ng new example

Creating only workspace

To create only a workspace without creating the angular application, use the --create-application=false option

The above command creates a folder WorkspaceOnly under the current folder. It will create the node_modules folder and installs all the dependencies. But it will not create any application or create a src folder.

Angular ng new workspace only

You can add the project later by using the command ng generate application

The above command creates a new application with the name hello-world inside the folder projects/hello-world. Since it is the first project, it will be marked as the default project. You can also create more than one project inside the same workspace, and all of them will share the same dependencies. Refer to the tutorial create Multiple Projects in a workspace for more information.

Custom workspace name

ng new uses the same name for the workspace folder and application name. We can use the projects option to choose a different folder name for the workspace.

The code below creates the folder angular-projects under the current directory and the application hello-world inside the src folder.

The code below creates the workspace angular-projects under the current folder. But it will not create any application. Note that if we do not specify the hello-world in the command, the command will ask for the name, but it will be ignored.

Inline template and styles

The ng new command generates the separate template (app.component.html) and CSS file (app.component.css). You can use the --inline-style=true --inline-template=true option to inline both template and style in the app.component.ts.

It will generate the following app.component.ts

ng new options

The list of all available options of ng new project

OptionsAliasDESCRIPTIONValue TypeDefault Value
--collection-cA collection of schematics to use in generating the initial application.String
--commitInitial git repository commit information.booleantrue
--create-applicationCreate a new initial application project in the 'src' folder of the new workspace. When false, creates an empty workspace with no initial application. You can then use the generate application command so that all applications are created in the projects folderbooleantrue
--defaultsDisable interactive input prompts for options with a default.booleanfalse
--directoryThe directory name to create the workspace instring
--dry-run-dRun through and reports activity without making any changes.booleanfalse
--force-fForces overwriting of any existing files in the project folderbooleanfalse
--helpShows a help message for this command in the consoleboolean
--inline-style-sUse inline style rather than the external StyleSheet file. does not create external Stylesheetsbooleanfalse
--inline-template-tDoes not create an external template file for the component. Specifies if the template will be in the ts file.booleanfalse
--interactiveEnable interactive input promptsbooleantrue
--minimalInstalls a minimal set of features. does not create test files.booleanfalse
--new-project-rootThe path where new projects will be created, relative to the new workspace root.stringprojects
--package-managerThe package manager used to install dependencies.npm | yarn | pnpm | cnpm
--prefix-pThe prefix to apply to generated selectors for the initial project.
--routingGenerates a routing module. If the option is not specified, it will ask for the confirmation
--skip-git-gDo not initialize a git repository.booleanfalse
--skip-installDo not install dependency packages.booleanfalse
--skip-tests-SDo not generate "spec.ts" test files for the new project.
--strictCreates a workspace with stricter type checking and stricter bundle budgets settings. This setting helps improve maintainability and catch bugs ahead of timebooleantrue
--styleThe file extension or preprocessor to use for style files.css | scss | sass | less
--view-encapsulationSpecifies the view encapsulation strategy.Emulated | None | ShadowDomEmulated

Summary

ng new is Angular CLI command

We use it to create a new Angular workspace along with an initial project.

You can use the option --create-application=false to create only the workspace without using the initial project.

Reference

Command Reference

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top