Как развернуть angular2 приложение, построенное с помощью angular -cli

Я создал n новое приложение angular, используя angular -cli.

Я завершил приложение и просмотрел его с помощью ng-serve, он отлично работает.

После этого я использовал ng build -prod, который генерирует папку dist. Когда я помещаю эту папку в xampp для запуска, она не работает. Я обнаружил, что нет файлов *.js, которые должны быть там после преобразования *.ts → *.js(я полагаю).

Я прикрепил скриншот, в котором на левой стороне отображается папка src со всеми файлами .ts. В середине отображается папка "dist" и снимок экрана браузера.

Пожалуйста, объясните, как я могу создать полностью работающее приложение из angular -cli, которое я могу запустить на моем сервере xampp.

Скриншот:

Screenshot

Ответы

Ответ 1

метод 1 (популярный): Если вы используете angular -cli, то

ng build --prod

сделает трюк. Затем вы можете скопировать все из папки .dist в папку вашего сервера

метод 2:

вы можете использовать http-сервер для вашего приложения. Чтобы установить http-сервер

npm install http-server -g

и после перехода в папку проекта

http-server ./dist

он будет обслуживать все файлы в вашей папке. вы можете проверить терминал, какой IP-адрес и порт вы можете использовать для доступа к приложению. Теперь откройте свой браузер и введите

ip-adress:port/index.html

Надеюсь, это поможет вам:)

Бонус: Если вы хотите развернуть в герою. Прочтите этот подробный учебник https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

Ответ 2

Для тех, кто ищет ответ для хоста IIS...

Создайте свой проект

ng build --prod

Скопируйте все содержимое папки. /dist в корневую папку вашего сайта, поддерживая структуру папок внутри. /dist (т.е. ничего не перемещайте). Использование версии angular -cli Beta-18 всех активов (изображения в моем случае) были скопированы в. /dist/assets во время сборки и были правильно указаны в их содержащих компонентах.

Ответ 3

Проверьте файл index.html и отредактируйте эту строку

<base href="/[your-project-folder-name]/dist/">

Ваш контент должен загружаться должным образом. Затем вы можете загружать стили во всем мире

Вы должны установить base href, как рекомендовано Johan

ng build --prod --bh /[your-project-folder-name]/dist/

Ответ 4

Вот пример с 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"
}
  1. Создайте сервер 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);
  1. Создайте удаленное устройство Heroku и нажмите на приложение depoy.
heroku create
git add .
git commit -m "first deploy"
git push heroku master

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

Ответ 5

Используйте ng build с флагом --bh

Устанавливает базовый тег href в/myUrl/в вашем index.html:

ng build --base-href /myUrl/
ng build --bh /myUrl/

Ответ 6

Я использую последнюю версию Angular -CLI (во время этого ответа его 1.0.0Beta-18)

Как работает эта версия, она помещает все в файлы пакета и вызывает их в файле index.html. После этого вы должны скопировать свои активы в папку dist (по какой-то причине это не так). Наконец, дважды проверьте свой базовый href, убедитесь, что он установлен в том, что нужно установить, и тогда он должен работать. Это то, что сработало для меня, и я тестировал как Apache, так и Node.

Ответ 7

В настоящее время я использую Angular -CLI 1.0.0-beta.32.3

в корневом каталоге вашего проекта npm установить http-server -g

после успешного запуска установки ng build --prod

при успешном запуске сборки http-server./dist