How to pre-render pages in static HTML for an Angular app?

后端 未结 1 624
伪装坚强ぢ
伪装坚强ぢ 2021-02-14 05:52

WHAT: I am building a website with Angular and I’d like to deploy it on a purely static server (such as Amazon S3). I need to pre-render all HTML pages for the

相关标签:
1条回答
  • 2021-02-14 06:23

    I've just completed similar task using Angular 4. Site is hosted using Github pages and has no backend. Feel free to use it as example: repo and commit which implements pre-rendering: 0d81d28

    I had to implement following changes:

    • Create server app module and update browser app module as described in angular universal guide
    • Implement pre-renderer script. Pre-renderer inspects router configuration and retrieve available app routes.
    • For each URL pre-render generates html file using renderModuleFactory from @angular/platform-server module and saves generated html in appropriate location.
    • As Bhargav mentioned static files server won't support any URL. So if you need to have URL like /community/overview then html should be saved into /community/overview/index.html. Angular matrix params wan't work :( . I had to move matrix params into URL route e.g. instead of /docs;doc=overview.html use /docs/overview.html
    • In order to fix annoying flickering after page loading, add initialNavigation: 'enabled' into router configuration: RouterModule.forRoot([{ path: '', ...}], { initialNavigation: 'enabled' }). I still have no idea what initialNavigation is and why it helps.

    Hope this helps.

    0 讨论(0)
提交回复
热议问题