A simple Spring Boot application with Angular frontend and PrimeNG components

• Spring Boot
• Angular
• PrimeNG

Built using Gradle

• Gradle

Key Implementation Details

Gradle

Node plugin

	id 'com.github.node-gradle.node' version '5.0.0'

Configure Node Plugin

node {
download =true
version ='18.17.0'
npmVersion =''
distBaseUrl ='https://nodejs.org/dist'
setWorkDir(file("${project.projectDir}/.gradle/nodejs"))
setNpmWorkDir(file("${project.projectDir}/.gradle/npm"))
setNodeProjectDir(file("${project.projectDir}/src/main/angularapp")) // the Angular app source
}

Tasks

tasks.register('gradleNgBuild', NpmTask) {
group 'frontend-build'
description 'Builds the Angular app using ng build'
dependsOn npmInstall
args = ['run', 'gradle-build'] // gradle-build is a script in package.json
inputs.dir file("${project.projectDir}/src/main/angularapp") // the Angular app source
outputs.dir file("${project.projectDir}/build/resources/main/static") // the Angular app output
}
tasks.named('classes').configure {
dependsOn 'gradleNgBuild'// run the Angular build alongside the Java related tasks
}

Angular

Generated Angular app using ng new angularapp.

package.json

Build Script

"scripts": {
// ..."gradle-build": "ng build --output-path=../../../build/resources/main/static", // output the Angular build to the Spring Boot static folder// ...
},

Primeng dependencies

"dependencies": {
// ..."primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primeng": "^16.0.2",
// ...
},

angular.json

favicon

"assets": [
// ..."src/favicon-32x32.png",
// ...
],

styles and theme switcher

"styles": [
"src/styles.scss",
"node_modules/primeicons/primeicons.css", // add PrimeNG icons
{
"input": "src/light-theme.scss", // light themes"bundleName": "light-theme",
"inject": false
},
{
"input": "src/dark-theme.scss", // dark themes"bundleName": "dark-theme",
"inject": false
},
"src/vscode-primeng.scss",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeflex/primeflex.css"
],

light-theme.scss

@import"primeng/resources/themes/saga-blue/theme.css";

dark-theme.scss

@import"primeng/resources/themes/arya-blue/theme.css";

index.html

<!-- ... --><basehref="./"><!-- make angular App contextPath independenct --><linkrel="icon" href="favicon-32x32.png" type="image/png"><!-- favicon --><linkid="app-theme" rel="stylesheet" type="text/css" href="light-theme.css"><!-- theme switcher --><!-- ... -->

app.component.ts

ngAfterViewInit(): void{this.adjustTheme();}adjustTheme(event?: any){lettheme='light-theme';if(this.lightTheme){theme='light-theme';}else{theme='dark-theme';}constthemeLink=this.document.getElementById('app-theme')asHTMLLinkElement;if(themeLink){themeLink.href=theme+'.css';}}