Angular CLI установка приложения, создание и запуск проекта


Содержание материала:

Ваше первое Angular2 приложение с помощью CLI

Что вы сделаете?

Простейшее приложнеие с помощью Angular CLI.

Что вам понадобится?

  • Около 15-50 минут
  • Ваш любимый текстовый редактор
  • NodeJS
  • NPM(Node Package Manager)

Как пользоваться этой статьей

  • Внимательно прочитайте статью
  • Выполните все инструкции
  • Проверьте что приложение работает
  • Попробуйте создать отдельное приложение сами без инструкций
  • Если что то осталось неясно, смело задавайте вопросы мне или google

Установите Node Package Manager

Он нам понадобиться, чтобы установить Angular CLI. Это добавления в интерфейс командной строки или попросту консоль которые позволят вам быстро создать рабочую заготовку для вашего нового Angular2 проекта тем самым экономя ваше время.

Перейдите на сайт nodejs.org и скачайте последнюю версию NodeJS. Установив NodeJS вы также получите и NPM(NodePackageManger). Это именно то, что нам нужно для установки Angular CLI.

Установите Angular CLI

  • Выполните следующую команду:

npm install -g angular-cli@latest

Пользователям Windows рекомендуется запускать консоль из под администратора!

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

  • Выполните следующий набор команд:

ng new first-app ng serve

  • ng new — создаст заготовку вашего приложения, причем вполне рабочую и готовую к запуску
  • ng serve — запустит локальный web-сервер

Вам осталось лишь открыть браузер и ввести следующую строку http://localhost:4200/

Давайте попробуем поменять сообщение

Зайдите в каталог first-app/src/app/app.components.ts и поменяйте значение переменной title

ng serve автоматически “увидит” изменения в файле и пересоберет проект. Посмотрите изменения в браузере:

Структура проекта

Давайте кратко опишем ключевые файлы в нашем созданном проекте, чтобы вы имели общее представление:

Развертывание Angular-приложения на Netlify

На сегодняшний день Netlify является одной их лучших платформ для развертывания приложений и сайтов. Но сервис также можно использовать для размещения обычных JavaScript-приложений, созданных на основе Angular, React и Vue.

Как развернуть Angular-приложение на Netlify?

  • Создайте проект помощью Angular CLI.
  • Создайте репозиторий на GitHub.
  • Опубликуйте проект на GitHub.
  • Настройте Netlify, чтобы он ссылался на репозиторий GitHub.
  • Настройте Netlify для сборки и развертывания.

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

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

Перейдите в новый каталог:

Теперь у нас есть новый Angular- проект. Замените HTML-код в файле

В результате этих операция мы получили страницу с меню навигации и ссылкой на раздел About и главную страницу.

Теперь создадим компоненты Home и About. Выполните следующую команду, чтобы добавить компонент Home:

Запустите следующую команду, чтобы создать компонент About:

В файл about.component.html добавьте следующий HTML-код:

Затем зарегистрируем маршруты в файле

Теперь у нас есть Angular-приложение, и его можно опубликовать на GitHub.

Создание репозитория GitHub

Перейдем на GitHub и создадим новый репозиторий.

Далее выполним в терминале следующие команды. Они импортируют наш Angular-проект в репозиторий GitHub:

Не забудьте изменить git@github.com : pjlamb12 / my-ng-netlify-project.git на URL-адрес, предоставленный GitHub

Настройка Netlify для сборки и развертывания приложения

Сначала подключим новый репозиторий GitHub к Netlify и установим параметры сборки. После этого Netlify создаст и развернет наше приложение. Давайте перейдем на app.netlify.com .

Если вы еще не зарегистрировались в Netlify, сделайте это. Это можно сделать с помощью учетной записи GitHub.

Создание нового сайта на Netlify

После входа в систему нажмите на кнопку «Новый сайт из Git». Затем вы увидите следующую панель:

Выберите GitHub, а затем выполните поиск репозитория, созданного для Angular-приложения.

Выбор ветки GitHub для команд развертывания и сборки

Для развертывания в Netlify нужно указать следующие параметры:

  • Ветка в GitHub для использования на сайте.
  • Команды для запуска сборки приложения.

