Closed GlauberF closed 3 years ago
alan-agius4
commented
3 years ago Checking the url you provided I am unable to see any flickering, or I need to create and account and login to a specific page?
What can be the cause is that one or more CSS selectors cannot be parsed when rendering the a particular page. Can you check your server logs and see if you have any warnings or errors during requests related to this?
GlauberF
commented
3 years ago I think it shouldn't be a selector problem, as this problem didn't happen in previous versions, it started in v12. Maybe some configuration in angular.json or something related to functionality that was implemented to extract critical css
maybe something related to service-worker/angular pwa
GlauberF
commented
3 years ago "resolved" by doing the following.
{
"configurations": {
"production": {
"optimization": {
"styles": {
"minify": true,
"inlineCritical": false
}
}
}
}
}rather, setting inlineCritical to false.
but now I have a problem defining the optimization block above.
That is, I understand that something you need for the first painting was not loading, the angular did not understand how to be necessary. It is being loaded slowly, so at first we can see that the css doesn't look as we expected, but then it adjusts (because it loaded the css it needed)
my question now is trying to understand how the angular determines what is important and what is not, because clearly something has failed in this determination.
And why did I notice this now in V12, because according to the documentation, from v12 on it defaults to true for inlineCritical
My angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"vimbo": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json",
"customWebpackConfig": {
"path": "custom-webpack.config.js",
"replaceDuplicatePlugins": true
},
"assets": [
"src/robots.txt",
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest",
"src/manifest.webmanifest",
{
"glob": "**/*",
"input": "node_modules/ngx-monaco-editor/assets/monaco",
"output": "./assets/monaco/"
}
],
"styles": ["src/styles.scss", "./node_modules/froala-editor/css/froala_editor.pkgd.min.css"],
"scripts": ["src/assets/js/block-inspect-element-vimbo.js", "src/assets/js/listening-postmesage.js"]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all",
"budgets": [
{
"type": "bundle",
"name": "polyfills",
"baseline": "150kb",
"maximumWarning": "50kb",
"maximumError": "100kb"
},
{
"type": "bundle",
"name": "styles",
"baseline": "1.4mb",
"maximumWarning": "600kb",
"maximumError": "900kb"
},
{
"type": "bundle",
"name": "main",
"baseline": "2.5mb",
"maximumWarning": "3mb",
"maximumError": "4mb"
},
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "6.4mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "15kb",
"maximumError": "35kb"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": false
}
},
"ec": {
"sourceMap": true,
"extractCss": true
},
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"configurations": {
"production": {
"browserTarget": "vimbo:build:production"
},
"hmr": {
"hmr": true,
"browserTarget": "vimbo:build:hmr"
},
"ec": {
"browserTarget": "vimbo:build:ec"
},
"development": {
"browserTarget": "vimbo:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "vimbo: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",
"assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
"styles": ["src/styles.scss"],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
"exclude": ["**/node_modules/**", "**/src/app/fake-db/**/*", "**/src/assets/angular-material-examples/**/*", "**/@schematics/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "vimbo:serve"
},
"configurations": {
"production": {
"devServerTarget": "vimbo:serve:production"
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json",
"inlineStyleLanguage": "scss"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"scripts": true,
"styles": false
}
},
"development": {
"optimization": false,
"sourceMap": true,
"extractLicenses": false
}
},
"defaultConfiguration": "production"
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"configurations": {
"development": {
"browserTarget": "vimbo:build:development",
"serverTarget": "vimbo:server:development"
},
"production": {
"browserTarget": "vimbo:build:production",
"serverTarget": "vimbo:server:production"
}
},
"defaultConfiguration": "development"
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": ["/"]
},
"configurations": {
"production": {
"browserTarget": "vimbo:build:production",
"serverTarget": "vimbo:server:production"
},
"development": {
"browserTarget": "vimbo:build:development",
"serverTarget": "vimbo:server:development"
}
},
"defaultConfiguration": "production"
}
}
}
},
"defaultProject": "vimbo",
"cli": {
"analytics": false
}
}You also need to disable critical css i lining for SSR
See: https://github.com/angular/angular-cli/issues/21726#issuecomment-915260966
As to how the engine determines what is critical you can it basically it inlines all CSS rules used the document. See: https://github.com/GoogleChromeLabs/critters and https://github.com/angular/angular-cli/issues/18730 for further information.
angular-automatic-lock-bot[bot]
commented
2 years ago This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
Which @angular/* package(s) are the source of the bug?
compiler-cli, compiler, core, service-worker
Is this a regression?
No
Description
After upgrading to version 12 of angular, I started noting a functioning that didn't happen before. When opening the site, it seems that the css is not loaded immediately and only then is loaded and then the site is as it should, with the css working.
See the Gif:
to see it live https://app-homologacao.vimbo.com.br/pages/auth/login
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Please provide the environment you discovered this bug in
Anything else?
angular.json