bjornharvold commented 2 years ago

🐞 Bug report

Command (mark with an `x`)

[X] build

Description

Apologies for not following the format. Upon upgrading to Angular 13, we found out that deployUrl had been deprecated in favor of baseHref and / or APP_BASE_HREF. So part of our migration consisted in removing deployUrl in our Web Components SPA that is used by our affiliates to embed our Web Components into their web sites. We already had baseHref (in project.json) and APP_BASE_HREF (in AppModule)

project.json

...
"configurations": {
  "production": {
    "baseHref": "https://elements.iko.travel/",
  }
}
...

app.module.ts

...
providers: [
   {
      provide: APP_BASE_HREF,
      useValue: environment.baseHref,
    }
]

environment.prod.ts

{
  ...
  baseHref: 'https://elements.iko.travel/',
}

defined alongside deployUrl so migration involved only removing deployUrl from ./apps/web-components/project.json (We use Nx).

Immediately after a release to production, we were notified that our Web Components were no longer loading properly. We looked at one of the sites and could see it was trying to load our modules locally to the affiliate site.

Example: A page is hosted here: https://life.rocks/and/then/some. It contains one of our Web Components. Our WC would try to load assets from that same URL like so: https://life.rocks/and/then/some/897.js

Once we reverted back to deployUrl, everything worked as it should again. baseHref and APP_BASE_HREF had no effect on where libraries were loaded from.

Please make very sure before removing deployUrl that it does not cause this type of error to occur.

We could easily spin up this error in staging upon request but it would maybe be worth a quick look in your codebase to verify this behavior.

nx report

 >  NX   Report complete - copy this into the issue template

   Node : 16.14.2
   OS   : darwin arm64
   yarn : 1.22.18

   Angular / CLI: 13.3.3
   nx : 13.10.3
   @nrwl/angular : 13.10.3
   @nrwl/cypress : 13.10.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 13.10.3
   @nrwl/eslint-plugin-nx : 13.10.3
   @nrwl/express : Not Found
   @nrwl/jest : 13.10.3
   @nrwl/js : 13.10.3
   @nrwl/linter : 13.10.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 13.10.3
   @nrwl/web : 13.10.3
   @nrwl/workspace : 13.10.3
   typescript : 4.6.3
   rxjs : 7.5.5
   ---------------------------------------
   Community plugins:
     @fortawesome/angular-fontawesome: 0.10.2
     @ng-bootstrap/ng-bootstrap: 12.0.2
     @ngneat/transloco: 4.0.0
     @ngrx/component: 13.1.0
     @ngrx/component-store: 13.1.0
     @ngrx/data: 13.1.0
     @ngrx/effects: 13.1.0
     @ngrx/entity: 13.1.0
     @ngrx/router-store: 13.1.0
     @ngrx/store: 13.1.0
     @ngrx/store-devtools: 13.1.0
     angular-calendar: 0.29.0
     @compodoc/compodoc: 1.1.19
     @jscutlery/semver: 2.22.0
     @ngrx/schematics: 13.1.0
     @storybook/angular: 6.4.22

🍺 Bjorn

dgp1130 commented 2 years ago

IIUC, it looks like you're trying to build and ship a custom element with Angular for your customers to install and use. We don't currently have a great story for this at the moment, and it looks like you came up with one workaround to address this problem. I'll mark this as a duplicate of that FR where we can hopefully provide a more direct solution to your problem.

Duplicate of https://github.com/angular/angular-cli/issues/13999.