Warning: Unable to locate stylesheet -> Upgrade v11 to v14

Post Reply
vicmanmo
Posts: 2
Joined: 27 Dec 2022, 13:34

27 Dec 2022, 13:40

We are updating both the version of Angular, PrimeNg and Serenity from 11 to 14, and when we perform an "ng serve" two warnings appear:

Warning: Unable to locate stylesheet: /home/victor/workspace/angular-template-fork/assets/theme/theme-upv.css

Warning: Unable to locate stylesheet: /home/victor/workspace/angular-template-fork/assets/layout/css/layout-upv.css

But it is perfectly catching the styles.

When we do "ng build" the warnings do not appear.

We do not know why they are appearing.

seymagullu
Posts: 44
Joined: 17 Jun 2022, 09:43

02 Jan 2023, 10:35

Hi,

We'll check and get back to you.

Regards.

cetincakiroglu
Posts: 119
Joined: 17 Dec 2021, 09:33

06 Jan 2023, 10:52

Hi,

Could you please share your package.json and angular.json or give instructions to reproduce the issue?

vicmanmo
Posts: 2
Joined: 27 Dec 2022, 13:34

10 Jan 2023, 11:54

package.json

Code: Select all

{
  "name": "demo-ng",
  "version": "1.3.0",
  "license": "GPL-3.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "publica": "npm version patch",
    "postpublica": "git push && git push --tags && npm publish"
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "~14.2.9",
    "@angular/cdk": "~14.2.6",
    "@angular/common": "~14.2.9",
    "@angular/compiler": "~14.2.9",
    "@angular/core": "~14.2.9",
    "@angular/forms": "~14.2.9",
    "@angular/platform-browser": "~14.2.9",
    "@angular/platform-browser-dynamic": "~14.2.9",
    "@angular/router": "~14.2.9",
    "@fullcalendar/angular": "^5.11.2",
    "@fullcalendar/core": "^5.11.2",
    "@fullcalendar/daygrid": "^5.11.2",
    "@fullcalendar/interaction": "^5.11.2",
    "@fullcalendar/timegrid": "^5.11.2",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "angular-oauth2-oidc": "^13.0.1",
    "chart.js": "^3.3.2",
    "material-design-icons": "^3.0.1",
    "ngx-cookie-service": "^14.0.1",
    "ngx-spinner": "^14.0.0",
    "primeflex": "^3.2.1",
    "primeicons": "5.0.0",
    "primeng": "14.0.0",
    "prismjs": "1.29.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.4.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~14.2.8",
    "@angular/cli": "~14.2.8",
    "@angular/compiler-cli": "~14.2.9",
    "@types/jasmine": "~3.10.0",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "eslint": "^8.27.0",
    "jasmine-core": "~3.10.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.7.2"
  }
}
angular.json

Code: Select all

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "demo-ng": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demoangularmat-ng",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "aot": true,
            "assets": ["src/assets", "src/upload.php", "src/favicon.ico"],
            "styles": [
              "src/styles.scss",
              "./node_modules/@fullcalendar/common/main.css",
              "./node_modules/@fullcalendar/daygrid/main.css",
              "./node_modules/@fullcalendar/timegrid/main.css"
            ],
            "scripts": [
              "node_modules/prismjs/prism.js",
              "node_modules/prismjs/components/prism-typescript.js"
            ],
            "allowedCommonJsDependencies": [
              "@fullcalendar/daygrid",
              "@fullcalendar/timegrid",
              "@fullcalendar/interaction",
              "chart.js",

              "fast-deep-equal",
              "fast-sha256"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },

            "desa": {
              "baseHref": "",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.desa.ts"
                }
              ],
              "tsConfig": "./tsconfig-es5.app.json"
            },
            "pre": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "baseHref": "",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.pre.ts"
                }
              ],
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "demo-ng:build",
            "proxyConfig": "src/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "demo-ng:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "demo-ng:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "styles": ["src/styles.scss"],
            "assets": ["src/assets", "src/upload.php", "src/favicon.ico"],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:eslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "demo-ng:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "demo-ng:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "demo-ng"
}

index.html

Code: Select all

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo-ng</title>
    <base href="/" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />

    <link
      id="theme-css"
      rel="stylesheet"
      type="text/css"
      href="assets/theme/theme-upv.css"
    />
    <link
      id="layout-css"
      rel="stylesheet"
      type="text/css"
      href="assets/layout/css/layout-upv.css"
    />
  </head>

  <body>
    <app-root>
      <div class="splash-screen">
        <div class="splash-loader-container">
          <svg
            class="splash-loader"
            width="65px"
            height="65px"
            viewBox="0 0 66 66"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              class="path"
              fill="none"
              stroke-width="6"
              stroke-linecap="round"
              cx="33"
              cy="33"
              r="30"
            ></circle>
          </svg>
        </div>
      </div>
    </app-root>
  </body>
</html>

cetincakiroglu
Posts: 119
Joined: 17 Dec 2021, 09:33

17 Jan 2023, 13:59

Hi,

I've updated a Serenity v11 to v14 manually, please try the steps below or compare them with your code it should solve the problem.

1-) Update package.json

Code: Select all

