v18.RC1 Theme Sample not working

[Puresoft]

Describe the bug

If I create a new project and follow the config docs (just activate aura and place a button), no theme is applied

Created a sample here

Environment

Windows 11 Chrome Angular 18.1 primeng 18rc1

Reproducer

https://stackblitz.com/edit/stackblitz-starters-wihkg7?file=src%2Fmain.ts

Angular version

18.1

PrimeNG version

18.0.rc1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.7

Browser(s)

Chrome current version

Steps to reproduce the behavior

No response

Expected behavior

No response

[kuhnlud]

Hi, To apply a theme, you should do it like this:

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura
      },
    }),
  ],
};

I tried it in your StackBlitz, and it works. However, it’s certain that the documentation and code are still a bit rough around the edges.

[mertsincan]

Thanks a lot for the update! We're working on the demos.

[jagAlskarFisk]

@kuhnlud Sorry if I am missing something, but I see that your code is exactly like the one in the stackblitz, but no styling is applied

[Puresoft]

Sorry I was already updating the sample.

stackblitz code was: export const appConfig: ApplicationConfig = { providers: [ provideAnimationsAsync(), providePrimeNG({ theme: Aura, }), ], };

But should be like in your screenshot. (object with preset: Aura) Your screenshot also shows that the theme is working since the "check" button is green.

[jagAlskarFisk]

I see, I thought the font used would also be Inter instead of Times New Roman

[Puresoft]

The problem is solved, but you should update the documentation soon. New users will look for other libraries if the simplest setup doesn't work.

[mertsincan]

Thanks a lot for your update!

[sandipchitale]

For me the following worked...

import {providePrimeNG} from 'primeng/config';
import Aura from '@primeng/themes/aura';
:
:
:
export const appConfig: ApplicationConfig = {
  providers: [
    : 
    providePrimeNG({
     //  theme: Aura <----------------- does not work
      theme: { // <--------------------- this works!
        preset: Aura,
        options: {
          prefix: 'p',
          darkModeSelector: '.dark-theme'
        }
      },
      ripple: true
    })]
};