How do I use Edgecast Azure CDN to fix the route of Angular 2 app?

const appRoutes: Routes = [ 
 {path:'', component: LoginComponent },
 {path:'dashboard', component: DashboardComponent },
 {path:'application', component: ApplicationComponent },
 {path:'decision', component: DecisionComponent },
];

export const routing = RouterModule.forRoot(appRoutes);

ng build --base-href /deploy/ --prod 

https://xxyz.blob.core.windows.net/deploy/favicon.ico
https://xxyz.blob.core.windows.net/deploy/index .html
https://xxyz.blob.core.windows.net/deploy/assets/Logo.svg
https://xxyz.blob.core.windows.net/deploy/main.68dbes8ef20 .bundle.js
https://xxyz.blob.core.windo ws.net/deploy/styles.a2b9daa6d36.bundle.css

https://xxyz.blob.core.windows .net/deploy/favicon.ico

< p>For my Angular application, here is the app.routing.ts file:

const appRoutes: Routes = [
 {path:'', component: LoginComponent },
 {path:'dashboard', component: DashboardComponent },
 {path:'application', component : ApplicationComponent },
 {path:'decision', component: DecisionComponent },
];

export const routing = RouterModule.forRoot(appRoutes);

< p>So on my local computer, when I perform a service, I can go to the address bar in the browser and type the following address:

Local host: 4200/dashboard

< p>Local host: 4200/application

This works very well.

Then I do:

ng build --base- href /deploy/ --prod

Then copy the file from the dist folder on the local computer to Azure Blob storage. I must have a blob container for the file, which is called deploy. I ended up with The results are as follows:

https://xxyz.blob.core.windows.net/deploy/favicon.ico
https://xxyz.blob.core. windows.net/deploy/index.html
https://xxyz.blob.core.windows.net/deploy/assets/Logo.svg
https://xxyz.blob.core.windows. net/deploy/main.68dbes8ef20.bundle.js
https://xxyz.blob.core.windows.net/deploy/styles.a2b9daa6d36.bundle.css

I can go to:

https://xxyz.blob.co re.windows.net/deploy/favicon.ico

and see the icon

Then, on the Verizon Edgecast CDN, I can go to:

https: //xxyz.com/deploy/index.htmlLaunch my application and log in.

But I don’t want to go to the CDN to https://xxyz.com/deploy/index.html to log in.

I want to go

https://xxyz.com/login and log in

In addition, I cannot go to these places on the CDN:

https://xxyz.com/deploy/dashboard

https://xxyz.com/deploy/application

What I really want is to be able to do this from the CDN:

https://xxyz.com/login

https://xxyz.com/dashboard

https://xxyz.com/application

p>

and

https://xxyz.com/ should be redirected to the login page

I am using Verizon Premium Edgecast CDN, so I can do URL rewriting , But the rules I wrote have not succeeded so far.

Have I missed anything about Angular? Any ideas on Azure CDN or Edgecast URL rewrite rules?

The following is my current method of URL rewriting for edgecast/Azure:

Then, the “always” drop-down option is shown in the picture below:

IF option:

always< /p>

As a number

CDN Origin

Client IP address

Cookie parameters

Customer origin

Edge Cname

Quoted domain name

Request header text

Request header regular expression

Request method

Request plan

URL path directory

URL path extension

URL path file name

Url Path Literal

Url Path Regex

URL path wildcard

Url Query Literal

URL query regular expression

URL query wildcard

p>

You can set the “original path” of “deployment” to remove the “/deploy/” path from the CDN URL.

The rule engine may take up to 90 minutes to start working . Make sure you wait long enough before trying.

After adding the original path, the rewrite rule should look like this. Rule 1: If always: function: URL rewriting; source:’login’ ;Destination:’index.html’ (select the one that matches your endpoint name from the drop-down list).