В этом руководстве объясняется, как настроить среду для разработки Angular с помощью инструмента Angular CLI.

Angular CLI используется для создания проектов, генерации кода приложений и библиотеки, а также для выполнения множества текущих задач разработки, таких как тестирование, объединение и развертывание.

Чтобы установить Angular CLI, откройте окно терминала и выполните следующую команду:

npm install -g @angular/cli

или

npm install -g @angular/cli@latest

Флаг –g – установить глобально. @latest – установить последнюю версию. После установки запустите следующую команду для создания нового приложения.

Запустите команду CLI ng new и укажите имя my-app, как показано здесь.

ng new httptutorial

Будет загружен шаблон проекта, а также установятся все зависимости. Структура папок проекта:

// end-to-end-tests
|- e2e/
  |----- app.e2e-spec.ts
  |----- app.po.ts
  |----- tsconfig.e2e.json
 
// npm dependencies
|- node_modules/
 
// public facing app. built things go here. this wont show until we run a build
|- dist/
 
// where most of the work will be done
|- src/
  |----- app/
 |----- app.component.css|html|spec.ts|ts
 |----- app.module.ts
  |----- assets/
  |----- environments/
 |----- environment.prod.ts|ts
  |----- favicon.ico
  |----- index.html
  |----- main.ts
  |----- polyfills.ts
  |----- styles.css
  |----- test.ts
  |----- tsconfig.app.json
  |----- tsconfig.spec.json
  |----- typings.d.ts
 
// overall configuration
|- .angular-cli.json  // the main configuration file
|- .editorconfig // editorconfig which is used in some VS Code setups
|- .gitignore
|- karma.conf.js
|- package.json
|- protractor.conf.js
|- README.md
|- tsconfig.json
|- tslint.json

cd my-httptutorial
ng serve --open

Веб-сервер разработчика запустится на localhost:4200. Откройте этот адерс, перед вам будет следующая страница.