Установка Angular CLI

IgorKulishov commented 6 years ago

Создание Angular проекта

Данный урок полностью описывается во-втором видео уроке

1. Проверка версии node.js

Перед установкой Angular надо уточнить версии node.js и npm (node package manager) на твоем компьютере. В окне терминала набрать следующие команды: A.

node -v

B.

npm -v

2. Установка Angular CLI

Angular CLI - "command line interface" - "программа терминального интерфейса". Это означает, что Angular CLI работает в командой строке и предназначена для создания и управления проектами Angular локально.

Ссылки: А. описание на русском языке по установке Angular cli: https://webformyself.com/angular-2-cli/ Б. данный и последующие шаги описываются во-втором видео уроке.

Установим глобально программу Angular cli при помощи программы npm (node package manager) в командной строке:

npm install –g angular-cli

Флаг "-g" означает что мы устанавливаем программу глобально, т.е. в папку, которая будет доступна для данного пользователя с любых локальных проектов.

После установки:

Проверим что Angular CLI установился и наберем в командной строке ng -v

Что делает для нас Angular CLI (коротко):

помогает при помощи команд "ng new" генерировать / создавать локальный (в локальной папке) за минуты типовой базисный Angular проект и скачивает и устанавливает в той же локальной папке для нас начальный набор файлов, в том числе typescript (javascript), html, css/scss файлы и тесты (которые мы тоже будем проходить чуть позже);
установить в локальный проект все необходимые библиотеки необходимые для работы с проктами angular
Angular cli имеет набор терминальных ng команд, которые позволяют нам легко запускать наш проект на нашем компьютере локально (команда ng serve) и видеть его в браузере. Кроме того, если запустить проект локально и продолжать работать с файлами, то можно видеть что браузер перегружается каждый раз когда мы сохраняем изменения в файлах проекта (позволяет видеть изменения сразу в браузере).
запускать тесты (команда ng test)
3. Создание первого проекта Angular

Сгенерируем наш базисный проект Angular используя Angular CLI:
```
ng new Project_name
```
Где Project_name название нашего проекта. После установки мы увидем что Angular CLI устанавливает библиотеки необходимые для работы проекта.

4. Запуск установленного проекта Angular

Запустим наш типовой прокт через командную строку:

ng serve

После того как запуститься проект, перейдем в браузер и откроем http://localhost:4200

5. Остановка приложения Angular

Для того что бы остановить работу локального сервера надо перейти в окно терминала и нажать комбинацию клавиш: Ctrl + C.

g1er commented 6 years ago

У меня возникли проблемы при установке и настройке. После всех установок я создал проект, при этом он выдал мне пару предупредительных записей. Не знаю насколько они важны, вот их скрин:

angular_new_proj

Дальше, я открыл проект в VSC и через его консоль пытался запустить проект через ng start. Он мне выдал ошибку angular_start_issue

Попробовал через другую команду, вышло не лучше: angular_start_issue_2

Я вижу, что оне не может найти какой-то файл, но не могу понять какой. Я все делал, как в видео-курсе, шаг за шагом. но там все получилось, а у меня нет. В чем может быть проблема?

IgorKulishov commented 6 years ago

в первом случае npm пытается и не может найти файл package.json для того что бы выполнить команду npm start. Свойство команды start (описание что выполнять для команды npm start) находится внутри файла package.json внутри объекта scripts и соответствует значению строки свойства start:
```
"scripts": {
"ng": "./node_modules/@angular/cli/bin/ng",
"start-mock": "ng serve -H 0.0.0.0 --environment=mock",
"start": "ng serve -H 0.0.0.0",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json -d docs/",
"build--prod": "ng build --prod --no-sourcemap --stats-json && npm run sw",
"sw": "sw-precache --root=dist --config=sw-precache-config.js",
"static-serve": "cd dist && live-server --port=4200 --host=localhost --entry-file=/index.html"
}
```
Как ты видешь: 1) запускать команду надо из (корневой) папки проекта, в которой находится package.json файл 2) эта команда соответствует (аналогична) запуску команды: ng serve -H 0.0.0.0
во-втором случае так же не может найти конфигурационный файл .angular-cli.json, который так же находиться в корневой папке проекта.

Таким образом при запуске ты можешь воспользоваться любой из этих двух команд, поскольку они аналогичны, но запускать надо из места, в котором находятся оба файла package.json и .angular-cli.json. Вот тебе справка проект, которым ты так же будешь участвовать. В данном случае показана корневая папка, с которой надо запускать команды: https://gitlab.com/WebsitesDevs/ecommerce_ui/tree/master

g1er commented 6 years ago

Все, я разобрался. Спасибо. angular_run

Мне надо было в консоли перейти в папку, в которой содержался весь проект с файлами. А я находился в папке, в которой находилась папка с проектом. Поэтому он не видел нужные файлы

g1er / Andrew