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

Ответ 1

Вы на самом деле здесь касаетесь двух вопросов в одном. Во-первых, как разместить свое приложение. И как @toskv упомянул о своем очень широком вопросе, на который нужно ответить, и зависит от множества разных вещей. Второй - более конкретный - как вы готовите версию приложения для развертывания. Здесь у вас есть несколько вариантов:

• Развертывание как есть. Просто это - никакая минификация, конкатенация, название mangling и т.д. Транспарируйте весь ваш проект ts, скопируйте все полученные в результате js/css/... источники + зависимости с сервером хостинга, и ваши успехи идут.
• Развертывание с использованием специальных инструментов для комплектации. Как webpack или systemjs builder. Они приходят со всеми возможностями, которые отсутствуют в # 1. Вы можете упаковать весь свой код приложения в пару файлов js/css/..., которые вы укажете в своем html. Systemjs builder даже позволяет избавиться от необходимости включать systemjs как часть вашего пакета развертывания.

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

Я знаю, что это звучит грязно - чтобы помочь вам начать С# 2, вот два действительно хороших примера приложений:

Конструктор SystemJS: angular2 seed

WebPack: angular2 webpack startter

Посмотрите, как они это делают - и, надеюсь, это поможет вам найти способ объединения приложений, которые вы делаете.

Ответ 2

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

ng build 

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

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

ng build --prod

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

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

Ответ 3

С 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:)

Ответ 4

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

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

Ответ 5

Вы получаете самую маленькую и самую быструю загрузочную комплектацию путем компиляции с компилятором 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

Ответ 6

Чтобы развернуть ваше приложение 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. выполните ссылка

Ответ 7

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

Ответ 8

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

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

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

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

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

Ответ 9

Для быстрого и дешевого способа размещения приложения 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.

Ответ 10

По состоянию на 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 для хостинга, который значительно быстрее.

Ответ 11

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

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

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