КАК ДА ИЗПОЛЗВАТЕ И НАСЪРЧАЕ ПРОЕКТ ОТ АНГУЛЯР 2 И 4 НА СЪРВЪР

В онзи момент, когато видите нещо, което ви е учудило, получихте предмета, но се забихте в процеса на използване / изпълнение на това, което имате.

Точно с това се сблъсках. Чух за Angular 2, гмурнах се в него, научавайки и прилагайки готините функции. Това беше наистина страхотно изживяване, само да завърша проект с него и се забихте в хостинг на проекта. Хмммм!

В тази статия ще споделя моя опит как разгърнах и домакин на проект Angular 2.

ПРЕДПОСТАВКА: Трябва да сте завършили проект Angular 2 или 4 и да разполагате със сървъра.

  1. Активиране на режима на производство

Ъгловите приложения се изпълняват в режим на разработка по подразбиране.

Преминаването към производствен режим може да го накара да работи по-бързо, като деактивира проверки за специфични разработки, като например циклите за откриване на двойни промени.

За да активирате режима на производство при стартиране от разстояние, редактирайте кода в src / main.ts. към кода по-долу:

// Активиране на режима на производство, освен ако не работи локално
 if (! /localhost/.test (document.location.host)) {enableProdMode (); }

2. Редактирайте и конфигурирайте приложението си за хостинг

Уверете се, че сте редактирали / модифицирали пътя към отдалечения ви сървър.

Редактирайте своя index.html (съветвам ви да направите дубликат), за да заредите всички node_modules от сървъра, но ако сте създали приложението си с помощта на ng @ angular / cli, добавете следните кодове в главния си маркер.


Заменете скрипта systemjs.config.js със скрипт, който зарежда systemjs.config.server.js, НО ако сте създали приложението си с помощта на ng @ angular / cli, Създайте нов файл с име src / systemjs.config.server.js и реферирайте го и в главата си

 

Добавете следния код към systemjs.config.server.js

/ **
* Системна конфигурация за внедряване без инсталиране на node_modules
* Вместо това зарежда umd пакети от мрежата
* Настройка според нуждите на вашето приложение.
* /

(функция (глобална) {
System.config ({
пътеки: {
 'Npm:': 'https://unpkg.com/' // пътеката служи като псевдоним
}

// map казва на системния товарач къде да търси нещата

карта: {
app: „app“, // местоположение на прехвърлени файлове с приложения
// ъглови сведени до минимум пакети umd
„@ Angular / core“: „npm: @ angular / core / bundles / core.umd.min.js“,
"@ Ъглово / общ":
"NPM: @ ъглово / общата / снопове / common.umd.min.js ',
„@ Angular / compiler“: „npm: @ angular / compiler / bundles / compiler.umd.min.js“,
'@ Angular / platform-browser': 'npm: @ angular / platform-browser / bundles / platform-browser.umd.min.js',
„@ Angular / платформа-браузър-динамичен“: „npm: @ ъглова / платформа-браузър-динамична / пакети / платформа-браузър-динамична.umd.min.js“,
„@ Angular / http“: „npm: @ angular / http / bundles / http.umd.min.js“,
„@ Angular / router“: „npm: @ angular / router / bundles / router.umd.min.js“,
'@ Angular / router / upgrade': 'npm: @ angular / router / bundles / router-upgrade.umd.min.js',
'@ Angular / form': 'npm: @ angular / form / bundles / form.umd.min.js',
"@ Ъглова / ъпгрейд":
"NPM: @ ъглови / ъпгрейд / снопове / upgrade.umd.min.js ',
'@ Angular / upgrade / static': 'npm: @ angular / upgrade / bundles / upgrade-static.umd.min.js',

// други библиотеки
'Rxjs': 'npm: rxjs@5.0.1',
'Angular-in-memory-web-api': 'npm: angular-in-memory-web-api / bundles / in-memory-web-api.umd.js'
}

// пакетите казват на системния товарач как да се зареди, когато няма име на файл и / или няма разширение

пакети: {
приложение: {
main: „./main.js“,
defaultExtension: 'js'
}

rxjs: {
defaultExtension: 'js'
}
}
});
})(това);

3. Създайте своето приложение

След това стартирайте командата за изграждане на вашия проект, като използвате ng build

След успешно изграждане, той ще създаде dist папка във вашата директория, която съдържа всички необходими файлове, изградени от вашия проект.

4. Качете приложението си

Вече можете да качите всички файлове в папката / dist на вашия сървър.

След като сте качили приложението, моля, имайте предвид, че ако сте качили файловете в папка, която не е относителна към домейна, ще трябва да редактирате маркера във вашия index.html. Вижте пример по-долу:

Моят домейн е http://test.abc.com, който сочи / обществен / тест / и качих приложението в папка, наречена ъглова, след което осъществявам достъп до приложението чрез http://test.abc.com/angular, I ще трябва да редактирате базовия маркер в моя index.html, за да има , за да може да се стартира.

Ето! Тествайте каченото си приложение. Чувствайте се свободни да коментирате всяка стъпка, която не работи или няма предизвикателство.

Кредит: Технически хъб RAD5
Източник: Ъглова официална документация