[Fixed] Static landing page on Angular

Issue

I’m learning Angular and I’m having trouble to set a static landing page. What I would like is to have a static html landing page that has 2 buttons that call /login and /signup
and from there I would like to bootstrap angular app (calling app-root). I serve my app with nginx.

1- Where do I set my landing page? I tried adding a landing.html at root level with index.html, and changed at angular.json :

my landing.html on project root

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/",
        "index": "src/index.html", <--- //changed for src/landing.html
        "main": "src/main.ts",

I read other questions where they used index.html as a static page, but I could not understand how to call later for my app-root (that bootstrap my SPA), anyway when I delete app-root from my index.html I have a blank page with this error:

Error: The selector "app-root" did not match any elements 
    at DefaultDomRenderer2.selectRootElement (vendor.js:201546)
    at BaseAnimationRenderer.selectRootElement (vendor.js:141558)
    at locateHostElement (vendor.js:170017)
    at ComponentFactory$1.create (vendor.js:188576)
    at ApplicationRef.bootstrap (vendor.js:194164)
    at vendor.js:193812
    at Array.forEach (<anonymous>)
    at PlatformRef._moduleDoBootstrap (vendor.js:193811)
    at vendor.js:193770
    at ZoneDelegate.invoke (polyfills.js:572)

If someone can give me some light, I really would like to understand where the magic happens to use a static landing page and as a second step (login or signup) calls my SPA.

PS1.: I did not set any LandingModule or this.router.url == ‘/landing’ or this.router.url == ‘/index’

PS2.: if someone knows also what to do at the nginx after…

Thanks!!!

Solution

Here is option to build everything in Angular without Nginx

• Create a App/Home component, which renders your landing page including Login & Register buttons.
• Build a normal app/routing for Login & Register.
• During compile time (ng build), pre-render the App component using AppShell technique.

Here is blog for your reference https://medium.com/technext/boost-your-angular-app-using-appshell-217651af6698