Выберите проект my-ng-netlify-project, и вы увидите следующее:

Netlify позволяет выбрать, какую ветвь следует использовать для сборок. Затем можно ввести команду сборки (в данном случае

После того, как вы заполнили форму и нажали кнопку « Развернуть сайт» , перейдете на страницу с описанием проекта. В верхней части этой страницы вы увидите блок заголовка:

«Angry-stonebraker-390db1» — это автоматически сгенерированный идентификатор сайта. Но его можно изменить.

Когда сборка будет завершена, сайт станет доступен по адресу angry-stonebraker-390db1.netlify.com .


Маршрутизация Catchall

Перейдите на страницу About и обновите страницу браузера. После этого вы увидите следующее:

Нам нужен механизм перенаправления Netlify на файл

Добавьте в проект Angular новый файл в каталог

Также нужно отредактировать

После внесения изменений можно отправить подготовленные файлы в репозиторий. Когда мы это сделаем, Netlify автоматически обновит сайт.

Angular Universal

Приложение, которое мы создали и развернули на Netlify, не является JAMStack-сайтом, полностью сгенерированным на сервера. В Angular есть опция рендеринга на стороне сервера. Она называется Angular Universal.

Заключение

Netlify — отличная платформа, которая позволяет легко запускать сайты и веб-приложения. Поэтому в следующий раз, когда у вас появится идея для создания Angular- приложения разверните на Netlify.

Данная публикация представляет собой перевод статьи « Deploying an Angular App to Netlify » , подготовленной дружной командой проекта Интернет-технологии.ру

Угловой CLI | Угловая настройка проекта

Angular — это интерфейсная среда, которая используется для создания веб-приложений. Он использует машинопись по умолчанию для создания логики и методов для класса, но браузер не знает машинописи. Здесь представлен веб-пакет, веб-пакет используется для компиляции этих машинописных файлов в javascript. Кроме того, существует так много конфигурационных файлов, которые вам понадобятся для запуска углового проекта на вашем компьютере.
Angular CLI — это инструмент, который делает все это за вас с помощью простых команд. Angular CLI использует webpack сзади для выполнения всего этого процесса.

Примечание. Убедитесь, что в вашей системе установлен узел и npm. Вы можете проверить версию своего узла и версию npm, используя следующую команду:

Шаги, чтобы создать ваше первое приложение, используя угловой CLI:

    Шаг 1: Установите угловой

Шаг 2: Создайте новый проект с помощью этой команды
Выберите да для варианта маршрутизации и CSS или SCSS.

Шаг 3: Перейдите в каталог вашего проекта

Шаг 4: Запустите сервер и посмотрите ваше приложение в действии

Введение в структуру каталогов:

  • e2e Содержит код, связанный с целью автоматического тестирования. Например, если на определенной странице вы вызываете REST API, то каким должен быть код возврата, приемлемый он или нет и т. Д.
  • node_modules Сохраняет все зависимости dev (используемые только во время разработки) и зависимости (используемые для разработки, а также необходимые во время разработки), любая новая зависимость при добавлении в проект автоматически сохраняется в эту папку.
  • src Этот каталог содержит всю нашу работу, связанную с проектом, т.е. создание компонентов, создание сервисов, добавление CSS на соответствующую страницу и т. д.
  • package.json В этом файле хранится информация о библиотеках, добавленных и используемых в проекте с установленной версией. Всякий раз, когда новая библиотека добавляется в проект, ее имя и версия добавляются в зависимости в package.json.
Топ-пост этого месяца:  Повышение производительности приложения, воспринимаемой пользователем основные методы

Другие файлы: как начинающий, вам не нужны эти файлы, не беспокойтесь об этом. Все они используются для конфигурации редактора и информации, необходимой во время компиляции. Встроенный веб-пакет в угловом CLI управляет всем за вас.

Внутри папки src:

  • index.html Это точка входа для приложения, тег app-root является точкой входа приложения в этом одностраничном приложении, на этой странице под углом будет добавлено или удалено содержимое из DOM или добавлено новое содержимое в DOM. , Base href = ”/” важен для целей маршрутизации.
  • style.scss Этот файл является глобальной таблицей стилей, в которую можно добавить классы CSS или селекторы, которые являются общими для многих компонентов, например, вы можете импортировать пользовательские шрифты, импортировать bootstrap.css и т. д.
  • активы Он содержит Js изображение, шрифты, иконку и многие другие файлы для вашего проекта.

Внутри папки приложения:

  • app.module.ts Угловой проект состоит из множества других модулей. Чтобы создать приложение, вам нужно создать корневой модуль для вашего приложения в иерархии. Этот файл app.module.ts таков. Если вы хотите добавить больше модулей на корневом уровне, вы можете добавить.
    • декларации Это ссылка на массив для хранения его компонентов. Компонент приложения — это компонент по умолчанию, который создается при создании проекта. Вы должны добавить все ссылки на ваш компонент в этот массив, чтобы сделать их доступными в проекте.
    • import Если вы хотите добавить любой модуль, будь то угловой или вы должны добавить его в массив import, чтобы сделать его доступным во всем проекте.
    • провайдеры Если вы создадите какой-либо сервис для своего приложения, вы добавите его в свой проект через этот массив провайдеров. Сервис, внедренный в модуль, доступен ему и его дочернему модулю в иерархии проекта.
    • bootstrap Это ссылка на созданный компонент по умолчанию, т.е. AppComponent.
  • app.component.html Отредактируйте этот файл, чтобы внести изменения в страницу. Вы можете редактировать этот файл как файл HTML. Работайте напрямую с div или любым другим тегом, используемым внутри тегов body, это компоненты и не добавляйте теги html head body .
  • app.component.spec.ts Это автоматически генерируемые файлы, которые содержат модульные тесты для исходного компонента.
  • app.component.ts Вы можете выполнить обработку структуры HTML в файле .ts. Обработка будет включать такие действия, как подключение к базе данных, взаимодействие с другими компонентами, маршрутизация, службы и т. Д.
  • app.component.scss Здесь вы можете добавить CSS для вашего компонента. Вы можете написать scss, который затем компилируется в CSS с помощью транспилятора.

Дополнительные команды, которые вам понадобятся при работе над проектом:

Вопрос по angular-cli, angular &#8211 как развернуть приложение angular2, созданное с использованием angular-cli

Я создал новое угловое приложение, используя angular-cli.

Я заполнил приложение и просмотрел его с помощью ng-serve, оно отлично работает.

После этого я использовалng build —prod, который генерирует папку ‘dist’. Когда я помещаю эту папку в xampp для запуска, она не работает. Я обнаружил, что нет файлов * .js, которые должны быть там после преобразования * .ts -> * .js (я полагаю).

Я приложил снимок экрана, на котором с левой стороны показана папка src, содержащая все файлы .ts, а посередине — папка dist и снимок экрана браузера.

Пожалуйста, подскажите, как мне создать полностью работающее приложение из angular-cli, которое я могу запустить на своем сервере xampp.

Какая версия angular-cli? Вы используете —mobile и angular-universal?

Проверьте файл index.html и отредактируйте эту строку

Ваш контент должен загружаться правильно. Затем вы можете загружать стили по всему миру

Вы должны установить базовый href в соответствии с рекомендациями Йохана

в корневой директории вашего проекта запуститеnpm установить http-сервер -g

после успешной установки запуститеng build —prod

после успешного запуска сборкиhttp-сервер ./dist

Метод 1 (популярный): Если вы используете angular-cli, то

сделает свое дело. Тогда вы можете скопировать все из .dist папка в папку на вашем сервере

способ 2:

Вы можете использовать http-сервер для обслуживания вашего приложения. Установить http-сервер

и после перехода в папку вашего проекта

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

Надеюсь, это поможет вам 🙂

Создай свой проект

Скопируйте все содержимое папки ./dist в корневую папку вашего сайта, сохраняя структуру папок внутри ./dist (то есть — ничего не перемещайте). Используя версию angular-cli в бета-18, все ресурсы (в моем случае изображения) были скопированы в ./dist/assets во время сборки и были правильно указаны в их компонентах.

Предположим, вы хотите развернуть свое угловое приложение на HOST: http://example.com и ПОРТ: 8080 Примечание. В вашем случае HOST и PORT могут отличаться.

Убедитесь, что у вас есть у вас index.html заголовок тега.

Во-первых, перейдите к своему угловому репо (то есть / home / user / helloWorld) на вашем компьютере.

Затем соберите / dist для вашего производственного сервера, используя следующую команду:

ng build —prod —base-href http://example.com:8080

Теперь скопируйте папку / dist (т.е. / home / user / helloWorld / dist) из углового хранилища вашей машины на удаленную машину, где вы хотите разместить свой производственный сервер.

Теперь войдите на свой удаленный сервер и добавьте следующую конфигурацию сервера nginx.

Настроить загрузку проекта по собственному url в angular-cli

Есть проект на Angular 7.2.7 , при запуске ng serve он открывается по адресу localhost:4200/some/path . Однако возникла необходимость, чтобы проект открывался по адресу my.favorite.url/some/path , как этого добиться?

Текущая настройка в части serve :

UPD: у меня MacOs и правка etc/host не выход, так как в проекте трудится 30 человек, нужно сделать как-то так, чтобы у остальных просто подтянулись изменения из master .

1 ответ 1

Так, что бы после коммита в мастер у всех все сразу обновилось: и гит спулился, и страница перезагрузилась, и конфликты автоматом разрулились, и фича сама имплементировалась. так не получится.

Есть варианты которми можно попробовать решить некоторые задачи, например

вместо my.favorite.url ставьте Ваш IP если ng serve —host IP:8080

таким образом, по идее, по Вашему ip в текущей сети можно заходить на Ваше приложение, которое запущено.

Билдить приложение и использовать http-server


Этот вариант подходит если нужно показать изменения после некоторой итерации. Например можно создать команду в package.json , которая будет стартовать сервер

Естественно изменения в гите не подтянутся.

Internal Server Error

Error 500

This could be due to one of the following reasons:

.htaccess file was misconfigured

Permissions for the file requested on site were misconfigured

PHP or CGI code was misconfigured in the file that is requested on site

Топ-пост этого месяца:  Создание анимированных SVG-баннеров

Site resources are approaching their maximum limits

Please contact the server administrator webmaster@coderlessons.com and provide the following information:

The time the error occurred

The actions you took prior to and immediately following the error. This will help the administrator better understand what may have caused the error. Please refer to the server error log for more information.

Создание первого Angular приложения: основы

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

За последние пару лет Angular стал очень популярным. Вы можете использовать эту платформу JavaScript с открытым исходным кодом для создания веб и мобильных приложений. Если вы подумывали об изучении Angular, но не знаете, с чего начать, то эта серия статей специально для вас.

Цель этой серии — осветить основы Angular при создании очень простого приложения, которое отображает информацию о разных странах. Angular написан на TypeScript, поэтому имеет смысл писать собственный код тоже на TypeScript.

Не нужно беспокоиться, если вы никогда не использовали TypeScript раньше. Проще говоря, TypeScript — это просто JavaScript с дополнительными функциями. Я также написал серию под названием TypeScript для начинающих на Envato Tuts +, где вы можете сначала изучить основы TypeScript.

Начинаем

Если вы уже знакомы с TypeScript, вы можете просто начать свое первое приложение на Angular.

Первым шагом будет установка Node.js. Вы можете отправиться на официальный сайт и загрузить соответствующую версию. Менеджер пакетов узлов будет установлен как часть Node.js.

Следующий шаг — установить TypeScript, выполнив следующую команду. Я рекомендую вам установить версию TypeScript 2.1.

Наконец, вы должны установить Angular CLI, выполнив следующую команду. Установка Angular CLI упростит процесс создания вашего Angular приложения.

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

Установка всех зависимостей для проекта занимает некоторое время, поэтому, пожалуйста, будьте терпеливы, в то время как Angular CLI настроит ваше приложение. По завершении установки вы увидите папку с именем country-app в текущем каталоге. Вы можете запустить приложение прямо сейчас, перейдя в каталог country-app , а затем запустив ng serve в консоли.

Добавление —open автоматически откроет ваше приложение в браузере по адресу http://localhost:4200/.

Обзор информации о стране

Приложение для информации о стране, которое мы создаем, будет иметь три компонента. HomeComponent покажет топ три страны в разных категориях, таких как население, ВВП и область. Вы сможете щелкнуть название каждой страны, чтобы узнать больше о ней. Дополнительная информация о стране указана с использованием другого компонента, который мы назовем CountryDetailComponent . В нашем приложении будет еще один компонент, который будет использоваться для отображения списка всех стран, которые мы сохранили в нашем приложении.

Поскольку это ваше первое приложение с угловыми углами, наша главная цель — сохранить все просто, не добавляя никаких сложных функций. Когда вы хорошо разбираетесь в основах, создание более сложных приложений не будет представлять собой сложную задачу.

Ниже приведено изображение домашней страницы или HomeComponent в нашем информационном приложении для нашей страны. Как вы можете видеть, в каждой категории есть три страны, и они были помещены в порядке убывания. При создании HomeComponent вы узнаете, как сортировать разные страны, прежде чем отображать их внутри шаблона.

На следующем рисунке показана страница «Все страны» или AllCountriesComponent нашего приложения. Макет этого компонента очень похож на HomeComponent . Единственное различие заключается в том, что на этот раз мы перечисляем все страны вместе со своими столицами.

Если вы нажмете на поле какой-либо страны, отображенной внутри HomeComponent или AllCountriesComponent , вы попадете на страницу подробной информации или CountryDetailComponent . Информация, представленная о стране, не редактируется.

После подробных деталях каждой страны появляется кнопка вернуться назад. Эта кнопка возврата возвращает вас к предыдущему компоненту или странице. Если вы пришли в CountryDetailComponent из HomeComponent , вы вернетесь к HomeComponent . Если вы пришли в CountryDetailComponent из AllCountriesComponent , вы вернетесь к компоненту AllCountriesComponent .

Обращение к различным компонентам, которые мы создаем как страницы, не является технически корректным. Тем не менее, я использую термины, такие как домашняя страница или HomeComponent , взаимозаменяемо, потому что просмотр многих незнакомых терминов, таких как маршрутизация, компоненты и декораторы, может напугать читателей, которые раньше никогда не создавали приложение Angular. Использование этих терминов в этой серии поможет вам быстро научиться Angular, а не запутает вас с жаргоном.

Основы Angular

Прежде чем мы начнем создавать наше приложение, вам нужно быть в курсе основных концепций Angular. В этом разделе очень кратко рассматриваются важные темы, такие как компоненты и шаблоны.

Компоненты являются строительными блоками приложения Angular. Они позволяют вам управлять пользовательским интерфейсом вашего приложения. Основной компонент состоит из двух частей: декоратора и определения класса. Вы можете указать логику приложения для компонента внутри класса.

Декоратор компонента используется для указания информации, например пользовательского селектора, для идентификации компонента, пути к шаблону HTML и правил стиля, применяемых к компоненту.

Вот декоратор базового компонента, который устанавливает все три значения для CountryDetailComponent :

Все компоненты, которые мы создаем, будут иметь настраиваемый селектор, который указывает тег, который отображает компонент внутри браузера. Эти пользовательские теги могут иметь любое имя, которое вы захотите. Например, мы создадим countryDetailComponent в третьем учебнике серии, и мы будем использовать наш собственный тег, называемый app-country-detail , для рендеринга этого компонента в браузере.

Любой компонент, который вы создадите, будет состоять из шаблона, который будет управлять тем, что отображается на странице приложения. Например, countryDetailComponent имеет два тега div , которые действуют как обертка вокруг основного содержимого компонента. Каждая часть информации о стране помещается внутри ее собственного тега p , а название страны помещается внутри тега h2 . Все эти теги могут храниться вместе в качестве шаблона для countryDetailComponent и затем отображаться как единое целое. Этот шаблон компонента можно сохранить как файл HTML или указать непосредственно внутри декоратора, используя атрибут template .

Различные компоненты нашего приложения должны будут извлекать данные для отображения на экране. Мы будем создавать класс сервиса, содержащий функции, которые помогут нам получить эти данные и отсортировать или изменить их так или иначе. Затем мы будем использовать функциональность различных классов компонентов для отображения этих данных пользователю.

Вы можете рассматривать Service как просто любое значение, функцию или возможность, которые необходимы вашему приложению. Получение всех стран, хранящихся внутри нашего приложения, является сервисом, а так же сортировка и отображение их. Все три компонента нашего класса будут использовать функции нашего сервиса для извлечения данных.

При создании компонентов для вашего приложения вам придется импортировать зависимости из разных модулей. Например, мы будем импортировать Component из @angular/core всякий раз, когда мы создаем свой собственный компонент. Вы также можете использовать тот же синтаксис для импорта зависимостей, которые были созданы вами. Часть внутри фигурных скобок используется для указания зависимостей, которые вы хотите импортировать, а часть после from используется для указания того, где Angular может найти зависимость.

Топ-пост этого месяца:  Ajax запрос в jQuery. Часть 3. Метод load

Вот фрагмент кода из проложения country-app , которое мы будем создавать. Как вы можете видеть, мы импортируем Component и OnInit из @angular/core . Аналогично, мы импортируем Country и CountryService из файлов, которые мы создали сами.

Оболочка приложения

После того как вы запустили команду ng new country-app , Angular CLI создаст для вас множество файлов и папок. Такое большое количество файлов может напугать новичка, но вам не нужно работать со всеми этими файлами. При создании нашего приложения мы будем изменять файлы, уже существующие в папке src/app , а также создавать новые файлы в том же каталоге. Прямо сейчас у вас должно быть пять разных файлов в папке src/app . Эти файлы создают оболочку приложения, которая будет использоваться для объединения остальной части нашего приложения.

Файл app.component.ts содержит логику для нашего компонента, написанного в TypeScript. Вы можете открыть этот файл и обновить свойство title класса AppComponent в «Интересные факты о странах». Файл app.component.ts теперь должен иметь следующий код.

Файл app.component.html содержит шаблон для нашего класса AppComponent . Откройте файл app.component.html и замените HTML-код шаблона внутри него следующей строкой:

Оборачивая title внутри фигурных скобок, мы сообщаем Angular о том, чтобы поместить значение свойства title класса AppComponent внутри тега h1 .

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

Изменения, внесенные в этот файл, будут автоматически отображаться в браузере по адресу http://localhost:4200/. Просто убедитесь, что консоль все еще открыта, и вы уже набрали команду ng serve с начала учебника.

Различные функции приложения будут контролироваться несколькими более простыми компонентами, которые мы создадим позже. Вы можете подумать об этой оболочке приложения как о машине и о разных компонентах, которые мы будем создавать как о частях этого автомобиля, такие как двигатель и колеса. Каждый компонент выполняет свою конкретную функцию, и вы можете собрать все вместе, чтобы создать весь автомобиль.

Заключение

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

Подводя итог, вам нужно знать основы TypeScript, прежде чем вы сможете создать приложение Angular. На следующем шаге вам необходимо установить Node.js, TypeScript и Angular CLI. После этого вы можете просто запустить кучу команд из раздела «Начало работы» этого руководства, и ваше первое приложение будет собрано и запущено.

Наше приложение стран будет делать гораздо больше, чем просто отображать свое название. В следующем учебном пособии вы создадите несколько классов и служб, которые будут использоваться для хранения и извлечения данных о разных странах. Эти классы и службы будут полезны в третьем и четвертом учебниках, где мы создадим различные компоненты.

Пока мы работаем над этой серией учебников, не забудьте проверить Envato Market, чтобы узнать, что доступно для использования и изучения как для Angular, так и для JavaScript в целом.

Запускаем ваше Angular-CLI приложение в браузере из репозитория на GitHub

Онлайн IDE для работы над Angular 5 проектами, StackBlitz создало VS Code, с которым можно работать прямо в браузере.

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

Ребята из StackBlitz создали онлайн IDE, которая позволет вам редактировать и запускать проекты на Angular-CLI прямо в браузере, миную долгий процесс скачивания и инициализации проектов. Они также, уже включили все примеры из оффициальной документации Angular.io

Еще одним приятным бонусом стал запуск проекта с подменой урла

Как добавить загрузку в проект angular -cli

Мы хотим использовать bootstrap 4 (4.0.0-alpha.2) в нашем приложении, созданном с помощью angular -cli 1.0.0-beta.5 (w/node v6.1.0).

После загрузки бутстрапа и его зависимостей с npm наш первый подход заключался в добавлении их в angular-cli-build.js :

и импортируйте их в наш index.html

Это отлично работало с ng serve , но как только мы создали сборку с флагом -prod , все эти зависимости исчезли из dist/vendor (сюрприз!).

Как мы планируем обрабатывать такой сценарий (т.е. загружать сценарии начальной загрузки) в проекте, созданном с помощью angular -cli?

У нас были следующие мысли, но мы действительно не знаем, куда идти.

используйте CDN? но мы предпочитаем обслуживать эти файлы, чтобы гарантировать, что они будут доступны.

скопировать зависимости dist/vendor после нашего ng build -prod ? Но это похоже на что-то angular -cli должно обеспечить, поскольку оно «заботится» о части сборки?

создать проект Angular2 angular-cli

2 Anna Lee [2020-02-16 18:02:00]

Я пытаюсь создать проект Angular2, используя angular-cli. Я запускаю, npm install -g angular-cli тогда я ng new test , он возвращает

«ng» не распознается как внутренняя или внешняя команда, операционная программа или командный файл «.

Я проверяю каталог, C:\node\node_modules\npm\node_modules . Не было найдено угловатого кли. Моя версия npm — 4.0.2, а моя версия узла — 5.11.0. Если у вас есть такая же проблема, не могли бы вы помочь мне понять это?

javascript angular typescript angular-cli

4 ответа

0 student [2020-08-14 22:22:00]

Установка угловых зависимостей

  • Установите стабильную версию узла (если он еще не установлен) и проверьте установку с помощью node -v
  • Установите TypeScript с помощью команды npm install -g typescript
  • Загрузите и установите Angular CLI с помощью команды npm install -g @angular/cli

Angular — это компонентная структура. Для создания всего приложения необходимо создать множество компонентов. Компонент представляет собой группу пользовательских элементов, HTML элементов, ShadowDOM и HTML импорта.

Создание приложения Angular 4 с использованием Angular CLI

Чтобы создать новое новое приложение Angular 4, используйте команду ng new newAppName . Для выполнения этой команды требуется некоторое время.

package.json — заботится о зависимостях разработки и приложений/пакетах/командах для выполнения

src\main.ts — заботится о строительных лесах

src\app\app.module.ts — любой вновь созданный модуль должен быть добавлен к declarations и сервисы должны быть предоставлены ключевому параметру providers функции @NgModule чтобы сделать их доступными для всего приложения

Запустите приложение Angular 4 с помощью Angular CLI

Чтобы запустить только что созданное приложение с помощью CLI, используйте команду ng serve которая будет запускать приложение на http://localhost: 4200/.

0 Bhavin [2020-01-10 12:43:00]

Используйте этот код:

0 Sanket [2020-02-16 19:21:00]

1) Как предложил VadimB, вам необходимо обновить версии узлов и npm. Установите последнюю версию узла из nodejs.org и убедитесь, что вы выбрали минимальную настройку Node 6.9.0.

2) Вы пытаетесь запустить неправильную команду. Текущая версия команды — npm install -g @angular/cli (обратите внимание — @ перед угловым/кли-пакетом в команде выше).

3) После установки @angular/cli вы можете использовать ng help или ng -v чтобы проверить успешную установку и версию.

4) Вы ищете неправильную папку. После успешной установки @angular\cli будет доступен в C:\Users\ \AppData\Roaming\npm\node_modules\

0 VadimB [2020-02-16 18:05:00]

И CLI, и сгенерированный проект имеют зависимости, которые требуют Node 6.9.0 или выше, вместе с NPM 3 или выше.

Добавить комментарий