Angular cli установка windows

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.

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:

Читайте также:  Windows 7 professional 32 разрядная

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:

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 на 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 закончена!

Источник

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)

Читайте также:  Windows install on raspberry pi

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.

Источник

Введение в Angular

Что такое Angular. Первый проект

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

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

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Начало работы c Angular

Установка Angular CLI

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

Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем при создании новый проектов Angular его не потребуется устанавливать заново.

Ту же команду можно использовать для обновления Angluar CLI при выходе новой версии фреймворка. Проверить версию CLI можно в командной строке/консоли с помощью команды:

Установка пакетов. Package.json

В папке проекта создадим новый файл package.json со следующим содержимым:

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.

В секции «scripts» описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

Определение приложения

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

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

Создание модуля приложения

Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:

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

С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule. Для работы с браузером также требуется модуль BrowserModule. Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule. И далее импортируется созданный ранее компонент.

Запуск приложения

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts) файл main.ts со следующим содержимым:

Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule.

Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:

Создание главной страницы

Далее определим в папке src главную страницу index.html приложения:

Читайте также:  Windows zver xp sp4

Определение конфигурации

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

Angular.json

Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:

Проект определяет следующие опции:

projectType : тип проекта. Значение «application» указывает, что проект будет представлять приложение, которое можно будет запускать в браузере

root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают

sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения

Параметр options задает параметры построения файлов. Для команды «build» здесь определены следующие опции:

outputPath : путь, по которому будет публиковаться скомпилированное приложение

index : путь к главной странице приложения

main : путь к главному файлу приложения, где собственно запускается приложение Angular

polyfills : путь к файлу полифилов

tsConfig : путь к файлу конфигурации TypeScript

aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Head) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется

Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.

Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json, tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта «helloapp» будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.

В итоге у нас получится следующая структура проекта:

Запуск проекта

И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve :

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

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

Источник

Как начать работать с 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.

Мы решили использовать новейший 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.

Источник

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