SÅDAN UDSÆTTES OG VÆSES ET ANGULÆR 2 eller 4 PROJEKT PÅ EN SERVER

I det øjeblik, du ser noget, der wowed dig, du fik varen, men blev fast i processen med at bruge / implementere det, du fik.

Det var præcis, hvad jeg stødte på. Jeg hørte om Angular 2, jeg dykkede ind i det, lærte og implementerede de seje funktioner. Det var virkelig en fantastisk oplevelse, kun for at afslutte et projekt med det og fik sidst som vært for projektet. Hmmmm!

I denne artikel vil jeg dele min oplevelse om, hvordan jeg implementerede og var vært for et Angular 2-projekt.

PRÆKVISIT: Du skal have afsluttet et vinkel 2 eller 4 projekt og om implementering til serveren.

  1. Aktivér produktionstilstand

Vinkel-apps kører som standard i udviklingsfunktion.

Skift til produktionstilstand kan få det til at køre hurtigere ved at deaktivere udviklingsspecifikke kontroller, såsom detekteringscykler med dobbelt ændring.

Rediger koden i src / main.ts for at aktivere produktionstilstand, når du kører eksternt. til koden herunder:

// Aktivér produktionstilstand, medmindre den kører lokalt
 if (! /localhost/.test (document.location.host)) {enableProdMode (); }

2. Rediger og konfigurer din app til hosting

Sørg for, at du har redigeret / ændret stien til din fjernserver.

Rediger dit indeks.html (jeg anbefaler, at du kan oprette duplikat) for at indlæse alle node_moduler fra serveren, men hvis du har oprettet din app ved hjælp af ng @ angular / cli, skal du tilføje følgende koder i dit hovedtag.


Erstat scriptet systemjs.config.js med et script, der indlæser systemjs.config.server.js, MEN hvis du har oprettet din app ved hjælp af ng @ angular / cli, Opret en ny fil med navnet src / systemjs.config.server.js og henvis det også til dit hovedmærke

 

Føj følgende kode til din systemjs.config.server.js

/ **
* Systemkonfiguration til distribution uden installation af node_moduler
* I stedet for indlæses umd-pakker fra internettet
* Juster efter behov til dit applikationsbehov.
* /

(funktion (global) {
System.config ({
stier: {
 ‘Npm:’: ‘https://unpkg.com/’ // sti fungerer som alias
},

// kort fortæller systemlæsseren, hvor man skal kigge efter ting

kort: {
app: 'app', // placering af transpilerede appfiler
// vinkel minimerede umd bundter
‘@ Vinkel / kerne’: ‘npm: @ vinkel / kerne / bundter / core.umd.min.js’,
’@ Kantet / fælles’:
’NPM: @ kantet / fælles / bundter / common.umd.min.js’,
'@ Vinkel / compiler': 'npm: @ vinkel / compiler / bundles / compiler.umd.min.js',
'@ Vinkel / platform-browser': 'npm: @ vinkel / platform-browser / bundler / platform-browser.umd.min.js',
'@ Vinkel / platform-browser-dynamisk': 'npm: @ vinkel / platform-browser-dynamisk / bundter / platform-browser-dynamisk.umd.min.js',
'@ Vinkel / http': 'npm: @ vinkel / http / bundles / http.umd.min.js',
'@ Vinkel / router': 'npm: @ vinkel / router / bundles / router.umd.min.js',
'@ Vinkel / router / opgradering': 'npm: @ vinkel / router / bundter / router-opgradering.umd.min.js',
'@ Vinkel / former': 'npm: @ vinkel / former / bundter / forms.umd.min.js',
’@ Kantet / opgradering’:
’NPM: @ kantede / opgradere / bundter / upgrade.umd.min.js’,
'@ Vinkel / opgradering / statisk': 'npm: @ vinkel / opgradering / bundter / opgradering-statisk.umd.min.js',

// andre biblioteker
‘Rxjs’: ‘npm: rxjs@5.0.1’,
'Vinkel-i-hukommelse-web-api': 'npm: vinkel-i-hukommelse-web-api / bundles / in-memory-web-api.umd.js'
},

// pakker fortæller systemlæsseren, hvordan man indlæser, når der ikke er noget filnavn og / eller ingen udvidelse

pakker: {
app: {
hoved: ‘./main.js’,
defaultExtension: 'js'
},

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

3. Bygg din app

Kør derefter build-kommandoen på dit projekt ved hjælp af ng build

Når det er lykkedes at oprette, opretter det en dist-mappe i dit bibliotek, der indeholder alle nødvendige filer, der er bygget fra dit projekt.

4. Upload din app

Du kan nu uploade alle filerne i mappen / dist til din server.

Når du har uploadet appen, skal du være opmærksom på, at hvis du uploade filerne i en mappe, der ikke er relativt til domænet, skal du redigere -koden i dit indeks.html. Se eksempel nedenfor:

Mit domæne er http://test.abc.com, der peger på / public / test / og jeg uploadede appen i en mappe kaldet kantet, så får jeg adgang til appen via http://test.abc.com/angular, jeg bliver nødt til at redigere basismærket i mit indeks.html for at have for at kunne køre.

Værsgo! Test din uploadede app. Du er velkommen til at kommentere ethvert trin, der ikke fungerer eller har udfordring med.

Kredit: RAD5 Tech Hub
Kilde: Angular Official Documentation