JAK ZAREGISTROVAT A HOST ANGULÁRNÍ 2 NEBO 4 PROJEKTY NA SERVERU

V tu chvíli uvidíte něco, co vás ohromilo, dostali jste položku, ale uvízli v procesu, jak používat / implementovat to, co máte.

To jsem přesně narazil. Slyšel jsem o Angular 2, ponořil jsem se do toho, učil se a implementoval skvělé funkce. Byl to opravdu úžasný zážitek, pouze dokončit projekt a uvíznout při hostování projektu. Hmmmm!

V tomto článku se podělím o své zkušenosti s tím, jak jsem nasadil a hostil projekt Angular 2.

PREREQUISITE: Musíte mít dokončen projekt Angular 2 nebo 4 a o nasazení na server.

  1. Povolit produkční režim

Ve výchozím nastavení jsou úhlové aplikace spouštěny ve vývojovém režimu.

Přepnutí do produkčního režimu může zrychlit běh zakázáním kontrol specifických pro vývoj, jako jsou cykly detekce duálních změn.

Chcete-li povolit produkční režim při vzdáleném spuštění, upravte kód v src / main.ts. do níže uvedeného kódu:

// Povolí produkční režim, pokud není spuštěn lokálně
 if (! /localhost/.test (document.location.host)) {enableProdMode (); }

2. Upravte a nakonfigurujte aplikaci pro hostování

Ujistěte se, že jste upravili / upravili cestu ke vzdálenému serveru.

Upravte index.html (doporučuji vám vytvořit duplikát) tak, aby se ze serveru načítaly všechny moduly node_modules, ale pokud jste aplikaci vytvořili pomocí ng @ angular / cli, přidejte do své značky head následující kódy.


Nahraďte skript systemjs.config.js skriptem, který načítá systemjs.config.server.js, ale pokud jste vytvořili aplikaci pomocí ng @ angular / cli, vytvořte nový soubor s názvem src / systemjs.config.server.js a odkazujte na ni také ve vaší značce hlavy

 

Přidejte následující kód do svého systemjs.config.server.js

/ **
* Konfigurace systému pro nasazení bez instalace node_modules
* Místo toho načte umd balíčky z webu
* Upravte podle potřeby své aplikace.
* /

(funkce (globální) {
System.config ({
cesty: {
 ‘Npm:’: ‘https://unpkg.com/ '// cesta slouží jako alias
},

// map říká zavaděči systému, kde hledat věci

mapa: {
app: 'app', // umístění transponovaných souborů aplikace
// úhlové minimalizované umd svazky
„@ Angular / core“: „npm: @ angular / core / bundles / core.umd.min.js“,
„@ Úhlové / společné“:
Pm npm: @ angular / common / bundles / 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 / platform-browser-dynamic“: „npm: @ angular / platform-browser-dynamic / bundles / platform-browser-dynamic.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 / forms“: „npm: @ angular / forms / bundles / forms.umd.min.js“,
„@ Úhlové / upgrade“:
Pm npm: @ angular / upgrade / bundles / upgrade.umd.min.js ’,
„@ Angular / upgrade / static“: „npm: @ angular / upgrade / bundles / upgrade-static.umd.min.js“,

// další knihovny
„Rxjs“: „npm: rxjs@5.0.1“,
„Web-api“ s úhlovou pamětí v paměti: „npm: webový api s úhlovou pamětí v paměti / svazky / web-api.umd.js“ v paměti
},

// balíčky sdělují zavaděči systému, jak se má načíst, když neexistuje žádný název souboru nebo žádná přípona

balíčky: {
aplikace: {
main: „./main.js“,
defaultExtension: 'js'
},

rxjs: {
defaultExtension: 'js'
}
}
});
})(tento);

3. Vytvořte aplikaci

Poté spusťte příkaz build v projektu pomocí ng build

Po úspěšném sestavení vytvoří adresář dist ve vašem adresáři, který obsahuje všechny potřebné soubory vytvořené z vašeho projektu.

4. Nahrajte svou aplikaci

Nyní můžete na server nahrát všechny soubory ve složce / dist.

Po nahrání aplikace mějte na paměti, že pokud jste nahráli soubory do složky, která není relativní k doméně, budete muset upravit značku ve svém indexu.html. Viz příklad níže:

Moje doména je http://test.abc.com, která ukazuje na / public / test / a já jsem aplikaci nahrál do složky nazvané úhlové, poté přistupuji k aplikaci přes http://test.abc.com/angular, I bude muset upravit základní značku v mém indexu.html tak, aby bylo možné spustit.

Tady máš! Otestujte nahranou aplikaci. Neváhejte se vyjádřit k jakémukoli kroku, který nefunguje nebo nemá problém.

Kredit: RAD5 Tech Hub
Zdroj: Úhlová úřední dokumentace