Using Angular CLI
IntelliJ IDEA provides integration with Angular CLI.
On this page:
- Before you start
- Installing Angular CLI in IntelliJ IDEA
- Generating an Angular CLI application stub
- Generating Angular2 structures
Before you start
Make sure the NodeJS and AngularJS plugins are installed and enabled. The plugins are not bundled with IntelliJ IDEA, but they can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins. Once enabled, the plugins are available at the IDE level, that is, you can use it in all your IntelliJ IDEA projects.
Installing Angular CLI in IntelliJ IDEA
Run the installation from the command line in the global mode:
- Launch the embedded Terminal by hovering your mouse pointer over in the lower left corner of IntelliJ IDEA and choosing Terminal from the menu (see Working with Embedded Local Terminal for details).
Switch to the directory where NPM is stored or define a
PATHvariable for it so it is available from any folder, see Installing NodeJs.
Type the following command at the command line prompt:
npm install -g angular-cli
-gkey makes the framework run in the global mode. Because the installation is performed through NPM, the Angular CLI framework is installed in the
npmfolder. Make sure this parent folder is added to the
PATHvariable. This enables you to launch the framework from any folder.
Run NPM from IntelliJ IDEA using the Node.js and NPM page of the Settings dialog box.
- Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing for Windows and Linux or for OS X, and click Node.js and NPM under Languages&Frameworks.
- On the Node.js and NPM page that opens, the Packages area shows all the Node.js-dependent packages that are currently installed on your computer, both at the global and at the project level. Click .
- In the Available Packages dialog box that opens, select the required package to install.
Select the Options check box and type
-gin the text box next to it.
- Optionally specify the product version and click Install Package to start installation.
Generating an Angular CLI application stub
- Choose on the main menu or click the New Project button on the Welcome screen.
- In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
- In the right-hand pane, choose AngularCLI and click Next.
On the second page of the wizard, specify the project name and the folder to create it in.
In the Node Interpreter field, specify the NodeJS interpreter to use. Choose a configured interpreter from the drop-down list or choose Add to configure a new one, see Configuring Node.js Interpreters
- When you click Finish , IntelliJ IDEA generates the Angular 2-specific project structure with all the required configuration files.
Generating Angular2 structures
- On the main menu, choose .
- In the pop-up list that opens, click the relevant type of structure.
In the dialog box that opens, specify the name of the structure to be generated and the path to it relative to the
src/appfolder of your project. If you want to generate a structure in a separate folder, create this folder first. This does not apply to components, which are by default generated in separate folders unless the
--flatoption is specified.
If necessary, specify additional options, for example,
--flatto have a new component generated directly in the specified location without creating a separate folder.