{
    "name": "serenity-ng",
    "version": "11.0.0",
    "license": "PrimeNG Commercial",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "~14.0.0",
        "@angular/cdk": "~14.0.0",
        "@angular/common": "~14.0.0",
        "@angular/compiler": "~14.0.0",
        "@angular/core": "~14.0.0",
        "@angular/forms": "~14.0.0",
        "@angular/platform-browser": "~14.0.0",
        "@angular/platform-browser-dynamic": "~14.0.0",
        "@angular/router": "~14.0.0",
        "@fullcalendar/core": "6.0.0-beta.1",
        "@fullcalendar/daygrid": "6.0.0-beta.1",
        "@fullcalendar/interaction": "6.0.0-beta.1",
        "@fullcalendar/timegrid": "6.0.0-beta.1",
        "@fullcalendar/web-component": "6.0.0-beta.1",
        "chart.js": "^3.3.2",
        "prismjs": "1.9.0",
        "primeflex": "^3.2.0",
        "primeicons": "6.0.1",
        "primeng": "14.2.2",
        "quill": "^1.3.7",
        "rxjs": "~7.4.0",
        "tslib": "^2.3.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^14.2.6",
        "@angular-eslint/builder": "14.1.2",
        "@angular-eslint/eslint-plugin": "14.1.2",
        "@angular-eslint/eslint-plugin-template": "14.1.2",
        "@angular-eslint/schematics": "14.1.2",
        "@angular-eslint/template-parser": "14.1.2",
        "@angular/cli": "~14.0.3",
        "@angular/compiler-cli": "~14.0.0",
        "@types/jasmine": "~3.10.0",
        "@types/node": "^12.11.1",
        "@typescript-eslint/eslint-plugin": "5.37.0",
        "@typescript-eslint/parser": "5.37.0",
        "eslint": "^8.23.1",
        "jasmine-core": "~4.0.0",
        "karma": "~6.3.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "~1.7.0",
        "typescript": "~4.7.2"
    }
}
2-) Update angular.json

Code: Select all

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "serenity-cli": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/serenity-ng",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "inlineStyleLanguage": "scss",
                        "aot": true,
                        "assets": [
                            "src/assets",
                            "src/upload.php",
                            "src/favicon.ico"
                        ],
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": [
                            "node_modules/prismjs/prism.js",
                            "node_modules/prismjs/components/prism-typescript.js"
                        ],
                        "allowedCommonJsDependencies": [
                            "@fullcalendar/timegrid",
                            "@fullcalendar/interaction",
                            "@fullcalendar/daygrid",
                            "chart.js",
                            "xlsx",
                            "jspdf-autotable",
                            "file-saver",
                            "jspdf",
                            "quill"
                         ]
                    },
                    "configurations": {
                        "production": {
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "3mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb",
                                    "maximumError": "10kb"
                                }
                            ],
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "outputHashing": "all"
                        },
                        "development": {
                            "buildOptimizer": false,
                            "optimization": false,
                            "vendorChunk": true,
                            "extractLicenses": false,
                            "sourceMap": true,
                            "namedChunks": true
                        }
                    },
                    "defaultConfiguration": "production"
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "serenity-cli:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "serenity-cli:build:production"
                        },
                        "development": {
                            "browserTarget": "serenity-cli:build:development"
                        }
                    },
                    "defaultConfiguration": "development"
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "serenity-cli:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "inlineStyleLanguage": "scss",
                        "styles": [
                            "src/styles.scss"
                        ],
                        "assets": [
                            "src/assets",
                            "src/upload.php",
                            "src/favicon.ico"
                        ],
                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "tsconfig.app.json",
                            "tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "serenity-cli",
    "cli": {
      "analytics": false
    }
}
3-) Update tsconfig.json

Code: Select all

{
    "compileOnSave": false,
    "compilerOptions": {
      "baseUrl": "./",
      "outDir": "./dist/out-tsc",
      "forceConsistentCasingInFileNames": true,
      "strict": false,
      "noImplicitOverride": true,
      "noPropertyAccessFromIndexSignature": true,
      "noImplicitReturns": false,
      "noFallthroughCasesInSwitch": true,
      "sourceMap": true,
      "declaration": false,
      "downlevelIteration": true,
      "experimentalDecorators": true,
      "moduleResolution": "node",
      "importHelpers": true,
      "target": "es2017",
      "module": "es2020",
      "lib": [
        "es2020",
        "dom"
      ]
    },
    "angularCompilerOptions": {
      "enableI18nLegacyMessageIdFormat": false,
      "strictInjectionParameters": false,
      "strictInputAccessModifiers": false,
      "strictTemplates": false
    }
  }

Skip 4 and 5 if you're not using fullcalendar

4-) Remove fullcalendar import from your app.module.ts and add custom elements schema to app.module or the module of related component declared.

Code: Select all

...
providers: [...],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
...
5-) Update the component where the fullcalendar is used. Import the required elements in the related component.ts file to use fullcalendar

Code: Select all

import { defineFullCalendarElement } from '@fullcalendar/web-component';
// @fullcalendar plugins
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import {AppBreadcrumbService} from '../app.breadcrumb.service';

defineFullCalendarElement();
.........
// also add plugins to fullcalendar options
...
plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
....
6-) Remove fullcalendar css imports from styles.scss

Code: Select all

@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeflex/primeflex.scss";
@import "../node_modules/primeicons/primeicons.css";
@import "../node_modules/prismjs/themes/prism-coy.css";
@import "assets/demo/flags/flags.css";
7-) remove node_modules and run "npm i" or "npm i --legacy-peer-deps" if having any problems during installation, serve the project with "ng serve" after.

8-) watch css changes by "sass --watch src/assets:src/assets --no-source-map"

After these steps, the template should be updated successfully.

Post Reply

Return to “Serenity - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest