Angular cli windows install

Установка Angular на Windows

Оглавление

1. Как установить Angular, Node и NPM
2. Как создать проект Angular

Предисловие

Последние два месяца я промучился с задачей, на которую я смог найти в Интернете только косвенные ответы. Задача называлась так: «Как упаковать Angular в war и развернуть на Tomcat» (Angular 4 + Maven war + Tomcat). В итоге, меня ждала победа с этим страшным DevOps’ом и мне захотелось помочь тем, кто так же будет мучиться с этой проблемой.
Но, немного подумав, я решил, что стоит рассказать свой путь с самого начала, начиная с момента установки Angular на компьютер. Потом я отдельно рассмотрю deploy чистого Angular на Tomcat, а в самом конце поговорим уже о подготовки war-контейнера и размещении его на сервере с последующим развертыванием.

Что такое Angular?

Итак, для начала давайте разберем, что такое Angular. Немного перефразируем Вики в этом смысле:

Установка Angular на Windows

Теперь перейдем непосредственно к тому как проходит установка Angular на Windows. Для установки Angular Вам понадобится NodeJS. NodeJS – это платформа, в задачу которой входит транслирование JavaScript’а в машинный код. Node – это не User-friendly GUI с кнопочками. К сожалению взаимодействие со средой осуществляется полностью через консоль Windows.

Для установки NodeJS нужно перейти в раздел Download официального сайта (ссылка ) и скачать msi-файл и запустить его после окончания загрузки.

Если у вас Windows 10, то Вы можете получить следующее предупреждение:

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

После этого следует установить программу, следуя инструкции установщика (никаких проблем вызвать не должно).

Теперь настало время проверить установку. Нажмите комбинацию клавиш Win + R, введите “cmd” в поле и нажмите Enter. Откроется консоль, в которой введите последовательно:

Если все установлено верно, то в консоли, сразу после введенных команд будут отображены текущие версии NodeJS и NPM. Напомню, что NPM – это специальный пакетный менеджер для управления зависимости. Ну и нам осталось сделать последнее — установить Angular CLI (собственно, это и есть установка Angular). Для этого все в том же терминальном (консольном) окне введем команду:

Установка займет какое-то время и весь ее процесс будет отображен в Вашем терминальном окне. Сразу после этого можно приступать к созданию Вашего первого проекта, но об это мы поговорим уже в следующей статье.

Вот собственно и все! Установка Angular на Windows закончена!

Источник

Как начать работать с Angular на Windows

Дата публикации: 2018-12-30

От автора: наладить взаимодействие Angular Windows не всегда получается без проблем. Вы не можете настроить среду разработки? Позвольте нам помочь вам!

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

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

У студентов ngHeroes были компьютеры на MacOS, Linux и Windows. Нам удалось их запустить, но в процессе возникло несколько сложных моментов. В этой статье я сосредоточусь на установке инструментов и зависимостей, необходимых для разработки приложений Angular на компьютере под управлением Windows. Они почти одинаковы для других платформ.

1. Node.js

Первое, что вам нужно установить, это Node.js. Это среда выполнения JavaScript, которая может запускать веб-серверы, скрипты и консольные приложения. Многие инструменты веб-разработки используют Node.js.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Перейдите на сайт Node.js. На нем предлагаются 2 установочных пакета, исходя из вашей операционной системы и архитектуры процессора: LTS (долгосрочная поддержка) и Текущий.

Вот где начинаются сложности. LTS — правильный выбор, но нам может понадобиться более старая версия LTS. Нам нужна LTS версия Node.js, которую поддерживает Angular CLI (интерфейс командной строки). Angular CLI — это инструмент разработки для проектов Angular.

Таблица 1. Поддержка Node.js в Angular CLI

Для нового приложения мы можем выбрать новейшую версию Angular CLI. На jsDelivr мы можем прочитать описание пакета для последней версии Angular CLI. На момент написания статьи это Angular CLI версии 7.0.5. В описании пакета мы также видим поддерживаемую версию Node.js.

В конце файла JSON вы найдете объект JSON с именем «engines», а внутри него требования для «node». Например, там будет указано «node»: «>= 8.9.0″ для Angular CLI версии 7.0.5. Это означает, что нам нужна как минимум версия Node.js 8.9. Как видно из таблицы 1, Angular CLI версии 7.x также поддерживает Node.js 10.

Читайте также:  Windows 10 код ошибки 225

Мы решили использовать новейший Angular CLI. Давайте вернемся на сайт Node.js, загрузим установщик последней версии LTS, поддерживаемой Angular CLI, и запустим его с правами администратора.

2. Инструменты сборки Windows

