Skip to content

Issue running extract-i18n against a component with inline styles #20750

Closed
Closed
Issue running extract-i18n against a component with inline styles#20750
Labels
area: @angular-devkit/build-angulardevkit/build-angular:i18nfreq1: lowOnly reported by a handful of users who observe it rarelyseverity5: regressiontype: bug/fix
Milestone
Backlog
@terencehonles

Description

@terencehonles
terencehonles
opened on May 13, 2021

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

Yes, in v12 from v11

Description

When running extract-i18n on a component with inline styles there is a message about missing webpack loaders like the following:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
>     :host {
|       display: block;
|       height: 0;

🔬 Minimal Reproduction

  1. Create a new app ng new repro-app
  2. Edit app.component.ts 
    diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6d0fe10..43db9cf 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styles: [':host { display: block; height: 0; }']
 })
 export class AppComponent {
   title = 'repro-app';
  3. Install npm install @angular/localize
  4. Run npm run ng extract-i18n

🔥 Exception or Error

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
>     :host {
|       display: block;
|       height: 0;

🌍 Your Environment


Angular CLI: 12.0.0
Node: 14.16.1
Package Manager: npm 6.14.12
OS: linux x64

Angular: 12.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, google-maps, language-service, localize, material
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: @angular-devkit/build-angulardevkit/build-angular:i18nfreq1: lowOnly reported by a handful of users who observe it rarelyseverity5: regressiontype: bug/fix

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions