Grid System do PrimeNG 13 não funcionar

Front-end
#1

Tentei de várias maneira a Grid System funcionar no meu projeto e nada. Já recriei minha aplicação diversas vezes, analisei atentamento a documentação do PrimeNG 13 e não encontrei algo que pudesse me indicar porque minha Grid não funciona. Preciso de ajuda para identificar o que estou fazendo de errado.

Esse é o resultado atual

1
2
3

Esse é o resultado esperado.

image
image976×152 1.24 KB

Esse é meu projeto

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ButtonModule } from "primeng/button";
import { PanelModule } from "primeng/panel";
import { RippleModule } from "primeng/ripple";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonModule,
    PanelModule,
    RippleModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML

<h5>Basic</h5>
<div class="p-grid">
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">2</div>
  </div>
  <div class="p-col">
    <div class="box">3</div>
  </div>
</div>
<router-outlet></router-outlet>

Configuração de CSS no arquivo angular.json

 "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/interessadoui",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeflex/primeflex.css",
              "node_modules/primeng/resources/themes/saga-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "src/styles.css"
            ],
            "scripts": []
          },
#2

Parece que o prefixo p- foi removido: PrimeFlex - Migration Guide.

#3

É isso mesmo, meu problema foi resolvido. Muito obrigado. Está existindo conflito de informações na documentação PrimeNG, não sei como eles são capaz de deixar isso acontecer. Impressionante

1 curtida