Установка инструментов сборки Windows с помощью NPM CLI

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

В частности, некоторые инструменты компиляции используются для задач пакетом node-gyp до и после установки для различных пакетов, таких как Angular CLI.

Для Windows нам нужны Python 2.7, инструменты сборки Visual Studio и инструменты сборки C++. К счастью, мы можем установить их все как один пакет, используя интерфейс командной строки NPM.

Если вы ранее установили Node.js с включенной опцией Boxstarter, у вас уже есть эти зависимости. Перейдите к шагу 3.

Выполните следующую команду, чтобы установить все специфичные для Windows зависимости для Angular CLI. Для установки из общедоступного реестра NPM используется интерфейс командной строки NPM (Node Package Manager). Вы установили интерфейс командной строки NPM с Node.js.

Обязательно используйте терминал с правами администратора. То есть, кликните правой кнопкой мыши на командной строке и выберите «Запуск от имени администратора». NPM похож на Composer (PHP), LuaRocks, Maven (Java), NuGet (.NET), pip (Python) и RubyGems, но для JavaScript.

Источник

How do you install angular-cli for windows 7

Here you can see I’ve installed the angular-cli using the provided command and that any use of the «ng» command registers and error:

And here you can see an empty folder with no angular-cli folders or anything for that matter:

PLEASE NOTE I am very new to cmd and angular and I really have no idea what steps to take here.

6 Answers 6

Installation of NodeJs, npm, TypeScript, AngularJS, @angular/cli on Windows 7 Professional SP 1 64-bit:

Since I have found many valuable hints scattered on various posts only after ‘painful’ search, here a compact compilation (not my ideas but my experience). Hope it helps.

install Node.js Windows Installer 64-bit: https://nodejs.org/en/download/ node-v6.11.0-x64.msi

If there is a (company-)proxy (installation behind firewall): configure npm against the company-proxy: open cmd window (not elevated, normally you have to be the login-user)

npm config set proxy http://Proxy.Company.com:Port (replace Proxy.Company.com:Port with your proxy-settings)

npm config set https-proxy http://Proxy.Company.com:Port (replace Proxy.Company.com:Port with your proxy-settings)

Hints: Both settings are required, ask your admins for the correct url. If you need to propagate a user/password use the following syntax:

Set npm directory for packages (npm 3.10.10 comes with Node.js but we’ll update it later):

Update npm to the latest version:

