不出现primeng样式 schedule.component.htmlangular.jsonpackage.jsonschedule.component.ts

如何解决不出现primeng样式 schedule.component.htmlangular.jsonpackage.jsonschedule.component.ts

我正在使用primeng，但样式有点不显示。我在组件中添加了一个简单的网格，结果如下图所示。我删除了 node_modules 并再次 npm install，但没有任何变化。

我不知道我还能错过什么。基本上，我从 getting started 页开始做了所有事情。

schedule.component.html

<div class="p-grid">
  <div class="p-col-4">4</div>
  <div class="p-col">1 </div>
  <div class="p-col">1 </div>
  <div class="p-col">1 </div>
  <div class="p-col">1 </div>
  <div class="p-col">1 </div>
  <div class="p-col">1 </div>
  <div class="p-col">1 </div>
  <div class="p-col">1 </div>
</div>

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
    "academic-schedule": {
      "projectType": "application","schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },"root": "","sourceRoot": "src","prefix": "app","architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser","options": {
            "outputPath": "dist/academic-schedule","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
              "src/assets"
            ],"styles": [
              "node_modules/primeng/resources/themes/fluent-light/theme.css","node_modules/primeng/resources/primeng.min.css","node_modules/primeicons/primeicons.css","node_modules/primeflex/primeflex.css","src/styles.scss"
            ],"scripts": []
          },"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
                }
              ],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
                {
                  "type": "initial","maximumWarning": "500kb","maximumError": "1mb"
                },{
                  "type": "anyComponentStyle","maximumWarning": "2kb","maximumError": "4kb"
                }
              ]
            }
          }
        },"serve": {
          "builder": "@angular-devkit/build-angular:dev-server","options": {
            "browserTarget": "academic-schedule:build"
          },"configurations": {
            "production": {
              "browserTarget": "academic-schedule:build:production"
            }
          }
        },"extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n","options": {
            "browserTarget": "academic-schedule:build"
          }
        },"test": {
          "builder": "@angular-devkit/build-angular:karma","options": {
            "main": "src/test.ts","codeCoverage": true,"tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","styles": [
              "node_modules/primeicons/primeicons.css","node_modules/primeng/resources/themes/saga-blue/theme.css","node_modules/@fullcalendar/core/main.min.css","node_modules/@fullcalendar/daygrid/main.min.css","node_modules/@fullcalendar/timegrid/main.min.css","scripts": []
          }
        }
      }
    }
  },"defaultProject": "academic-schedule","schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },"cli": {
    "analytics": false
  }
}

package.json

{
  "name": "academic-schedule","version": "0.0.0","scripts": {
    "ng": "ng","start": "ng serve","build": "ng build","test": "ng test","format:check": "prettier \"src/{app,environments}/**/*{.ts,.html,.json,.scss}\" --check","format:write": "prettier \"src/{app,.scss}\" --write"
  },"private": true,"dependencies": {
    "@angular/animations": "^12.1.1","@angular/common": "^12.1.1","@angular/compiler": "^12.1.1","@angular/core": "^12.1.1","@angular/forms": "^12.1.1","@angular/platform-browser": "^12.1.1","@angular/platform-browser-dynamic": "^12.1.1","@angular/router": "^12.1.1","@fullcalendar/core": "^4.1.0","@fullcalendar/daygrid": "^4.1.0","@fullcalendar/interaction": "^4.1.0","@fullcalendar/timegrid": "^4.1.0","jwt-decode": "^3.1.2","primeflex": "^2.0.0","primeicons": "^4.1.0","primeng": "^12.0.0","rxjs": "^6.6.7","tslib": "^2.3.0","zone.js": "^0.11.4"
  },"devDependencies": {
    "@angular-devkit/build-angular": "^12.1.1","@angular/cli": "^12.1.1","@angular/compiler-cli": "^12.1.1","@angular/language-service": "^12.1.1","@types/jasmine": "^3.7.7","@types/node": "^16.0.0","jasmine-core": "^3.8.0","karma": "^6.3.4","karma-chrome-launcher": "^3.1.0","karma-coverage": "~2.0.3","karma-jasmine": "^4.0.1","karma-jasmine-html-reporter": "^1.6.0","prettier": "^2.3.2","typescript": "^4.3.5"
  }
}

schedule.component.ts

import { Component,OnInit } from '@angular/core';

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin,{ Draggable } from '@fullcalendar/interaction';

@Component({
  selector: 'app-add-schedule',templateUrl: './add-schedule.component.html',styleUrls: ['./add-schedule.component.scss']
})
export class AddScheduleComponent implements OnInit {
  events!: any[];

  options: any;
  theCheckbox: boolean = false;
  constructor() { }

  ngOnInit() {
    let draggableEl = document.getElementById('external-events')!;
    var self = this;

    new Draggable(draggableEl,{
      itemSelector: '.fc-event',eventData: function (eventEl: any) {
        console.log(eventEl);
        if (self.theCheckbox) {
          eventEl.parentNode.removeChild(eventEl);
        }
        return {
          title: eventEl.innerText
        };
      }
    });

    this.events = [
      {
        id: 1,title: 'All Day Event',start: '2017-02-01'
      },{
        id: 2,title: 'Long Event',start: '2017-02-07',end: '2017-02-10'
      },{
        id: 3,title: 'Repeating Event',start: '2017-02-09T16:00:00'
      }
    ];

    this.options = {
      plugins: [dayGridPlugin,timeGridPlugin,interactionPlugin],defaultDate: '2017-02-01',header: {
        left: 'prev,next',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },editable: true
    };
  }
}