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

[SamuelMarks]

My GitHub Actions now looks like this:

cname='mydomain'
ng build --configuration production --base-href 'https://'"$cname"
head -n3 README.md > 'dist/my-www/README.md'
mv 'dist/my-www/browser'/* 'dist/my-www'   # <----------------- had to add this line
npx angular-cli-ghpages --dir='dist/my-www' --cname="$cname" --repo='https://'"$GITHUB_TOKEN"'@github.com/SamuelMakrs/mywebsite' --branch='master' --message="$MSG" --name="$name" --email="$email" --no-silent

You might need to reconfigure ngx to work with the browser subdirectory if no index.html is found in the root (thereby taking care of both cases).

[JohannesHoppe]

Ok, so they have changed the folder structure again??? 😭

[JohannesHoppe]

Ok, looks like the folder structure is still the same as in v17? So I assume your issue was caused by a wrong version of angular-cli-ghpages, that was picked up by npm. I crafted a new version for v18. Please try out [email protected] and report any issues, if the error is still unresolved. 😃 👍

[SamuelMarks]

@JohannesHoppe No not the same folder structure; make sure when you run ng upgrade you select switch to new Vite-based build system; and then you'll get something like https://github.com/offscale/offscale-www

[JohannesHoppe]

I'm confused. I just generated a new Angular 18 app, and got the expected folder dist/name-of-the-app/browser. I'm afk right now, but will double-check this again.

Does the --dir parameter solve your issue?!

[SamuelMarks]

No it doesn't; here is my GitHub Action BTW - https://github.com/offscale/offscale-www/blob/master/.github/workflows/main.yml

I actually like the new files in the dist/name-of-the-app directory—like .nojekyll—and my little mv line ensures all the assets and html files are there also. You probably just need to check if index.html is in the --dir target and if it's not move things around? - Or is that too invasive for a CLI tool with the argument-name --dir?

[fmalcher]

@SamuelMarks I tried to reproduce what you explained. The folder structure changed with the ESBuild/Vite-based builder a while back, but it doesn't seem to me that there are any changes with v18.
You use the standalone version of angular-cli-ghpages. If I run npx angular-cli-ghpages --version I get 1.0.0 and this is possibly the whole problem here. Please try to use npx [email protected] or npx angular-cli-ghpages@latest so you use the latest version.

[SamuelMarks]

Try at 257f92 of my repo:

$ git clone --depth=1 --single-branch https://github.com/offscale/offscale-www
$ npm i
$ ng build --configuration production
$ tree -L 3 dist
dist
└── offscale-www
    ├── 3rdpartylicenses.txt
    └── browser
        ├── assets
        ├── chunk-BCOX42N7.js
        ├── chunk-LKZQ5FFA.js
        ├── favicon.ico
        ├── index.html
        ├── main-FD5JBKE7.js
        ├── polyfills-MAT6ZQ6R.js
        └── styles-YEIHJPKY.css

4 directories, 8 files

[fmalcher]

This file structure is exactly how it's supposed to be. The browser sub-folder exists since v17 when the application builder was introduced. Can you please explain the problem again?

[fmalcher]

I just tried to repeoduce this again:

• created a new project with Angular 18, no SSR
• ng build creates a dist/testfoo/browser subfolder with the JS chunks and index.html in it
• npx angular-cli-ghpages --dir=dist/testfoo/browser to deploy it
• result looks good: https://github.com/fmalcher/testfoo/tree/gh-pages

The difference to your CI workflow is the path under the dir option. Since the artifacts are put under a browser sub-folder you have to deploy this specific folder, NOT the parent folder. In short: Add browser to your DIST path and it will probably work.

[SamuelMarks]

Yes that would work; but before it didn't need the browser subfolder specified which is why I raised this issue

[SamuelMarks]

@fmalcher Just updated another one of my sites, here is the helpful text during ng upgrade:

▸ Migrate application projects to the new build system.
Application projects that are using the '@angular-devkit/build-angular' package's 'browser' and/or 'browser-esbuild' builders will be migrated to use the new 'application' builder.
You can read more about this, including known issues and limitations, here: https://angular.dev/tools/cli/build-system-migration
The output location of the browser build has been updated from "dist/my-www" to "dist/my-www/browser". You might need to adjust your deployment pipeline or, as an alternative, set outputPath.browser to "" in order to maintain the previous functionality.

[fmalcher]

We discussed this a few months back when the change was introduced: #173

To support all possible constellations of builders and output paths, the easiest and most flexible solution was to use "dir" everywhere it deviates from the standard folder (of the Webpack-based builder).
It was a conscious decision not to implement magic that tries to detect the correct dist folder path.

As soon as the application builder is the only officially supported builder we can consider to make the "browser" subfolder the default.
For now, it is intended that people set "dir" manually, even with our deployment builder.

[fmalcher]

I created a separate issue for the last aspect of my answer: #190