Cannot use relative path for styleUrls in Angular

0
votes

I have below file structure:

/src/
  app/
  components/
    block/
      block.html
      block.scss
      block.ts
      sub-block.ts

The sub-block is a component which inherits block component and share the same html file and scss file:

@Component({
    selector: 'sub-block',
    templateUrl: 'block.html',
    styleUrls: ['./block.scss'],
})
export class SubBlockComponent extends BlockComponent{...}

When I run app, it reports error:

 GET http://localhost:8100/block.scss 404 (Not Found)

I tried

  • styleUrls: ['block.scss']
  • styleUrls: ['./block.scss']
  • styleUrls: ['/src/components/block/bock.scss']
  • styleUrls: ['src/components/block/bock.scss']
  • styleUrls: ['../components/block/bock.scss']

All failed.

How can I get it work? Is that revelant to tsconfig or webpack?

3
angularionic-framework
Have you tried ['block.scss']? - DariusFontaine
@GerryMcBride yes, I tried. - D C
I found: even if there is no sub-block, the styleUrls doesn't work too. - D C

3 Answers

0
votes

Maybe you're are experiencing this bug? https://github.com/angular/angular/issues/4974 In your case the solution may be to just remove the styleUrls declaration line (a comment in the bug issue suggests this).

0
votes

You might want to make sure your baseUrl is configured in your tsconfig.json. That could be why it can't find the file.

See: https://www.typescriptlang.org/docs/handbook/module-resolution.html

0
votes

Created a stackblitz with the block and sub-block components, able to use same HTML and SCSS in both places https://stackblitz.com/edit/angular-vkhz8b