Как развернуть приложение Angular 2, разработанное в Typescript для производства?

Я новичок в Angular 2. Я смущен тем, как Angular 2 работает в рабочей среде.

Каковы предпосылки для запуска приложения Angular 2 на рабочем сервере?
Возможно ли развертывание приложения на сервере IIS или требуется сервер node?
После компиляции файла на машине разработки с помощью node нам нужно развернуть оба .js и .ts для производства?

Ответы

Ответ 1

Я использую JSPM для подготовки моих проектов angular2. Другие популярные инструменты, такие как JSPM, включают webpack и browserfy. Одной из важных задач, которые будет выполняться JSPM, является объединение различных модулей, составляющих ваш проект angular2. Я также установил флаг selfExecutingBundle в true и JSPM создаст один связанный js файл (например, myApp.bundled.js), и оттуда я его уменьшу (myApp.bundled.min.js), и эта ссылка script используется в файле index.html.

<html>

<head>
    <title>Hello Angular World</title>
</head>
<body>
<div>
    <my-app>Loading...</my-app>
</div>
    <script src="/js/myApp.bundle.min.js"></script>
</body>

</html>

Ответ 2

Angular 2 приложения написаны в TS, но браузер только понимает JavaScript в конце. Таким образом, любой проект TS трансформируется в первое событие JavaScript во время разработки.

Вы можете запустить приложение angular 2 на любом сервере.

Вам нужно только развернуть .js файлы, так как браузер не будет анализировать файлы .ts.

Ответ 3

Существует много проектов стартовых семян, которые включают в себя возможность обслуживать и строить ваш проект. Я использую (и очень доволен) https://github.com/antonybudianto/angular2-starter

Здесь вы можете найти много других: https://github.com/timjacobi/angular2-education#boilerplates

Ответ 4

это очень просто загрузить приложение на производство. шаги:

создайте приложение, используя https://angular.io/docs/ts/latest/guide/webpack.html
Если ваше приложение имеет маршрутизатор, не забудьте использовать {useHash: true}, чтобы предотвратить загрузку страницы с ошибкой. например: RouterModule.forRoot(маршруты, {useHash: true}).
введите npm в корневой путь вашего проекта.
он автоматически создает папку dist в корневом каталоге проекта.
не нужно настраивать сервер node на производство. вы можете просто выбрать сервер apache и загрузить содержимое папки dist.

Ответ 5

Сервер приложений (для моего ответа я использовал Tomcat), node.js и angular -cli (путем запуска "npm install -g angular-cli" )
Вы можете установить на другие серверы
Только файлы .html,.js и .map(по крайней мере, для моего решения)

Это работает лучше, если вы создали приложение, используя angular -cli инструкции, показанные здесь. В корневом каталоге приложения запустите следующую команду ng build --env=prod, и это приведет к пакету через webpack развертываемые элементы в каталоге \dist.

Скопируйте каталог \dist и вставьте его в {CATALINA_HOME}\webapps. Переименуйте \dist в имя папки, например \foo. Откройте \foo\index.html и отредактируйте строку base-href, чтобы представить ваше новое имя каталога:

<base href="/foo/">

Запустите Tomcat через startup.bat или выбранное вами предпочтение и перейдите к http://localhost:8080/foo/, и вы сможете просмотреть свой Angular 2.

Примечание. Если вы не создали проект с помощью команды ng new, я прочитал, где выполняется ng init, прежде чем сборка позволит вам выполнить шаги. Я не тестировал это сам, хотя.

Ответ 6

Все typescript файлы будут переданы в js файлы при разработке приложения транспилером, поэтому вам не нужны файлы ts в процессе производства.

Также, когда вы закончите разработку, все, что вам нужно сделать, это сделать пакет dist с помощью некоторого инструмента для комплектации, например webpack-starter или angular2-seed.

Затем вы развертываете этот пакет на свой сервер.

В вышеупомянутых пакетах есть много информации о том, как можно развернуть их приложение angular2 для производства.

Надеюсь, что это поможет.