Angular-Routing | Pluralsight course | Command Line Interface library

I've been running in some confusing behavior when chaining calls to the Angular Router's navigate() function. My use case is a large application that updates part of its state in the URL, where several services are responsible for managing their state.

As such, we may have several calls to navigate([], {queryParams: ..., queryParamsHandling: 'merge'}) within the same zone.js execution window.

While this usually works fine, I run into weird behavior when a router command is provided in between, such as the following stackblitz example:

You can attach data to a route like this:

I have literally no idea why this is so hard... why we're officially not supposed to care about the route from anywhere but inside the routed component.... BUT:

I'm trying to write a service to my header (and any other component) can know the current route and params. Would be nice to know the currently loaded component as well but that's less important.

I have tried various solutions from this thread and the one that got me closest was a paraphrase from RoyiNamir but as you can see from the attached stackblitz, it only reports the param on page load, not on subsequent navigation despite the subscription and the presence of NavigationEnd (though I'm admittedly super green when it comes to interpreting routing events, and to rxjs as well).

I'm also unsure of how to pass the current route in the returned object along with the params.

Code:

This is a demo of the problem:

https://stackblitz.com/edit/angular-routing-with-resolver-observable?file=src%2Fapp%2Fpost-resolver.service.ts

Switching out this.observeLoading$ with of(false) makes it work, so I think it has something to do with the fact that this.observeLoading$ is notified by a ReplaySubject that can provide more than one notification ...

Here are more details:

First this does resolve:

What I'm trying to do is make a dropdown that calls on the https://swapi.co/ API and once an item is selected it will display the information in the footer component. I'm really new to angular and after spending the last 8 hours trying to learn this I'm kinda lost.

body.component.html

To preface: all of what I'm about to describe works locally, but does not work when my code is deployed in a Windows environment in an Azure web app service. Also, I have read the answer to this question, and I don't believe it applies to my particular situation; I am not using any custom domains.

For more background: I am not containerizing my app; I am building and deploying code with Azure DevOps.

I have a relatively simple Angular 7 (CLI) app with some simple routing. I have a number of routing modules that are imported into their respective feature modules, and then the feature modules are imported into the main/core app module: app.module.ts.

In most cases, I am navigating users to a component at a route such as /aboutUs/ourMission or /support/donations. These routes work well locally and remotely.

What doesn't work well remotely are routes like /admin or /register.

app.module.ts:

I'm not even sure how to name the problem I have. I'd also like to avoid using secondary routes. I have been trying to create something like 2-step routing in an angular application.

In theory, this is supposed to be nested routing. But I think the assumption is that if you use a componentless route, then the child routes are routed to the parent outlet, which doesn't work. Using the same component in each feature route is solution #2. I'd like to have something in between, which is the same 'wrapper' for all the componentless child routes.

The outer router has 2 routes:

• /login: shows the login component
• everything else should be wrapped in an app shell. The app shell is a component with a sidebar, a navbar, and a router-outlet where all the actual content should go

The application has multiple feature modules and ideally, each module should define its routes. An example could be the user profile:

• /profile/settings: shows the settings inside the shell
• /profile/account: shows the account details inside the shell

Define a common routing module for every module, e.g. AppRoutingModule:

I'm trying to set up a spinner to show for requests in angular 5. So far, I've been using the tutorial found here:

https://www.amadousall.com/angular-routing-how-to-display-a-loading-indicator-when-navigating-between-routes/

It seems very straight forward; set a boolean to evaluate to either true or false depending on the event. The only change I really needed to make for my code was to ngx-spinner in the html instead of mat-progress-bar. However, so far I've been unable to make the spinner show up.

Here is the code for reference, though it is pretty much identical to the link's:

When using Ionic 4 with Angular. You can use the Angular router instead of Ionic routing with NavController. I started developing an Ionic 3 application for a while now. Now I want to migrate my project to use Ionic 4 instead. How to properly migrate to Angular routing?