Как вы развертываете приложения Angular?

Простой ответ. Используйте CLI Angular и выполните

ng build 

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

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

ng build --prod

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

Многое произошло с тех пор, как я впервые опубликовал этот ответ. CLI, наконец, находится на уровне 1.0.0, поэтому следуя этому руководству, обновите свой проект, прежде чем пытаться его построить. https://github.com/angular/angular-cli/wiki/stories-rc-update

С CLI Angular это легко. Пример для Heroku:

• Создайте учетную запись Heroku и установите CLI

• Переместите angular-cli dep в dependencies в package.json (чтобы он устанавливался, когда вы нажимаете на Heroku.

• Добавьте postinstall script, который будет запускать ng build, когда код будет перенесен в Heroku. Также добавьте команду запуска для сервера Node, который будет создан на следующем шаге. Это поместит статические файлы для приложения в каталог dist на сервере и запустит приложение позже.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. Создайте сервер Express для обслуживания приложения.

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

5. Создайте удаленное устройство Heroku и нажмите на приложение depoy.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

Вот быстрый writeup. У меня было более подробно, в том числе, как заставить запросы использовать HTTPS и как обращаться с PathLocationStrategy:)

Надеюсь, это может помочь, и, надеюсь, я попробую это в течение недели.

• Создание веб-приложения на Azure
• Создайте Angular 2 приложение в коде.
• Webpack to bundle.js.
• Загрузите профиль сайта Azure xml
• Настройка Azure-deploy с использованием https://www.npmjs.com/package/azure-deploy с профилем сайта.
• Deploy.
• Вкус сливок.

Вы получаете самую маленькую и самую быструю загрузочную комплектацию путем компиляции с компилятором Ahead of Time и древовидным встряхиванием/минимизацией с помощью накопителя, как показано в кулинарной книге angular AOT здесь: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Это также доступно в Angular -CLI, как сказано в предыдущих ответах, но если вы не сделали свое приложение с помощью CLI, вы должны следовать поваренной книге.

У меня также есть рабочий пример с материалами и диаграммами SVG (с поддержкой Angular2), который включает в себя набор, созданный в кулинарной книге AOT. Вы также найдете все конфиги и скрипты, необходимые для создания пакета. Посмотрите здесь: https://github.com/fintechneo/angular2-templates/

Я сделал быстрое видео, демонстрирующее разницу между количеством файлов и размером скомпилированной сборки AoT и средой разработки. Он показывает проект из репозитория github выше. Вы можете увидеть это здесь: https://youtu.be/ZoZDCgQwnmQ

Развертывание Angular 2 в лазурие легко

• Запустите ng build --prod, который будет генерировать папку dist со всем, что связано с несколькими файлами, включая index.html.

• Создайте в нем группу ресурсов и веб-приложение.

• Поместите файлы файлов dist с помощью FTP. В лазурном режиме он будет искать index.html для запуска приложения.

Что это. Приложение работает!

Angular 2 Развертывание в страницах Github

Тестирование Развертывание Angular2 Webpack в ghpages

Сначала получите все соответствующие файлы из папки Dist вашего приложения

для меня это были файлы css в папке с ресурсами main.bundle.js polyfills.bundle.js vendor.bundle.js

Затем нажмите эти файлы в созданном вами репо.

1 - Если вы хотите, чтобы приложение запускалось в корневом каталоге - создайте специальное репо с именем [yourgithubusername].github.io и запустите эти файлы в главной ветке

2 - Если вы хотите создать эту страницу в подкаталоге другого брака, кроме корневого, создайте ветки gh-pages и вставьте эти файлы в эту ветвь.

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

В первом случае это будет https://[yourgithubusername].github.io, а во втором случае это будет [yourgithubusername].github.io/[ Имя репо].

Если предполагается, что вы хотите развернуть его с помощью кода sefcond, обязательно измените базовый url pf на файле index.html на dist, поскольку все сопоставления маршрутов зависят от пути, который вы указываете, и его следует установить в [/branchname ].

Ссылка на эту страницу

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Чтобы развернуть ваше приложение Angular2 на производственном сервере, прежде всего, убедитесь, что ваше приложение выполняется локально на вашем компьютере.

Angular2 также может быть развернуто как приложение node.

Итак, создайте файл точки входа node server.js/app.js(в моем примере используется экспресс)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Также добавьте express в качестве зависимости в файле package.json.

Затем разверните его в предпочтительной среде.

Я собрал небольшой блог для развертывания в IIS. выполните ссылка

По состоянию на 2017 год лучше всего использовать angular-cli (v1.4.4) для вашего проекта angular.

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

Вам не нужно добавлять -aot явно, поскольку он включен по умолчанию с -prod.And использование -output-hashing соответствует вашим личным предпочтениям в отношении разрыва кеша.

Вы можете явно добавить поддержку CDN, добавив:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

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

Для быстрого и дешевого способа размещения приложения angular я использую хостинг Firbase. Это бесплатно на первом уровне и очень легко развертывать новые версии с использованием Firebase CLI. В этой статье описываются необходимые шаги для развертывания вашего приложения angular 2 в Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

Короче говоря, вы запускаете ng build --prod, который создает папку dist в пакете и что папка, которая развертывается в Firebase Hosting.

Просто следуйте приведенной ниже ссылке,

Измените страницу Index.html Script Пути файлов Измените путь component.html, чтобы получить ошибку, которая не могла найти местоположение

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy