Uruchom Angular2 jako aplikację statyczną w przeglądarce bez serwera.

Jak rozumiem koncepcję Angular2 - transponuje pliki TypeScript do plików .js. Zasadniczo powinno być możliwe kompilowanie, pakowanie, a następnie uruchamianie tej aplikacji Angular2 jako aplikacji statycznej z Wiadra AWS S3, GitHub lub innego statycznego źródła.Uruchom Angular2 jako aplikację statyczną w przeglądarce bez serwera.

Jeśli uruchomię aplikację Angular2 na serwerze węzłowym (z komendą "cli" ng serve "), to zajmie ona 500 MB pamięci RAM na serwerze - to" Cześć, często! " - czy naprawdę tak jest! Jakie korzyści daje ta framuga, na przykład w przypadku React, która wymaga tylko przeglądarki.

Nie mogę znaleźć niczego przydatnego w obsłudze aplikacji Angular2 jako statycznego skompilowanego HTML + JS.

Może możesz mi pomóc to zrozumieć i rozwiązać?

Wielkie dzięki!

Maris

Źródło

2016-10-13 Maris

Istnieje [Webpack] (https://angular.io/docs/ts/latest/guide/webpack.html) do dołączania plików js. Poza tym proponuję użyć [Angular 2 with Dart] (https://angular.io/docs/dart/latest/quickstart.html), ponieważ wszystko zostanie automatycznie spakowane i opublikowane w folderze 'build'. – rinukkusu

Zarówno React, jak i Angular 2/4 kompilują się do kodu statycznego. W większości przypadków kompilacja jest obsługiwana za pomocą jakiegoś narzędzia do budowania, takiego jak pakiet webowy, ale na koniec aplikacji frontowej można obsługiwać ze statycznej lokalizacji, takiej jak wiadro S3. – PenguinSource

Uruchom komendę BUILD do BUNDLE/zbudować

ng build

lub kompilacji produkcyjnej/pakiet

ng build --prod

będzie budować/pakiet aplikacji do podziałowi aplikacji.

Po zakończeniu zajrzyj do katalogu głównego aplikacji dla folderu dist, który będzie zawierał wszystko, co aplikacja musi uruchomić poza serwerem węzła, powiedz jak instancja tomcat.

Aktualizacja

Dzięki komentarzem @Maris, upewnij się, że ścieżki plików są w stosunku do bieżącego katalogu zamiast w stosunku do katalogu głównego.

Po prostu uruchom to polecenie, aby zmienić element base href w pliku index.html.

ng build --prod --base-href ./

Źródło

2016-10-13 15:20:39

Yess, wielkie dzięki - jest to właściwe i najprostsze rozwiązanie! – Maris

@Maris Sure! Cieszę się, że mogę pomóc! –

Próbowałem tego wcześniej, ale podczas otwierania pliku dist/index.html na moim komputerze, pokazywał on tylko "Ładowanie ..." i tak naprawdę nie ładował się - więc założyłem, że nadal potrzebuje serwera. Ale teraz po twojej odpowiedzi sprawdziłem konsolę JavaScript i odkryłem, że nie może znaleźć plików .js, ponieważ są one w ścieżce bezwzględnej "/ ...", a nie w stosunku do bieżącego katalogu. Ale jak tylko te pliki zostaną znalezione, wszystko działa jak urok! ;) – Maris

jest to świetny sposób, aby wyeksportować swoją aplikację, wystarczy trochę zmienić otwarty index.html i zmienić

<base href="/">

<base href="./">

Źródło

2017-05-03 14:08:15

nice! Dziękuję Ci bardzo! – Riscie

Dobrze, ale lepiej jest nadać mu w momencie polecenia nie ręcznie, jak w poniższej odpowiedzi tutaj https://stackoverflow.com/a/45525661/5043867 –

Działa to dla mnie:

$ ng build --prod --base-href ./

Źródło

2017-08-05 19:26:09

How to serve an Angular 2 dist folder index.html do obsługi folderu folderu Angular 2 dist.html

Jeśli nie jest to oczywiste dla wszystkich, a nie dla mnie. Jeśli chcesz uruchomić folder dist lokalnie po jego zbudowaniu i naprawieniu go, użyj czegoś takiego jak http-server i wskaż go folderowi dist, a nie konkretnemu plikowi.Z cmd okna w folderze projektu

c:\user\myProject> http-server ./dist

jak wyjaśniono w linku

Źródło

2017-09-19 11:05:07 vtechmonkey

To niemożliwe myślę podczas błędu w nowoczesnych przeglądarek:

Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History':...

szkoda

Źródło

2017-12-20 17:13:26

Uruchom Angular2 jako aplikację statyczną w przeglądarce bez serwera.

Odpowiedz

Powiązane problemy