Angular 2 установка mac os

Can’t install angular-cli on Mac

This is probably very trivial, but I am hitting my head against the wall while I am trying to (unsuccessfully) install angular-cli.

Then I run npm install -g angular-cli which gives me:

I think I have tried almost everything on the web, and still can’t make this to work.

My OS is MacOS High Sierra 10.13.2 .

Any idea what am I missing here?

12 Answers 12

After several tries, I finally installed angular-cli successfully via nvm. In detail:

Then install node through nvm :

Thereafter, install angular-cli:

Verify that ng works properly:

The app will start on localhost:4200 .

i faced similar issue while installing angular-cli on Mac Mojave.

Correct installation steps are:

1. Install npm using package manager.
2. above step sets the directory owner of /usr/local/lib/node_modules/ to root.

execute below command to set the owner to your user:
sudo chown -R $(whoami) $(npm config get prefix)/

npm install -g @angular/cli (avoid using sudo)

To get rid of access errors, these steps can help:

Step1: Homebrew installation[https://brew.sh/]: (on terminal)

Step2: brew install node

Step3: brew install -g angular-cli

Step4: ng new First-App

After going back and forth i used homebrew. Just run: «sudo brew install angular-cli» If you have homebrew installed, it solved all my problems including node-sass issues on angular 7

These are the codes I used

Error: EACCES: permission denied, rmdir ‘/Users/mkotsollaris/.npm-packages/lib/node_modules/.staging/@angular’ you do not have permissions to access the directories node_modules.

your process want to make changes to your directories and it is not allowed to access you can easily be in super user (admin), have access permission is thrown the command so that the processur can modify the node_modules angular.

Источник

How to Install Angular CLI on macOS

This tutorial will help you to install Angular.js on your macOS operating system via command line. You must need to install Homebrew package manager on your macOS.

Step 1 – Prerequsities

Let’s start the installation of Node.js on your macOS system using Homebrew. So first update the Homebrew package manager index. Then you can install Node.js package in your MacOS system using the following command:

You have successfully installed Node.js on your system. Execute below command on the terminal to view the installed Node.js version info.

Step 2 – Install Angular/CLI on macOS

After installing the Node.js and npm on your system, use the following commands to install the Angular CLI tool on your system globally.

This command will install the latest available Angular CLI version on your macOS system. If you need any other Angular version on your macOS use one of the following commands as per required version.

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

Step 3 – Create New Angular Application

Now, create a new application named hello-angular4 using the Angular CLI tools. Execute the commands to do this:

This will create a directory named hello-angular4 in your current directory, and create an application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Change directory to hello-angular4 and run your Angular application using ng serve command.

You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

You can change host and port for running Angular application by providing –host and –port command line arguments.

The IP address 0.0.0.0 listens on all interfaces and publically accessible.

Источник

Быстрый старт за 5 минут с Angular 2 beta

Вашему вниманию предлагается перевод туториала «5 min quickstart» от команды Angular. Туториал описывает процесс создания «Hello World»-приложения на новом фреймворке Angular 2, который недавно получил статус «бета».

Давайте начнём с нуля и построим суперпростое приложение Angular2 на TypeScript.

Запуск работающего примера — это самый лучший способ увидеть, как оживает приложение на Angular 2.
Нажатие этой ссылки открывает новую вкладку, загружает пример в plunker и отображает простое сообщение:

Вот файловая структура:

Функционально это index.html и два файла TypeScript в папке app/ . Давайте сделаем это!

Конечно, мы не будем создавать приложения, которые будут запускаться только в plunker. Давайте сделаем всё как если бы мы делали это в реальной жизни:

1. Обустроим нашу среду разработки.
2. Напишем корневой компонент Angular для нашего приложения.
3. Загрузим его для того, чтобы он принял контроль над главной веб-страницей.
4. Напишем главную страницу ( index.html ).

Мы действительно можем собрать QuickStart за пять минут, если будем следовать инструкциям и проигнорируем все комментарии.
Но многие из нас заинтересуются, «почему» и «как» всё это происходит, и ответ на эти вопросы займёт значительно больше времени.

Среда разработки

Нам необходимо место (папка проекта), несколько библиотек, некоторое количество настроек TypeScript и редактор с поддержкой TypeScript на ваш выбор.

Создадим новую папку нашего проекта

Добавим нужные нам библиотеки

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

Добавьте файл package.json в папку проекта и скопируйте в него следующий код:

Не терпится узнать детали? Мы изложили их в приложении ниже.

Установите пакеты. Откройте окно терминала (командную строку в Windows) и запустите эту команду npm:

Жуткие красные сообщения об ошибках могут появиться в течение установки. Игнорируйте их. Установка будет успешной. Смотрите приложение ниже, если хотите узнать больше.

Сконфигурируем TypeScript

Нам необходимо довольно специфично настроить компилятор TypeScript.
Добавьте файл tsconfig.json в папку проекта и скопируйте в него следующее:

Итак, всё готово. Давайте напишем немного кода.

Наш первый компонент Angular

Компонент(Component) — это наиболее фундаментальная концепция Angular. Компонент настраивает отображение(view) — часть веб-страницы, где мы показываем информацию пользователю и реагируем на его действия.

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

Создадим подпапку, в которой будут находиться исходники

Мы предпочитаем хранить код нашего приложения в подпапке под названием app/ . Выполните следующую команду в консоли:

Добавим файл компонента

Теперь добавьте файл с именем app.component.ts и скопируйте в него следующий код:

Давайте подробно рассмотрим этот файл, начиная с самого конца, где мы определяем класс.

Класс Компонента

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

Модули

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

Большинство файлов приложения экспортируют что-нибудь вроде компонента. Наш файл app.component экспортирует класс AppComponent .

Факт экспорта превращает обыкновенный файл в модуль. Имя файла (без его расширения), как правило, является именем модуля. Таким образом, ‘app.component’ — это имя нашего первого модуля.

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

QuickStart не сложен: один компонент — это всё, что нам нужно. Однако модули играют фундаментальную организационную роль даже в таком маленьком приложении.

Модули полагаются на другие модули. В приложениях Angular, написанных на TypeScript, когда нам нужно что-то, предоставляемое иным модулем, мы импортируем его. Когда другому модулю требуется сослаться на AppComponent , он импортирует символ AppComponent следующим образом:

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

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

Метаданные компонента

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

Мы определяем метаданные компонента с помощью функции Component из Angular. Мы получаем доступ к этой функции, импортируя её из основной библиотеки Angular — angular2/core .

В TypeScirpt мы можем связать функцию и класс через превращение функции в декоратор. Для этого перед её названием нужно добавить символ @, и поместить её прямо перед объявлением класса.

@Component сообщает Angular, что данный класс является компонентом Angular. Объект конфигурации, отправляемый в @Component , имеет два поля: selector и template .

Свойство selector определяет обычный CSS селектор для HTML-элемента my-app , выступающего в качестве хоста. Angular создаёт и отображает экземпляр нашего AppComponent каждый раз, когда он сталкивается с my-app в родительском HTML.

Запомните селектор my-app ! Нам будет нужна эта информация, когда мы будем писать наш index.html .

Свойство template содержит шаблон компонента. Шаблон — это разновидность HTML, которая объясняет Angular, как рендерить отображение. Наш шаблон — это единственная строка HTML, объявляющая: «My First Angular App».

Теперь нам нужно как-то объяснить Angular, что этот компонент необходимо загрузить.

Запустим его

Добавьте новый файл, boot.ts , в папку app/ , и скопируйте в него следующий код:

Нам требуются две вещи для того, чтобы запустить приложение:

1. Браузерная функция Angular bootstrap .
2. Корневой компонент приложения, который мы только что написали.

Мы импортируем и то, и другое. Потом мы вызываем bootstrap и передаём в неё тип корневого компонента AppComponent .

Изучить, почему мы импортируем bootstrap из angular2/platform/browser и почему мы создаём отдельный файл boot.ts , можно в приложении ниже.

Мы попросили Angular запустить приложение в браузере с нашим компонентом в качестве корневого. Однако, где же Angular его запустит?

Добавим страницу index.html

Angular отображает наше приложение в специфическом месте на нашей странице index.html . Пришло время создать этот файл.

Мы не будем класть index.html в папку app/ . Мы расположим его на один уровень выше, в корневой папке проекта.

Теперь создайте файл index.html и скопируйте в него следующее:

Здесь есть 3 секции HTML, которые необходимо отметить:

1. Мы загружаем библиотеки JavaScript, которые нам требуются. angular2-polyfills.js и Rx.js требуются для работы Angular 2.
2. Мы настраиваем нечто, что называется System , и просим его импортировать файл boot, который мы только что написали.
3. Мы добавляем тэг в . Это то самое место, где обитает наше приложение!

Что-то должно найти и загрузить модули нашего приложения. Мы используем для этого SystemJS. Есть много вариантов, и нельзя сказать, что SystemJS — лучший выбор, но мы его любим, и он работает.

Специфика настройки SystemJS выходит за пределы данного туториала. Мы кратко опишем часть конфигурации в приложении ниже.

Когда Angular вызывает функцию bootstrap в boot.js , он читает метаданные AppComponent , находит селектор my-app , обнаруживает тэг с именем my-app и загружает наше приложение в этот тэг.

Скомпилируем и запустим!

Откройте окно терминала и введите следующую команду

Эта команда запускает два параллельных процесса node.

1. Компилятор TypeScript в режиме наблюдения.
2. Статический сервер lite-server, который загружает index.html в браузере и обновляет браузер каждый раз, когда код приложения изменяется.

В течение нескольких мгновений вкладка браузера должна открыться и отобразить:

Поздравляем! Вы в деле!

Внесём несколько изменений

Попробуйте изменить сообщение на «My SECOND Angular 2 app».

Компилятор TypeScript и lite-server наблюдают за вашими действиями. Они должны засечь изменение, перекомпилировать TypeScript в JavaScript, обновить вкладку браузера и отобразить обновлённое сообщение.

Это изящный способ разработки приложений!

Мы закрываем окно терминала когда мы всё сделали для того, чтобы прервать одновременно компилятор и сервер.

Финальная структура

Финальная структура нашей папки проекта должна выглядеть так:

Заключение

Наше первое приложение делает не слишком много. Это, по сути, «Hello World» на Angular 2.

Для первого раза мы сделали всё максимально просто: написали небольшой компонент Angular, добавили немного библиотек JavaScript в index.html и запустили статический файловый сервер. В целом, это всё, что мы ожидали от «Hello World»-приложения.

У нас более серьёзные амбиции

Хорошая новость в том, что вся возня с установкой нас не касается. Возможно, мы чуть-чуть коснёмся package.json для обновления библиотек. Мы откроем index.html только если нам нужно будет добавить библиотеку или файл css-стилей.

Мы готовы к следующему шагу, и теперь наша задача — сконструировать приложение, которое демонстрирует, насколько великолепные вещи можно сделать с помощью Angular 2.

Приложения

Остаток данной главы посвящён набору приложений, более подробно излагающих кое-какие моменты, которые мы кратко затронули выше.

Здесь нет никакого критически важного материала. Читайте дальше, если вам интересны детали.

↑ Приложение: Поддержка ES6 браузерами

Angular 2 полагается на некоторые возможности стандарта ES2015, большая часть из которых уже включена в современные браузеры. Однако некоторым браузерам (таким, как IE11), требуются полифиллы (shim) для поддержки этой функциональности. Попробуйте загрузить следующие полифиллы перед другими скриптами в index.html :

↑ Приложение: package.json

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

Мы определили пакеты, которые нам необходимы в файле npm package.json.

Команда Angular предлагает использовать пакеты, указанные в секциях dependencies и devDependencies в этом файле:

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

В package.json может присутствовать необязательная секция scripts, в которой мы можем определить полезные команды для выполнения разработки и построения. Мы включаем несколько таких скриптов в предлагаемом нами package.json :

Мы уже видели, как можно запустить компилятор и сервер одновременно с помощью этой команды:

Мы исполняем скрипты npm в следующем формате: npm run + название-скрипта. Вот описание того, что делают скрипты:

• npm run tsc — запуск компилятора TypeScript на один проход
• npm run tsc:w — запуск компилятора TypeScript в режиме наблюдения; процесс продолжает работу, перекомпилируя проект в тот момент, когда засекает изменения, внесённые в файлы TypeScript.
• npm run lite — запускает lite-server, легковесный статический файловый сервер, написанный и поддерживаемый Джоном Папа с великолепной поддержкой приложений Angular, которые используют маршрутизацию.

↑ Приложение: Предупреждения и ошибки npm

Всё хорошо, когда любые консольные сообщения, начинающиеся с npm ERR! отсутствуют в конце работы npm install. Могут быть несколько сообщений npm WARN в течение работы команды — и это превосходный результат.

Мы часто наблюдаем сообщение npm WARN после серии gyp ERR! Игнорируйте его. Пакет может попытаться перекомпилировать себя с помощью node-gyp . Если эта попытка заканчивается неудачей, пакет восстанавливается (обычно на предыдущую версию), и всё работает.

Всё хорошо до тех пор, пока нет ни одного сообщения npm ERR! в самом конце npm install .

↑ Приложение: Конфигурация TypeScript

Мы добавили конфигурационный файл ( tsconfig.json ) в наш проект, чтобы объяснить компилятору, как нужно генерировать файлы JavaScript. Подробнее про tsconfig.json вы можете узнать из официальной TypeScript wiki.

Опции и флаги, которые мы добавили в файл, являются наиболее важными.

Хотелось бы немного подискутировать насчёт флага noImplicitAny . Разработчики TypeScript расходятся во мнении относительно того, должен он быть установлен как true или false . Здесь нет точного ответа, и мы всегда можем изменить флаг позже. Но наш выбор может серьёзно повлиять на крупные проекты, так что он достоин дискуссии.

Когда noImplicitAny установлен в позицию false , компилятор, если он не может вывести тип переменной в зависимости от того, как переменная используется, скрыто устанавливает тип переменной в any . Это и значит «скрытый (implicit) any ».

Когда noImplicitAny установлен в позицию true , и компилятор TypeScript не может вывести тип, он всё ещё генерирует файл JavaScript, но также и отчитывается об ошибке.

В этом QuickStart и во многих других примерах этого Developer Guide мы устанавливаем noImplicitAny в позицию false .

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

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

↑ Приложение: Конфигурация SystemJS

QuickStart использует SystemJS для загрузки приложения и библиотечных модулей. Однако не забывайте, что у него есть рабочие альтернативы, такие как высоко оцениваемый сообществом webpack. SystemJS — это неплохой выбор, но мы хотим дать ясное понимание, что это лишь выбор, а не предпочтение.

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

Мы рекомендуем вам хорошо разобраться в загрузчике, который вы выберете.

Узнать больше о конфигурации SystemJS можно здесь.

Приняв во внимание эти предостережения, что мы можем сделать?

Узел packages указывает SystemJS, что делать, если он видит запрос на модуль из папки app/ .

Наш QuickStart создаёт такие запросы каждый раз, когда в любом TypeScript-файле приложения обнаруживается подобный оператор импорта:

Обратите внимание, что наименование модуля (после from ) не содержит расширения файла. Конфигурация packages задаёт SystemJS расширение по-умолчанию как ‘js’, то есть файл JavaScript.

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

В демо-примере на plunker мы компилируем в JavaScript прямо в браузере на лету. Это неплохо для демо, но это не может стать нашим выбором для разработки или релиза.

Мы рекомендуем компилировать в JavaScript в течение фазы построения перед тем, как запускать приложение, по нескольким причинам:

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

Вызов System.import заставляет SystemJS импортировать файл boot ( boot.js … после компиляции boot.ts , помните?) boot — это файл, где мы просим Angular запустить приложение. Мы также отлавливаем и логируем ошибки запуска в консоль.

Все прочие модули загружаются с помощью запроса, который создаётся оператором импорта или самим Angular.

↑ Приложение: boot.ts

Загрузка платформоспецифична

Мы импортируем функцию bootstrap из angular2/platform/browser , не из angular2/core . Этому есть причина.

Мы можем назвать «ядром» только те возможности, которые одинаковы для всех целевых платформ. Действительно, многие приложения Angular могут быть запущены только в браузере, и мы будем вызывать функцию bootstrap из этой библиотеки наибольшее количество времени. Вполне «core»-фича — если мы пишем исключительно для браузера.

Но ведь вполне возможно загружать компонент в ином окружении. Мы можем загрузить его на мобильном устройстве с помощью Apache Cordova. Мы можем захотеть отрендерить начальную страницу нашего приложения на сервере для увеличения производительности или содействия SEO-продвижению.

Эти платформы требуют других вариантов bootstrap-функции, которые мы будем загружать из другой библиотеки

Зачем создавать отдельный файл boot.ts?

Файл boot.ts небольшой. Это всего лишь QuickStart. Мы вполне можем вписать эти несколько строк в файл app.component и избавить себя от излишней сложности.

Но мы так не делаем по причинам, которые, как мы верим, являются весомыми:

1. Сделать всё правильно — это просто.
2. Удобство тестирования.
3. Удобство переиспользования.
4. Разделение обязанностей.
5. Изучение импорта и экспорта.

Это просто

Да, это дополнительный шаг и дополнительный файл. Насколько это сложно в целом?

Мы увидим, что отдельный файл boot.ts предпочтительней для большинства приложений — даже если это не столь важно для QuickStart. Давайте вырабатывать хорошие привычки сейчас, пока цена этому невысока.

Удобство тестирования

Мы должны думать об удобстве тестирования с самого начала, даже если мы знаем, что никогда не будем тестировать QuickStart.

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

Перемещение bootstrap -функции в boot.ts убирает ложную ошибку и оставляет нас с чистым файлом компонента.

Переиспользование

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

Разделение обязанностей

Задача компонента — представлять отображение и управлять им.

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

Источник