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

david20571015 · 2023-11-10T01:30:43Z

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:

Add a deployment options to specify a relative path to outputPath. e.g. ng deploy --path=/browser, which publishes folder ${outputPath}/browser.
If build.builder in angular.json is set to "@angular-devkit/build-angular:application", then publishes folder ${outputPath}/browser.

The text was updated successfully, but these errors were encountered:

jfcere · 2023-11-14T17:08:33Z

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 · 2023-11-14T19:52:46Z

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 · 2023-11-14T20:22:15Z

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 · 2023-11-14T20:26:22Z

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 · 2023-11-14T20:51:04Z

Thanks for your detailed reply, @fmalcher.

JohannesHoppe · 2023-11-15T06:12:20Z

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 · 2024-01-26T15:24:27Z

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 · 2024-01-26T17:07:04Z

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 · 2024-01-26T17:18:19Z

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

JohannesHoppe · 2024-01-26T17:25:42Z

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 · 2024-01-26T17:51:20Z

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 · 2024-01-26T18:01:00Z

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 · 2024-01-26T18:47:53Z

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 · 2024-01-27T14:27:17Z

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)

JohannesHoppe · 2024-01-27T15:56:17Z

angular-cli-ghpages@2.0.0-beta.2 is on Github now, see #180

david20571015 · 2024-01-28T14:45:12Z

angular-cli-ghpages@2.0.0-beta.2 is on Github now, see #180

@JohannesHoppe, could you please publish angular-cli-ghpages@2.0.0-beta.2 to npm? Alternatively, should I install it from the source code?

JohannesHoppe · 2024-01-29T04:58:35Z

I'm pretty much sure it's already published! 🙂

david20571015 · 2024-01-29T09:40:07Z

I'm pretty much sure it's already published! 🙂

Sorry, I only checked the releases of this repo but not the npm package.
angular-cli-ghpages@2.0.0-beta.2 could be installed without any errors. 🥳

JohannesHoppe · 2024-01-29T10:36:10Z

🎉

fmalcher mentioned this issue Dec 17, 2023

support added for angular 17 #175

Merged

d-koppenhagen mentioned this issue Jan 18, 2024

Not working with a new Angular V17 project #177

Closed

JohannesHoppe closed this as completed Jan 26, 2024

JohannesHoppe reopened this Jan 27, 2024

JohannesHoppe closed this as completed Jan 29, 2024

fmalcher mentioned this issue May 28, 2024

Angular 18's new build tool [using Vite] no longer puts index.html and friends in root #189

Closed

jdegand mentioned this issue Aug 4, 2024

Netlify and GitHub Pages are down changhuixu/session-expiration-alert#30

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Wrong publish folder for new application builder in Angular V17 #173

Wrong publish folder for new application builder in Angular V17 #173

Comments

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

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