Beware: npm update only works with the HTTPS-variant (registry https://registry.npmjs.org/). With the HTTP-setting (see below) you earn «shasum check failed».

Set npm directory for packages to the non-HTTPS-variant:

Reason: the https-variant, which was necessary to update npm itself, does’nt work for all packages, e.g. @angular/cli@latest or angular-cli or typescript@latest either.

npm install angular (my version: 1.6.5)

Check versions (in cmd window; my versions below):

Install optional package installer for Visual Studio (see also section ‘Links’ below): https://marketplace.visualstudio.com/items?itemName=MadsKristensen.PackageInstaller (. Downloads\Package Installer v2.0.101.vsix)

If something had gone wrong, restart with the following steps:

Links:

Latest versions of Node.js and Angular CLI can be setup on Windows 7 in few simple steps:

Step 1: Download Node.js

Download the latest release of Node.js from: Nodejs downloads page. I have downloaded Node.js for Windows 64-bit and the filename is: node-v8.9.3-x64.msi

Step 2: Install Node.js for Windows.

Step 3: Verify Node.js Installation

Type the following commands to check the versions of Node.js and NPM

Step 4: Install Angular CLI

Angular Command Line Interface (CLI) is the easiest way to create new Angular projects. Execute the following NPM command to install Angular CLI:

After this installation, the CLI tool can be accessed by using ng commands.

Step 5: Verify Angular CLI

I have also put all these steps in my blog: Setup Node.js and Angular CLI

To see if Node is installed, type the above on your command line.

To see if npm is installed, type the above on your command line. Installing @angular/cli

To add this npm package to your local machine, type the above into your command line. You’ll notice a node_modules directory appear in your root where the package is now installed.

If you’re having trouble installing packages, check out the helpful docs for installing npm packages locally

Please note that NG.cmd is installed normally at:

. where Administrator could be a user name.

Step 1: Download Node.js

Download the latest release of Node.js from: Nodejs downloads page. I have downloaded Node.js for Windows 64-bit and the filename is: node-v8.9.3-x64.msi

Step 2: Install Node.js for Windows.

Step 3: Verify Node.js Installation

Type the following commands to check the versions of Node.js and NPM

Step 4: Install Angular CLI

Angular Command Line Interface (CLI) is the easiest way to create new Angular projects. Execute the following NPM command to install Angular CLI: Step 1: Download Node.js

Download the latest release of Node.js from: Nodejs downloads page. I have downloaded Node.js for Windows 64-bit and the filename is: node-v8.9.3-x64.msi

Step 2: Install Node.js for Windows.

Step 3: Verify Node.js Installation

Type the following commands to check the versions of Node.js and NPM

Step 4: Install Angular CLI This command will install latest version of angular command line.

Источник

How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools

Ahmed Bouchefra

In this tutorial, we’ll learn how to install Angular CLI in Windows and use it to create an Angular project.

Читайте также:  Geforce experience для виндовс 10

What is Angular CLI?

Angular CLI is the official tool for initializing and working with Angular projects. It saves you from the hassle of complex configurations and build tools like TypeScript, Webpack, and so on.

After installing Angular CLI, you’ll need to run one command to generate a project and another to serve it using a local development server to play with your application.

Like most modern frontend tools these days, Angular CLI is built on top of Node.js.

Node.js is a server technology that allows you to run JavaScript on the server and build server-side web applications. However, Angular is a front end technology, so even if you need to install Node.js on your development machine, it is only for running the CLI.

Once you build your app for production you won’t need Node.js because the final bundles are just static HTML, CSS, and JavaScript that can be served by any server or a CDN.

That being said, if you are building a full-stack web application with Angular, you may need Node.js for creating the back end part if you like to use JavaScript for the front end and back end.

Check out the MEAN stack – it’s an architecture that includes MongoDB, Express (a web server and REST API framework built on top of Node.js) and Angular. You can read this article if you’d like a step by step tutorial to get started.

In this case, Node.js is used to build the back end part of your app and can be replaced with any server-side technology that you want such as PHP, Ruby, or Python. But Angular doesn’t depend on Node.js except for its CLI tool and for installing packages from npm.

NPM stands for Node Package Manager. It’s a registry for hosting Node packages. In recent years it’s also been used to publish front end packages and libraries like Angular, React, Vue.js and even Bootstrap.

Note: you can download our Angular 8 Book: Build your first web apps with Angular 8 for free.

Installing Angular CLI on Windows

First, you need to have Node and npm installed on your development machine. There are many ways to do that, such as:

Let’s keep it simple and use the official website. Simply visit the download page and grab the binaries for Windows, then follow the setup wizard.

You can make sure Node is installed on your system by running the following command in a command prompt which should display the installed version of Node:

Next, run the following command to install Angular CLI:

After the command finishes successfully, you should have Angular CLI installed.

A Quick Guide for Angular CLI

After installing Angular CLI, you can run many commands. Let’s start by checking the version of the installed CLI:

A second command that you might need to run is the help command for getting a complete usage help:

The CLI provides the following commands:

add : Adds support for an external library to your project.

build (b) : Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.

config : Retrieves or sets Angular configuration values.

doc (d) : Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.

e2e (e) : Builds and serves an Angular app, then runs end-to-end tests using Protractor.

generate (g) : Generates and/or modifies files based on a schematic.

help : Lists available commands and their short descriptions.

lint (l) : Runs linting tools on Angular app code in a given project folder.

new (n) : Creates a new workspace and an initial Angular app.

run : Runs a custom target defined in your project.

serve (s) : Builds and serves your app, rebuilding on file changes.

test (t) : Runs unit tests in a project.

update : Updates your application and its dependencies. See https://update.angular.io/

version (v) : Outputs Angular CLI version.

xi18n : Extracts i18n messages from source code.

Generating a Project

You can use Angular CLI to quickly generate your Angular project by running the following command in your command line interface:

As mentioned earlier, the CLI will ask you Would you like to add Angular routing?, and you can answer by entering y (Yes) or n (No), which is the default option. It will also ask you about the stylesheet format you want to use (such as CSS). Choose your options and hit Enter to continue.

After that you’ll have your project created with a directory structure and a bunch of configurations and code files. It’ll be mostly in TypeScript and JSON formats. Let’s see the role of each file:

Serving your Project

Angular CLI provides a complete tool-chain for developing front-end apps on your local machine. As such, you don’t need to install a local server to serve your project — you can simply, use the ng serve command from your terminal to serve your project locally.

First navigate inside your project’s folder and run the following commands:

You can now navigate to the http://localhost:4200/ address to start playing with your front end application. The page will automatically live-reload if you change any source file.

Generating Angular Artifacts

Angular CLI provides an ng generate command which helps developers generate basic Angular artifacts such as modules, components, directives, pipes, and services:

Читайте также:  Gmail гаджет для windows 7

If you want to add your component, directive or pipe to another module (other than the main application module, app.module.ts ), you can simply prefix the name of the component with the module name and a slash :

my-module is the name of an existing module.

Conclusion

In this tutorial, we’ve seen how to install Angular CLI on our Windows machine and we used it to initialize a new Angular project from scratch.

We have also seen various commands that you can use throughout the development of your project for generating Angular artifacts such as modules, components, and services.

You can reach out to or follow the author via his personal website, Twitter, LinkedIn and Github.

Ahmed Bouchefra

Developer and author with a bac + 5 diploma (Master’s degree) on software development. He builds apps and authors technical content about JS, Angular and Ionic. He also likes poetry and teaching.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

Введение в Angular CLI

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

Что такое Angular CLI?

Как и большинство современных инструментов веб-интерфейса, Angular CLI построен на основе Node.js.

Тем не менее, если вы создаете полнофункциональное веб-приложение с Angular, вам может понадобиться Node.js для создания серверной части, если вы хотите использовать JavaScript для интерфейса и серверной части.

В этом случае Node.js используется для создания серверной части вашего приложения и может быть заменен любой серверной технологией, которую вы хотите, например, PHP, Ruby или Python. Но Angular не зависит от Node.js, за исключением его инструмента CLI и установки пакетов из npm.

NPM означает Node Package Manager. Это реестр для размещения пакетов Node. В последние годы он также использовался для публикации внешних пакетов и библиотек, таких как Angular, React, Vue.js и даже Bootstrap.

Установка Angular CLI

Во-первых, вам нужно установить Node и npm на вашем компьютере для разработки. Есть много способов сделать это:

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

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

Затем выполните следующую команду для установки Angular CLI:

На момент написания этой статьи будет установлен Angular 8.3.

Если вы хотите установить Angular 9, просто добавьте тег next следующим образом:

После успешного завершения команды у вас должен быть установлен Angular CLI.

Краткое руководство по Angular CLI

После установки Angular CLI вы можете запустить много команд. Начнем с проверки версии установленного CLI:

CLI предоставляет следующие команды:

add : Добавляет поддержку внешней библиотеки в ваш проект.

build (b) : Компилирует приложение Angular в каталог с именем dist/ по указанному пути. Должен выполняться из каталога рабочей области.

config : Извлекает или устанавливает значения Angular конфигурации.

doc (d) : Открывает официальную документацию Angular (angular.io) в браузере и выполняет поиск по заданному ключевому слову.

e2e (e) : Создает и обслуживает приложение Angular, затем запускает сквозные тесты с использованием Protractor.

generate (g) : Генерирует и / или изменяет файлы на основе схемы.

help : Список доступных команд и их краткое описание.

lint (l) : Запускает инструменты проверки кода приложения Angular в данной папке проекта.

new (n) : Создает новое рабочее пространство и начальное приложение Angular.

run : Запускает пользовательскую цель, определенную в вашем проекте.

serve (s) : Создает и обслуживает ваше приложение, перестраивая изменения файла.

test (t) : Запуск модульных тестов в проекте.

update : Обновляет ваше приложение и его зависимости. Подробнее смотрите https://update.angular.io/

version (v) : Вывод Angular версии CLI.

xi18n : Извлекает i18n из исходного кода.

Генерация проекта

Вы можете использовать CLI для быстрой генерации вашего Angular проекта, выполнив следующую команду в интерфейсе командной строки:

Как упоминалось ранее, CLI спросит вас, хотите ли вы добавить Angular Routing и вы можете ответить, введя y (Да) или n (Нет), что является вариантом по умолчанию. Он также спросит вас о формате таблицы стилей, который вы хотите использовать (например, CSS). Выберите ваши варианты и нажмите, Enter чтобы продолжить.

После этого ваш проект будет создан со структурой каталогов и набором конфигураций и файлов кода. Это будет в основном в форматах TypeScript и JSON. Давайте посмотрим роль каждого файла:

Обслуживание вашего проекта

Сначала перейдите в папку вашего проекта и выполните следующие команды:

Теперь вы можете перейти по адресу http://localhost:4200/, чтобы начать играть с вашим frontend приложением. Страница автоматически обновится, если вы измените какой-либо исходный файл.

Генерация Angular артефактов

Если вы хотите добавить свой компонент, директиву или пайп к другому модулю (кроме основного модуля приложения app.module.ts ), вы можете просто поставить перед именем компонента компонент с именем модуля и косой чертой:

my-module это имя существующего модуля.

Вывод

В этом посте мы увидели, как установить Angular CLI на нашу машину для разработки, и мы использовали его для инициализации нового Angular-проекта с нуля.

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

Источник

Поделиться с друзьями
Советы экспертов и специалистов
Adblock
detector