Wrong publish folder for new `application` builder in Angular V17

[david20571015]

Angular V17 now use the application builder by default (ref) even if we don't use SSR. This results in the output files, including index.html, be placed in ${outputPath}/browser instead of ${outputPath}, which breaks the deployment of angular-cli-ghpages.

I propose two potential solutions:

1. Add a deployment options to specify a relative path to outputPath. e.g. ng deploy --path=/browser, which publishes folder ${outputPath}/browser.

2. If build.builder in angular.json is set to "@angular-devkit/build-angular:application", then publishes folder ${outputPath}/browser.

[jfcere]

Using the standalone command, it is possible to use the --dir parameter to specify the output path.

npx angular-cli-ghpages --dir=dist/[PROJECT_NAME]/browser

See reference here: https://github.com/angular-schule/angular-cli-ghpages/blob/main/docs/README_standalone.md#usage-with-angular-cli-6-or-higher

[david20571015]

Thank you for your solution, @jfcere. It works well for me.

However, I'm still curious about why they decided not to present the --dir option in Deployment Options. And is this approach recommended for Angular V17, or will the new version of angular-cli-ghpages handle this?

[fmalcher]

However, I'm still curious about why they decided not to present the --dir option in Deployment Options.

The builder for ng deploy was supposed to work "out of the box" without further configuration. Since the builder also performs the application build, the script itself needs to find out the dist folder path without configuration from outside. This is why we don't offer the dir option for the deployment builder.

However, this came from a time where build-angular:browser was the only official application builder.
Now that there are at least two of them, we have to re-evaluate this. The two solutions proposed above by @david20571015 sound reasonable, and we'll discuss soon how we can do this properly.
If you have any more input or ideas about this, please let us know.

For now, we recommend using the standalone command as described above by @jfcere .

[fmalcher]

My personal favorite is to make the dist path/dir mandatory for the builder options. This way we can ensure that people think about adjusting it when they change the output path.
The distinction between build-angular:browser and the new application builder (and their different output paths) could be done with ng add which then creates the correct path for us in the options.
This is a mix of @david20571015 's option 1 from above and a frictionless onboarding that is handled by ng add.
What do you think? @JohannesHoppe

[david20571015]

Thanks for your detailed reply, @fmalcher.

[JohannesHoppe]

We definitely need "--dir" back!

@fmalcher That's a nice idea, if we make it mandatory but also provide a solution that hopefully works out of the box in 90% of the cases! We should also talk about the separate language folders that are created when i18n is used... 🫤

[JohannesHoppe]

Fixed in angular-cli-ghpages@2.0.0-beta.1. Please try out this version and give me feedback, so that I can mark it as stable and publish it as the latest version. This new version uses conventions to figure out the best buildTarget and uses the browser folder by default. The browser folder can be configured as described here.

See #179

[david20571015]

Hello @JohannesHoppe, thanks for fixing this issue. However, would you mind modifying all dependency versions to be compatible with version 17.X?

The problem I encountered is as follows:

>> ng add --force angular-cli-ghpages@latest    
ℹ Using package manager: npm
⚠ Package has unmet peer dependencies. Adding the package may not succeed.

The package angular-cli-ghpages@latest will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: github-page@0.0.0
npm ERR! Found: @angular-devkit/architect@0.1701.1
npm ERR! node_modules/@angular-devkit/architect
npm ERR!   dev @angular-devkit/architect@"^0.1701.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular-devkit/architect@"~0.1700.0" from angular-cli-ghpages@2.0.0-beta
npm ERR! node_modules/angular-cli-ghpages
npm ERR!   dev angular-cli-ghpages@"2.0.0-beta" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[fmalcher]

You have to use the exact tag instead of "latest" 😊

[JohannesHoppe]

Which is super confusing, because on npm latest is already 2.0.0-beta.1. But Angular is doing it's own thing.

You have two options

ng add angular-cli-ghpages@2.0.0-beta.1

OR

npm install angular-cli-ghpages
ng add angular-cli-ghpages

By the way, I messed up 2.0.0-beta, and bumped to 2.0.0-beta.1

[david20571015]

It works well in my repo🥳.

However I also met the compatibility problem after using npm install angular-cli-ghpages@2.0.0-beta.1 exactly. (Therefore I use npm install --force angular-cli-ghpages@2.0.0-beta.1)

Could you change the version of the peer dependency @angular-devkit/architect from ~0.1700.0 to >=0.1700.0 <0.1800.0 ?

[fmalcher]

However I also met the compatibility problem after using npm install angular-cli-ghpages@2.0.0-beta.1 exactly.

I just tried this in three of my own projects and a fresh new Angular 17.1 workspace and had none of those issues.
Can you please try to delete node_modules and delete package-lock.json just for testing? @david20571015

[david20571015]

However I also met the compatibility problem after using npm install angular-cli-ghpages@2.0.0-beta.1 exactly.

I just tried this in three of my own projects and a fresh new Angular 17.1 workspace and had none of those issues. Can you please try to delete node_modules and delete package-lock.json just for testing? @david20571015

It seems like I accidentally added @angular-devkit/architect to my dependencies. The error doesn't show up after I remove it.

[JohannesHoppe]

Looks like the angularfire team has now changed their setup like this:
https://github.com/angular/angularfire/blob/master/package.json

only dependencies and devDependencies, no peerDependencies any longer. And they skipped all previous version, too. So I think I will try this out too:

FROM

  "peerDependencies": {
    "@angular-devkit/architect": "~0.1700.0",
    "@angular-devkit/core": "^17.0.0",
    "@angular-devkit/schematics": "^17.0.0"
  },
  "dependencies": {
    "commander": "^3.0.0-0",
    "fs-extra": "^11.2.0",
    "gh-pages": "^3.1.0"
  }

TO

  "dependencies": {
    "@angular-devkit/architect": "~0.1700.0",
    "@angular-devkit/core": "^17.0.0",
    "@angular-devkit/schematics": "^17.0.0",
    "commander": "^3.0.0-0",
    "fs-extra": "^11.2.0",
    "gh-pages": "^3.1.0"
  }

I will push a new beta.2 version very soon.
@david20571015 Could you please try out an installation again, ideally with your "bogus" setup, too? (having @angular-devkit/architect in the dependencies)