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

простой ответ. Используйте угловой CLI и выдайте

ng build 

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

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

ng build --prod

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

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

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

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

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

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

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

1. создайте Экспресс-сервер для обслуживания приложения.

// 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);

1. создать Heroku remote и нажмите, чтобы depoy приложение.

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

здесь рецензия я сделал это более подробно, в том числе как заставить запросы использовать HTTPS и как обрабатывать PathLocationStrategy :)

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

1. создать веб-приложение в Azure
2. создать угловой 2 приложение в vs код.
3. Webpack в пачке.js.
4. загрузить опубликованный профиль сайта Azure xml
5. настройка Azure развертывание с использованием https://www.npmjs.com/package/azure-deploy с профилем сайта.
6. развернуть.
7. вкус крема.

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

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

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

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's 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'));
});

добавить экспресс как зависимость в вашем пакете.файл json.

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

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

вы получаете самую маленькую и быструю загрузку производственного пакета путем компиляции с помощью компилятора Ahead Of Time и tree-shake/minify с rollup, как показано в угловой поваренной книге 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

чтобы развернуть приложение в IIS, выполните следующие действия.

Шаг 1: Создайте свое Угловое приложение с помощью команды НГ построить-прод

Шаг 2: После сборки все файлы хранятся в папке dist вашего пути в приложение.

Шаг 3: создайте папку в C:\inetpub\wwwroot на имя QRCode.

Шаг 4: скопируйте содержимое папки dist в C:\inetpub\wwwroot\QRCode папка.

Шаг 5: Откройте Диспетчер IIS с помощью команды (Окно + R) и типа inetmgr нажмите кнопку ОК.

Шаг 6: щелкните правой кнопкой мыши на веб-сайте по умолчанию и нажмите на Добавить Приложение.

Шаг 7: введите псевдоним 'QRCode' и установите физический путь к C:\inetpub\wwwroot\QRCode.

Шаг 8: Откройте .HTML-код файл и найти строку href="\" и удалить '\ ' .

Шаг 9: Теперь просмотрите приложение в любом браузере.

вы также можете следить за видео для лучшего понимания.

url видео:https://youtu.be/F8EI-8XUNZc

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

1. выполнить НГ построить-прод, который будет генерировать папку dist со всем в комплекте внутри нескольких файлов, включая индекс.формат html.

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

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

С угловой CLI, вы можете использовать следующую команду:

ng build --prod

он создает папку dist со всем необходимым для развертывания приложения.

Если у вас нет практики работы с веб-серверами, я рекомендую вам использовать угловой к облаку. Вам просто нужно сжать папку dist в виде zip-файла и загрузить его на платформу.

Угловое 2 развертывание на страницах Github

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

сначала получить все соответствующие файлы из dist папка вашего приложения, для меня это была : + css файлы в папке assets + главный.пачка.js + полифилл.пачка.js + продавец.пачка.js

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

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

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

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

в первом случае это будет https://[yourgithubusername].github.io и для второго случая это будет[yourgithubusername].github.io/[имя РЕПО].

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

ссылка на это страница

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

С навсегда:

1. Создайте свое Угловое приложение с помощью угловые-интерфейс командной строки в папку dist ng build --prod --output-path ./dist

2. создать сервер.js файл в вашем угловом пути приложения:

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/*', function(req,res) {
       res.sendFile(path.join(__dirname + '/dist/index.html'));
   });
   app.listen(80);
   

3. запустить навсегда forever start server.js

вот и все! ваше приложение должно быть запущено!

если вы тестируете приложение, как я на localhost или у вас будут некоторые проблемы с пустая белая страница Я использую этот:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

пояснение:

ng build

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

ng build --prod --build-optimizer 

это код для производства и уменьшить размер [--build-optimizer] позволяют уменьшить больше кода].

поэтому в конце я добавляю --base-href="http://127.0.0.1/my-app/" to показать приложение, где находится "основной кадр" [простыми словами]. С его помощью вы можете иметь даже несколько угловых приложений в любой папке.

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

короче говоря, вы бежите ng build --prod который создает папку dist в пакете и это папка, которая развертывается на хостинге Firebase.

С 2017 года лучший способ-использовать угловые-интерфейс командной строки (v1.4.4) для вашего углового проекта.

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

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

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

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

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

Я бы сказал, что многие люди с веб-опытом до angular используют для развертывания своих веб-артефактов внутри войны (т. е. jquery и html внутри проекта Java/Spring). Я закончил тем, что сделал это, чтобы обойти проблему CORS, после попытки сохранить мои угловые и остальные проекты отдельно.

мое решение состояло в том, чтобы переместить все содержимое angular (4), сгенерированное с помощью CLI, из my-app в MyJavaApplication/angular. Затем я изменил свою сборку Maven, чтобы использовать Maven-resources-plugin для перемещения содержимое из /angular / dist в корень моего дистрибутива (т. е. $project.строить.каталог}/MyJavaApplication). Угловые нагрузки ресурсов из корня войны по умолчанию.

когда я начал добавлять маршрутизацию в свой угловой проект, я дополнительно модифицировал Maven build для копирования индекса.html из /dist в WEB-INF / app. И, добавил контроллер Java, который перенаправляет все вызовы rest на стороне сервера для индексирования.

если вы развертываете приложение в Apache (Linux server), чтобы вы могли выполнить следующие шаги : выполните следующие шаги:

Шаг 1: ng build --prod --env=prod

Шаг 2. (Копию дистрибутива на сервер) затем создайте папку dist, скопируйте папку dist и разверните ее в корневом каталоге сервера.

Шаг 3. Создает .htaccess файл в корневой папке и вставить в .htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

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

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

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