Angular 17 Framework Support

[stephennimmo]

Describe the bug

When I create a new quarkus app, add the quinoa extension and create an Angular 17 app in the src/main/webui folder, everything seems to work as expected regarding the application. However, when I try and build, the Angular app doesn't seem to get packaged with the application.

Quinoa version

2.2.1

Quarkus version

3.6.0

Build / Runtime

Angular

Package Manager

NPM

Steps to reproduce the behavior

quarkus create app com.snimmo:quarkus-angular-quinoa-example
cd quarkus-angular-quinoa-example
quarkus ext add config-yaml resteasy-reactive-jackson quinoa
mv src/main/resources/application.properties src/main/resources/application.yml
yq -i '.quarkus.quinoa.enable-spa-routing = true' src/main/resources/application.yml
mkdir src/main/webui
ng new --routing --style scss --directory src/main/webui -g --ssr false --standalone false example-ng

When I run quarkus dev, everything seems fine.

When I run quarkus build, and then attempt to run java -jar target/quarkus-app/quarkus-run.jar, the Angular app is not served and the regular index.html file is served that gets generated with a new Quarkus app.

Expected behavior

When I run quarkus build, and then run java -jar target/quarkus-app/quarkus-run.jar, I should see the same Angular app served that I saw in quarkus dev

[melloware]

We have an Angular integration test here can you compare your project with that one to see what might be different?

https://github.com/quarkiverse/quarkus-quinoa/tree/main/integration-tests/src/main/ui-angular

[stephennimmo]

I think the biggest difference is the use of yarn. It's also Angular 13 v 17 in the issue example. However, the process works in dev mode. That's what is throwing me. The angular build seems to be running correctly.

[INFO] --- quarkus:3.6.0:build (default) @ quarkus-angular-quinoa-example ---
[INFO] [io.quarkiverse.quinoa.deployment.framework.FrameworkType] Quinoa detected 'ANGULAR' frameworkType from package.json file.
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] Running Quinoa package manager build command: npm run build
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] 
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] > [email protected] build
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] > ng build
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] 
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] - Building...
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] 
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] Initial Chunk Files   | Names         |  Raw Size | Estimated Transfer Size
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] main-WNT43TMJ.js      | main          | 211.59 kB |                57.30 kB
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] polyfills-LZBJRJJE.js | polyfills     |  32.69 kB |                10.59 kB
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] 
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner]                       | Initial Total | 244.28 kB |                67.90 kB
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] 
[INFO] [io.quarkiverse.quinoa.deployment.packagemanager.PackageManagerRunner] Application bundle generation complete. [2.032 seconds]
[INFO] [io.quarkiverse.quinoa.deployment.QuinoaProcessor] Quinoa target directory: '/Users/snimmo/projects/github/stephennimmo/quarkus-angular-quinoa-example/target/quinoa/build'
[INFO] [io.quarkiverse.quinoa.deployment.QuinoaProcessor] Quinoa generated resource: '/3rdpartylicenses.txt'
[INFO] [io.quarkiverse.quinoa.deployment.QuinoaProcessor] Quinoa generated resource: '/browser/favicon.ico'
[INFO] [io.quarkiverse.quinoa.deployment.QuinoaProcessor] Quinoa generated resource: '/browser/index.html'
[INFO] [io.quarkiverse.quinoa.deployment.QuinoaProcessor] Quinoa generated resource: '/browser/styles-5INURTSO.css'
[INFO] [io.quarkiverse.quinoa.deployment.QuinoaProcessor] Quinoa generated resource: '/browser/main-WNT43TMJ.js'
[INFO] [io.quarkiverse.quinoa.deployment.QuinoaProcessor] Quinoa generated resource: '/browser/polyfills-LZBJRJJE.js'
[INFO] [io.quarkus.deployment.QuarkusAugmentor] Quarkus augmentation completed in 3364ms

[melloware]

weird and when you run your angular build normally and try and run the static build site does it work without Quinoa?

[stephennimmo]

Thanks for the help. I figured it out. Angular 17 changed quite a few things: once of them being where the artifacts are built to based on whether or not they are intended for browser or server side rendering (SSR). Found a great link for this here: https://github.com/angular/angular-cli/issues/26304#issuecomment-1804389033

To fix the issue, I simply needed to add the additional folder paths in the configuration.

quarkus:
  quinoa:
    enable-spa-routing: true
    build-dir: dist/example-ng/browser

Now everything works as expected.

[melloware]

I wonder if we need to update docs or code since Angular 17 has changed this @ia3andy ??

[ia3andy]

Yeah, we should add version detection and pass it to the Frameworks so that they can have the right pre-conf .../browser...

@melloware I am super busy right now, do you want to give it a try (this might also allow us to fix Vite)?

[ia3andy]

Until we have a proper fix, we should update the documentation for Angular 17 to add the build-dir: dist/[app-name]/browser in application.properties.

@stephennimmo would you submit a PR? https://github.com/quarkiverse/quarkus-quinoa/blob/main/docs/modules/ROOT/pages/web-frameworks.adoc#angular-test-configuration