Multi Bundle App

1. Add a few missing /users routes to the router config

1.1. Configure the router to render the component for the /users/list URL.

1.2. Configure the router to render the component for the /users/add URL.

1.3. Make sure all used view component files are imported into app.js (so that the view custom elements get properly defined at the run time)

2. Use the same layout for all views

Notice that the home view has a header with navigation links and a footer around the space for the main view content. It would make sense to have the same layout for other views as well.

2.1. Configure the router so that it renders the /billing and /users views inside the home view layout.

3. Load the /billing and /users route components lazily

3.1. Create two 'bundle' files: - billing-bundle.js that imports all /billing components - users-bundle.js that imports all /users components

   (remove the individual imports of all /users and /billing components from
   app.js)

3.2. Update the "/billing" and "/users" routes config to lazy load the corresponding view components.

3.3. Check in the DevTools that there are separate network requests when clicking the links.

4. Load the /billing and /users route configuration lazily

4.1. Extract the configuration of the "/billing" and "/users" routes into separate files in the src/routes folder.

4.2. Update the router config to use the /billing and /users routes config from these files (import them statically into app.js).

4.3. Change the static routes configuration imports onto dynamic ones.

5. Navigate to a different view with JavaScript

5.1. Update the component so that it redirects to the home view after adding a new user.

5.2. Update the component so that it redirects to the home view after selecting another user in the UI.

6. Dynamically add / remove routes based on the current user access rights

6.1. Update the config for the "/billing" route to construct child routes at the run time.

6.2. Check if the current user has permissions to access the "invoices" and "events" views. Use user.hasPermission(perm) method from the '/src/api/user' module (you have to import it).

6.3. If the user has no permission for a specific view, make sure it is not added to the router config at all, and render the component instead.

6.4. Update the above config to load the component lazily (only if needed), and to wait for it to be loaded before the route gets rendered.