`Unhandled Navigation Error` error shown when I use --base-href with cdn address instead of --deploy-url

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes

Description

As this PR(angular/angular-cli/pull/21537) said, we can set `--base-href` to the CDN address because `--deploy-url` will be deprecated next version. So I follow this to change the command of building application.

Here is the cmd: node --max_old_space_size=4096 ./node_modules/.bin/ng build --prod --base-href=//mycdn.com/xxx When I try to use http-server to start it, the error Unhandled Navigation Error shown. I’m not sure if I missed something or set wrong configurations in my application.

🔬 Minimal Reproduction

// app.module.ts
...
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' }
   ...
  ],
...

// app-routing.module.ts, `loadChildren` in routes 
...
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
      preloadingStrategy: PreloadAllModules,
      relativeLinkResolution: 'legacy'
    })
  ],
  exports: [RouterModule]
})
...

// build cmd
node --max_old_space_size=4096 ./node_modules/.bin/ng build --prod --base-href=//mycdn.com/xxx

// start server
http-server --proxy xxxx

🔥 Exception or Error

Unhandled Navigation Error:                main-es2015.5fc8829f03fd1c12af29.js:formatted:15045 
......

🌍 Your Environment

Angular CLI: 12.2.3
Node: 14.17.5
Package Manager: npm 6.14.14
OS: darwin x64

Angular: 12.2.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.1
@angular-devkit/build-angular   12.2.2
@angular-devkit/core            12.1.1
@angular-devkit/schematics      12.2.3
@schematics/angular             12.2.3
rxjs                            6.6.7
typescript                      4.3.5

Anything else relevant?

[simplejason]

Thanks for your update, I think building with cdn and using docker to deploy(pull all cdn files including js&assets) is not uncommon edge case. I will try to use PathLocationStrategy and APP_BASE_HREF to check if this can sovle my problem like a link not work, thanks again 😃

[alan-agius4]

@atscott, users might encounter this more in v13 due to the deprecation of the deployUrl option in the CLI. More context https://github.com/angular/angular-cli/pull/21537

None-the-less this issue occurs only when combining 2 legacy/old techniques together which I’d say is not as common. Considering this and that there is amply time until deployUrl is completely removed from the CLI, I am inclined in saying that we should not handle it and users should move towards a modern setup. Until then use the deprecated deployUrl option should be used.

The mentioned old techniques are;

1. Hash location strategy, as you mentioned this is supported for old server setup and no a days most users should have transitioned towards the path location strategy.
2. CDN for assets only. This is also a relatively old technique which we don’t recommand, we strongly recommand that the entire application is hosted on a CDN.