Skip to content

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

@terencehonles

Description

@terencehonles

🐞 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

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions