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.
Warning: Unable to locate stylesheet -> Upgrade v11 to v14
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 130
- Joined: 17 Dec 2021, 09:33
Hi,
Could you please share your package.json and angular.json or give instructions to reproduce the issue?
Could you please share your package.json and angular.json or give instructions to reproduce the issue?
package.json
angular.json
index.html
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"
}
}
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>
-
- Posts: 130
- Joined: 17 Dec 2021, 09:33
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
2-) Update angular.json
3-) Update tsconfig.json
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.
5-) Update the component where the fullcalendar is used. Import the required elements in the related component.ts file to use fullcalendar
6-) Remove fullcalendar css imports from styles.scss
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.
watch css changes by "sass --watch src/assets:src/assets --no-source-map"
After these steps, the template should be updated successfully.
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"
}
}
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
}
}
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]
...
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 ],
....
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";
watch css changes by "sass --watch src/assets:src/assets --no-source-map"
After these steps, the template should be updated successfully.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest