@alan-agius4 @school-coder I think I have made it work as desired too (The interceptor is indeed really needed, and injecting the APP_BASE_HREF was a good idea!), thanks both for your valuable feedback.

I suspect this will pop again and again on this tracker once deployUrl is removed, because devs are lazy by design, and a deprecation warning is something our eyes ignore until the feature is definitely removed 😃

Once again, thanks ! And keep-up the good work angular team, you do an awesome job!

The CSP issue is a known limitation which is being tracked here: https://github.com/angular/angular-cli/issues/20864

@mpalourdio and @alan-agius4 : I have couple of updates

Update 1: Adaption of suggestion is now working

My Environment:

baseHref=‘/portal/public/’ APP_BASE_HREF = ‘/portal/’

Adaption i have done,

@Injectable()
export class RequestInterceptor implements HttpInterceptor {

  constructor(private store: Store<UIState>, @Inject(APP_BASE_HREF) private baseHref:string) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const newRequest = req.clone({ url: this.baseHref + req.url });
    return next.handle(newRequest);
  }
}

Dev Server and Production Server working fine now. I need not to do any change specific to dev server. For example removing APP_BASE_HREF, Only thing, I need to adapt static urls used through out the application.

for example,

I need to adapt the url public/assets/images/logo.svg to assets/images/logo.svg.

Update 2: Enabling inlineCritical generates right URL now.

After configurating inlineCritical as true, the URL is generating correctly which is the actual issue I reported.

Update 3: Content Security Policy Issue while enabling inlineCritical.

I doubt it is related to the generated link element,

<link rel="stylesheet" href="styles.870562dd6d1ef9f0.css" media="print" onload="this.media='all'">

As this link element is generated during the build, adding hash or nonce attribute can not be done.

Is there anyway to resolve this?

My Current Content Security Policy,

content-security-policy: default-src ‘self’; img-src * ‘self’ data:; object-src ‘none’; child-src * mailto: tel: ms-word:; script-src ‘self’; style-src ‘self’ ‘unsafe-inline’; form-action ‘self’ *.okta.com; frame-ancestors ‘self’;

@alan-agius4, baseHref and APP_BASE_HREF does the same job right?

No they are 2 different settings although when APP_BASE_HREF is not specified it defaults to baseHref. The APP_BASE_HREF is used to set the router base href. See: https://angular.io/guide/deployment#the-deploy-url

The APP_BASE_HREF, doesn’t effect the HTTP Client. And hence, the “incorrect” HTTP request URL. Using an HTTP interceptor you should be able to amend the request Url quite easily.