Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
initial css loading error after upgrade to version 12
See original GitHub issueWhich @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
I don't get any error in the browser console or something that could indicate the reason
Please provide the environment you discovered this bug in
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.2.3
Node: 14.16.1
Package Manager: npm 6.14.12
OS: linux x64
Angular: 12.2.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1202.3
@angular-devkit/build-angular 12.2.3
@angular-devkit/build-optimizer 0.1101.4
@angular-devkit/core 12.2.3
@angular-devkit/schematics 12.2.3
@angular/flex-layout 12.0.0-beta.34
@nguniversal/builders 12.1.0
@nguniversal/express-engine 12.1.0
@schematics/angular 12.2.3
rxjs 6.6.7
typescript 4.3.5
Anything else?
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"
}
]
},
"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"
}
]
},
"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
}
}
Issue Analytics
- State:
- Created 2 years ago
- Comments:5
Top Results From Across the Web
initial css loading error after upgrade to version 12 - Codesti
After upgrading to version 12 of angular, I started noting a functioning that didn't happen before. When opening the site, it seems that...
Read more >inlineCritical CSS asynchronous loading method breaks with ...
Description. The method used for inlining critical css and asynchronously loading it, breaks and doesn't load the external stylesheet when you ...
Read more >How to Solve the Chunk Load Error in JavaScript - Rollbar
If you are encountering this error as a user of an application, the most simple way to resolve it is to clear your...
Read more >After upgrading npm package of Angular app, sass-loader ...
It was because of a cached version of node-sass.You can try this. Remove the node-sass from global npm-cache(For Windows users ...
Read more >HTML Video element, not working after iosSafari15 update
after update (ios15.0) of my iPhone12, video element on my website, ... All I have been getting is a black screen and sometimes...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
“resolved” by doing the following.
rather, setting
inlineCriticaltofalse.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
inlineCriticalMy angular.json
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.