jak wdrożyć aplikację kątową2 zbudowaną przy użyciu kątowego-cli

Question

Stworzyłem nową aplikację kątową przy użyciu kąta-cli.

Ukończyłem aplikację i wyświetlam jej podgląd za pomocą polecenia ng-serve, działa idealnie.

Potem użyłem ng build --prod, który generuje folder "dist". Po uruchomieniu tego folderu w Xampp nie działa. Zauważyłem, że nie ma plików * .js, które powinny znajdować się po konwersji * .ts -> * .js (przypuszczam).

Dołączyłem zrzut ekranu, na którym po lewej stronie wyświetla się folder src zawierający wszystkie pliki .ts, Na środku pokazuje folder 'dist' i zrzut ekranu przeglądarki.

Proszę wskazać, w jaki sposób mogę wygenerować w pełni działającą aplikację z kąta-cli, którą mogę uruchomić na moim serwerze xampp.

Zrzut ekranu:

Answer 1

metoda 1 (popularny): Jeśli używasz kątowe-cli, następnie

ng build --prod 

rade. Następnie można skopiować wszystko z .dist folderu do folderu serwera

Metoda 2:

można użyć serwera HTTP, aby służyć swoją aplikację. Aby zainstalować serwer HTTP

npm install http-server -g 

i po przejściu do folderu projektu

http-server ./dist 

będzie służyć wszystkie pliki w folderze. możesz sprawdzić terminal, jaki adres ip i port możesz użyć, aby uzyskać dostęp do aplikacji. Teraz otworzyć przeglądarkę i wpisać

ip-adress:port/index.html 

nadzieję, że pomoże :)

Bonus: Jeśli chcesz wdrożyć w Heroku. Proszę przejść przez to szczegółowy poradnik https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

Answer 2

Używam najnowszej wersji kątowej-CLI (w czasie tego odpowiadać jego 1.0.0Beta-18)

Droga ta wersja działa to stawia wszystko w plikach pakunku i wywołuje je w pliku index.html. Następnie musisz skopiować swoje zasoby do folderu dist (z jakiegoś powodu nie robi tego). Na koniec, sprawdź dwukrotnie swój podstawowy href, upewnij się, że jest ustawiony na to, co trzeba ustawić, a następnie powinien działać. To właśnie dla mnie zadziałało i testowałem zarówno Apache, jak i Node.

Answer 3

Dla każdego, kto szuka odpowiedzi na hosting IIS ...

Budowanie projektu

ng build --prod 

skopiować całą zawartość folderu ./dist do folderu głównego na swojej stronie zachowując strukturę folderów w ./dist (czyli - nie ruszaj niczego wokół). Używanie wersji Beta-18 wszystkich dostępnych zasobów (obrazów w moim przypadku) zostało skopiowanych do pliku ./dist/assets podczas kompilacji i zostało poprawnie odwołane w ich składowych zawierających.

Answer 4

Oto przykład z Heroku:

1. Utwórz konto Heroku i zainstalować CLI

2. Przesuń angular-cli dep do dependencies w package.json (tak, że zostanie zainstalowany po naciśnięciu do Heroku

3. Dodaj skrypt postinstall, który uruchomi się ng build, gdy kod zostanie przekazany do Heroku. Serwer węzłów, który zostanie utworzony w następnym kroku. Spowoduje to umieszczenie statycznych plików aplikacji w katalogu dist na serwerze i późniejsze uruchomienie aplikacji.

"scripts": { 
    // ... 
    "start": "node server.js", 
    "postinstall": "ng build --aot -prod" 
} 

4. Załóż Server Express do obsługi aplikacji.

// 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); 

5. Stworzenie zdalnej Heroku i wsunąć do depoy aplikację.

heroku create 
git add . 
git commit -m "first deploy" 
git push heroku master 

Oto krótki writeup zrobiłem, że ma więcej szczegółów, w tym w jaki sposób zmusić żądań użyć HTTPS i jak radzić PathLocationStrategy :)

Answer 5

Sprawdź plik index.html i zmodyfikować linia

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

Treści powinny być ładowane poprawnie. Następnie można załadować stylów globalnie

Należy ustawić base href zalecane przez Johan

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

Answer 6

użytkowania ng build z flagą --bh

Zestawy baza tag href do/myUrl/index.html w swojej :

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

Answer 7

Obecnie używam Angular-CLI 1.0.0-beta.32.3

w katalogu głównym biegu projektu npm zainstalować serwer HTTP -g

Po udanej instalacji run ng build --prod

po udanej kompilacji metę http -server ./dist

Answer 8

Mamy różne opcje wdrożenia aplikacji kątowej. Podsumowałem punkty, aby wdrożyć go w IIS.

Angular 2 app deploy into IIS