search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.36k stars 6.74k forks source link

cdk-describedby-message-container is causing blank line at the end of the page #24516

Closed Whisper40 closed 2 years ago

Whisper40 commented 2 years ago

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

This bug does not occur with Angular 12.1.0. I upgraded today to Angular 13.2.5, and this bug appears ( a blank line at the end of the page ). I should have this : image

But i have this : image

Problem caused by this : image

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No error but the problem is caused by this : 

<div class="cdk-describedby-message-container cdk-visually-hidden" style="visibility: hidden;"><div id="cdk-describedby-message-1">Sort</div></div>

If i delete the element, problem is solved..

I don't understand why this appears, because i don't have this element on my side..


### Please provide the environment you discovered this bug in (run `ng version`)

```true
Node : v16.14.0
Angular CLI : 13.2.5
Os : Windows (bash)

    "@angular/animations": "^13.2.5",
    "@angular/cdk": "^13.2.5",
    "@angular/common": "^13.2.5",
    "@angular/compiler": "^13.2.5",
    "@angular/core": "^13.2.5",
    "@angular/forms": "^13.2.5",
    "@angular/platform-browser": "^13.2.5",
    "@angular/platform-browser-dynamic": "^13.2.5",
    "@angular/router": "^13.2.5",

Anything else?

I don't know which angular package is causing this problem. The only thing that i know is that the problem appears with angular : 13.2.5 and 14.0.0-next.5

crisbeto commented 2 years ago

This is likely because you haven't included the mat.core mixin. If you aren't using Material, you can include the cdk.a11y-visually-hidden mixin instead.

Whisper40 commented 2 years ago

I'm not using Material. Are you saying to add A11yModule in app.module.ts ? ( If yes, that is not hidding this blank line )

crisbeto commented 2 years ago

No, you need some structural CSS in order for some of the CDK code to work. You can get that CSS by adding this to your global styles:

@import '@angular/cdk/a11y/a11y-prebuilt.css';
Whisper40 commented 2 years ago

My global style is styles.scss I added your line into this file

// loading progress bar theme
@import './pace.theme';

@import './layout';
@import './overrides';

// install the framework and custom global styles
@include nb-install() {

  // framework global styles
  @include nb-theme-global();
  @include nb-auth-global();

  @include ngx-layout();
  // loading progress bar
  @include ngx-pace-theme();

  @include nb-overrides();
};

@import '@angular/cdk/a11y/a11y-prebuilt.css';

But it is generated error on compilation : 

Build at: 2022-03-04T09:30:54.948Z - Hash: a9f5438438f816b7 - Time: 3731ms

./src/app/@theme/styles/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/app/@theme/styles/styles.scss - Error: 
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find '@angular/cdk/a11y/a11y-prebuilt.css'
  in [
    C:\Users\username\GithubProjects\projet-fo-test-update-version\src\app\@theme\styles
  ]
    at C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\postcss-import\lib\resolve-id.js:35:13
    at async Promise.all (index 0)
    at async LazyResult.runAsync (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\postcss\lib\lazy-result.js:396:11)
    at async Object.loader (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\postcss-loader\dist\index.js:97:14)

./src/app/@theme/styles/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
35 │ @import '@angular/cdk/a11y';
   │         ^^^^^^^^^^^^^^^^^^^
   ╵
  src\app\@theme\styles\styles.scss 35:9  root stylesheet
    at tryRunOrWebpackError (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:5023:12)
    at __webpack_require__ (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:4980:18)
    at C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:5051:20
    at symbolIterator (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:4958:43
    at symbolIterator (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\neo-async\async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
35 │ @import '@angular/cdk/a11y';
   │         ^^^^^^^^^^^^^^^^^^^
   ╵
  src\app\@theme\styles\styles.scss 35:9  root stylesheet
    at Object.<anonymous> (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\Users\username\GithubProjects\projet-fo-test-update-version\src\app\@theme\styles\styles.scss:1:7)
    at C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\tapable\lib\Hook.js:14:14)
    at C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:5025:39
    at tryRunOrWebpackError (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:5023:12)
    at __webpack_require__ (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:4980:18)
    at C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:5051:20
    at symbolIterator (C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\neo-async\async.js:3485:9)

Generated code for C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\Users\username\GithubProjects\projet-fo-test-update-version\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\Users\username\GithubProjects\projet-fo-test-update-version\src\app\@theme\styles\styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n   ╷\n35 │ @import '@angular/cdk/a11y';\n   │         ^^^^^^^^^^^^^^^^^^^\n   ╵\n  src\\app\\@theme\\styles\\styles.scss 35:9  root stylesheet");

× Failed to compile.
crisbeto commented 2 years ago

Ah sorry, it looks like the import path is actually @angular/cdk/a11y-prebuilt.css.

Whisper40 commented 2 years ago

Thanks ! It works I know that angular can automatically upgrade things when upgrading. Is there no way to add this thing in order that other users do not encouter the problem ?

crisbeto commented 2 years ago

That wouldn't have helped in this case, because the CDK has worked like this since the beginning so there would be nothing to migrate.

Whisper40 commented 2 years ago

Last questions :) So you are saying that this line should be there for a long time ? Why it was working with Angular12 ?

crisbeto commented 2 years ago

Yes, this hasn't changed in a few years. It has either been there and you never noticed it, or you started using some CDK functionality that started to show it.

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.