devMode in compileUiExtension throws error on next version

[HarunKilic]

Describe the bug
When enabling devMode in compileUiExtension, it will throw an error saying: unknown argument --base-path

Environment (please complete the following information):

• @vendure/core version: 2.0.0-next.17
• Nodejs version: 16.17.0
• Angular version: 13.2.3

Additional context
The issue might be because the option is deprecated and should be set in angular.json instead:
https://stackoverflow.com/questions/71604562/unknown-option-base-href-angular-13-ng-serve

[HarunKilic]

I've managed to get the ui part working by:

• Removing --base-path=${basePath} from \node_modules\@vendure\ui-devkit\compiler\compile.js as its deprecated now.
• Changed "baseHref": "/", in \admin-ui\angular.json to "baseHref": "/admin/",

The app will now run successfully on port 4200.
BUT, it will also try to query on port 4200, which should be on port 3000, where Vendure actually runs.

[michaelbromley]

Pasting from Slack conversation to make it public:

---

Thanks for taking the time to try to solve this. In general, running on port 4200 doesn't work due to the way that the Admin UI is trying to infer the api url. It defaults to auto which just uses the browser url to guess. You should be able to explicitly set

AdminUiPlugin.init({ 
  //..
  adminUiConfig: {
    apiHost: 'http://localhost/'
    apiPort: '3000'
  } 
}),

[HarunKilic]

Just to sum up for a temporary solution:

1. Remove --base-href=${baseHref} from \node_modules\@vendure\ui-devkit\compiler\compile.js on line 99
2. Change "baseHref": "/", in \admin-ui\angular.json to "baseHref": "/admin/" (you will have to run the app with compileUiExtensions atleast once without devMode so that the folder can be generated.)
3. Add

AdminUiPlugin.init({ 
  //..
  adminUiConfig: {
   //..
    apiPort: 3000
  } 
}),

[HarunKilic]

To make this a permanent solution, the --base-href in the cli should be added to angular.json with dynamic values somehow.

[martijnvdbrug]

Same problem. Not sure if still needed, but these are the dependencies installed in my project after removing yarn.lock

yarn list --pattern @angular
yarn list v1.22.17
├─ @angular-devkit/architect@0.1302.6
│  └─ @angular-devkit/core@13.2.6
├─ @angular-devkit/build-angular@13.2.6
│  └─ @angular-devkit/core@13.2.6
├─ @angular-devkit/build-webpack@0.1302.6
├─ @angular-devkit/core@13.2.4
├─ @angular-devkit/schematics@13.2.4
├─ @angular/animations@13.2.3
├─ @angular/cdk@13.2.3
├─ @angular/cli@13.2.4
│  └─ @angular-devkit/architect@0.1302.4
├─ @angular/common@13.2.3
├─ @angular/compiler-cli@13.2.3
├─ @angular/compiler@13.2.3
├─ @angular/core@13.2.3
├─ @angular/forms@13.2.3
├─ @angular/language-service@13.2.3
├─ @angular/platform-browser-dynamic@13.2.3
├─ @angular/platform-browser@13.2.3
└─ @angular/router@13.2.3

yarn list --pattern @vendure
yarn list v1.22.17
├─ @vendure/admin-ui-plugin@2.0.0-next.27
├─ @vendure/admin-ui@2.0.0-next.27
├─ @vendure/common@2.0.0-next.27
├─ @vendure/core@2.0.0-next.27
├─ @vendure/testing@2.0.0-next.27
└─ @vendure/ui-devkit@2.0.0-next.27