Angular 6: Multi Page Application (MPA) is possible?
Asked Answered
B

1

21

After spending the whole day on Google, my question remains unanswered.

As I am new to creating Angular app using version 6.0.4. my first and simple question is:

  1. Is it possible to configure Angular app with multilevel landing pages?

    Example: Without exposing the links on top nav bar of the root page, I need direct links to these pages where the users have their own different menus. like: WordPress/admin panel is different than its website.

    • /home for public view
    • /admin for admin section after login
    • /customer for customer section after login

this is because I found that there is only one app.component.html file where we can include our components using Routing but with static navigation bar on the top.

  1. If not:

    How to run multiple apps created for all above 3 section can be run under the same url:port?

Blown answered 10/6, 2018 at 15:24 Comment(3)
angular.io/guide/routerLatt
@Latt I don't want to expose the top level nav bar pointing to the /home,/admin,/customer pages. it should be a direct link landing on their separate pages where they have their own different menus. For example: wordpress/admin panelBlown
This can be done by creating separate modules for each users and lazy load the module on basis of user. In that case end user will only get files for that particular module. Let me know if sample code is required.Dripdry
B
8

SOLVED

By following this: https://angular.io/guide/lazy-loading-ngmodules

NOTE: at the end must comment out the navigation buttons in the app.component.html

<!--
<h1>
  {{title}}
</h1>

<button routerLink="/customers">Customers</button>
<button routerLink="/orders">Orders</button>
<button routerLink="">Home</button>
-->

<router-outlet></router-outlet>
Blown answered 11/6, 2018 at 18:40 Comment(1)
I know what you mean though. This seems like just a single page. You will have a single HTML file.Linkman

© 2022 - 2024 — McMap. All rights reserved.