Issue
Trying out the new JHipster 8.1.0. I have used PrimeNG components with success in previous versions. In the new JHipster, the PrimeNG components seem to function, but icons (primeicons) don't show up in the browser in production.
For example:
- Create a simple monolithic angular project. I chose Gradle for the build tool, Angular front end, and MariaDB for development and production.
- Install PrimeNG packages:
npm i primeng
npm i primeicons
npm i @angular/animations@17.0.6
npm i @angular/cdk@17.0.5
- Update
vendor.scss
by adding the following:
@import 'primeng/resources/primeng.min.css';
@import 'primeng/resources/themes/saga-blue/theme.css';
@import 'primeicons/primeicons.css';
- Add a PrimeNG tab component to the home page.
- In the
home.component.ts
:- At the top, add:
import { TabViewModule } from 'primeng/tabview';
- In the
@Component
section, addTabViewModule
to the imports
- At the top, add:
- In the
home.component.html
HTML template, add near the top:
- In the
<p-tabView>
<p-tabPanel header="Details" leftIcon="pi pi-id-card">In-depth details</p-tabPanel>
<p-tabPanel header="Notes" leftIcon="pi pi-comment">Some lovely notes</p-tabPanel>
<p-tabPanel header="Information" leftIcon="pi pi-info-circle">Additional information</p-tabPanel>
</p-tabView>
Running the application in development (IntelliJ 2023.3.2, Java 21, Gradle 8.5, Node 18.19.0, Firefox 121.0.1), everything appears correct, and looks pretty good.
Now try it in production:
- Build the production JAR:
./gradlew -Pprod clean bootJar
- Rename the JAR to
testapp.jar
- Copy the JAR to the server, and launch the application:
java -jar testapp.jar
- In a browser, navigate to the home page:
http://localhost:8080
In production the PrimeNG tabs still work as expected BUT the icons don't show up. Furthermore, in the browser console I see the following errors:
GET http://localhost:8080/primeicons.ba3f916dfb64be8c.woff2 [HTTP/1.1 401 Unauthorized 8ms]
downloadable font: download failed (font-family: "primeicons" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:8080/primeicons.ba3f916dfb64be8c.woff2
GET http://localhost:8080/primeicons.f8b9e8a4e401b603.woff [HTTP/1.1 401 Unauthorized 8ms]
downloadable font: download failed (font-family: "primeicons" style:normal weight:400 stretch:100 src index:2): status=2147746065 source: http://localhost:8080/primeicons.f8b9e8a4e401b603.woff
GET http://localhost:8080/primeicons.0112589c5695a9ed.ttf [HTTP/1.1 401 Unauthorized 9ms]
downloadable font: download failed (font-family: "primeicons" style:normal weight:400 stretch:100 src index:3): status=2147746065 source: http://localhost:8080/primeicons.0112589c5695a9ed.ttf
downloadable font: no supported format found (font-family: "primeicons" style:normal weight:400 stretch:100 src index:5) source: (end of source list)
Everything works fine in previous versions of JHipster (7.9.3 and earlier), and in development, so I'm guessing either I've missed something, done something silly, or this is a resource bundling issue in the new JHipster.
Any ideas?
Solution
Holy moly, macaroni! I have an answer.
The good folks in the JHipster project have cranked up security, and lock out everything that is not part of their code base. To see the PrimeNG
primeicons
, open SecurityConfiguration.java
, find the authorizeHttpRequests()
section (in my code this is around line 60), and in amongst the .requestMatchers
, add the following:
.requestMatchers(mvc.pattern("/*.tff"), mvc.pattern("/*.woff"), mvc.pattern("/*.woff2")).permitAll()
Problem solved.
Answered By - Mike Smith
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.