Jak renderować strony w statycznym kodzie HTML dla aplikacji Angular?

Question

CO: Buduję stronę internetową z Angular i chcę ją wdrożyć na czysto statycznym serwerze (takim jak Amazon S3). Muszę wstępnie renderować wszystkie strony HTML witryny przed wdrożeniem i nie jestem pewien, jak postępować.

JAK: Mój obecny pomysłem jest mieć jakiś robot odczytać plik jak sitemap.xml aby pobrać listę wszystkich adresów URL w witrynie, a następnie wysyłać żądania do tych adresów URL do serwera, na którym jest zainstalowany node.js i instancji moja aplikacja Angular (Universal) jest uruchomiona.

PYTANIE: Czy brzmi to jak właściwy sposób na zrobienie tego? Czy brakuje mi ważnego kroku? Czy istnieją jakieś biblioteki lub pakiety npm, które mogą pomóc w tym zadaniu?

Co zaskakujące, nie mogłem znaleźć dokumentacji dotyczącej wstępnego renderowania dla Angular (renderowanie tylko RE). Przyjrzałam się również generatorom statycznych stron, ale inspiracje są dla nich używane, a wszystkie używają statycznych plików (NIE listy adresów URL). Ponadto nie chcę korzystać z usług innych firm, takich jak prerender.io.

Answer 1

Właśnie ukończyłem podobne zadanie za pomocą Angular 4. Witryna jest hostowana za pomocą stron Github i nie ma zaplecza. Czuć się swobodnie używać go jako przykład: repo i zobowiązać który implementuje pre-rendering: 0d81d28

musiałem realizować następujące zmiany:

• Tworzenie serwera modułu aplikacji i przeglądarki aktualizacji modułów aplikacji w sposób opisany w kątowego uniwersalnego przewodnika
• Wykonaj wstępny mechanizm renderowania. Wstępny mechanizm renderowania sprawdza konfigurację routera i pobiera dostępne trasy aplikacji.
• Dla każdego renderowania wstępnego adresu URL generuje plik html przy użyciu renderModuleFactory z modułu @angular/platform-server i zapisuje wygenerowany kod HTML w odpowiedniej lokalizacji.
• Jak Bhargav wspomniał o statycznych plikach serwer nie obsługuje żadnego adresu URL. Więc jeśli potrzebujesz adresu URL takiego jak /community/overview, to html powinien zostać zapisany w /community/overview/index.html. Nie działały macierzy parame- trów macierzy :(Musiałem przenieść paramery macierzy na trasę URL, np.zamiast /docs;doc=overview.html użyć /docs/overview.html
• Aby naprawić irytujące migotanie po załadowaniu strony, dodaj initialNavigation: 'enabled' do konfiguracji routera: RouterModule.forRoot([{ path: '', ...}], { initialNavigation: 'enabled' }). Nadal nie mam pojęcia, czym jest InitialNavigation i dlaczego pomaga.

Mam nadzieję, że to pomoże.

Answer 2

Będziesz potrzebować/chcesz specjalnej usługi hostingowej, która kieruje wszystkie żądania http do głównego pliku index.html. Plik zawierający wszystkie stopki nagłówka i skrypty Angular lub SPA. W przeciwnym razie po odświeżeniu lub przejściu do URL-a innego niż "twoja-strona"/"root" skończy się dając ci 404 błąd.

Jest to oczywiście główny problem, jeśli używasz stanu push html5 w zasadzie, jeśli twój frontowy router nie używa adresów URL hash "twoja-witryna/# /", ale nadal możesz uruchomić, aby wydać, nawet jeśli używasz hasha adres URL. O ile środowisko serwerowe nie obsługuje wyświetlania głównego pliku index.html dla wszystkich html lub brak zgodnych żądań.

Istnieje kilka sposobów na obejście problemu opisanego powyżej, ale na pewno go nie polecam. Zasadniczo ponownie podajesz ten sam plik index.html na 404 stronach, jeśli usługa środowiska serwerowego obsługuje tę funkcję.

Więc w zasadzie trzeba będzie skonfigurować własny serwer lub skorzystać z usługi, takie jak [akrobacyjne] [1]

może zamiast używać ramy SPA takich kanciastych użycia statycznego generator WITRYNY.