0

I am building a custom library with ng-packagr and an application that consumes the library. When I run the application, the styles from the library aren't working. When I look in the browser at the styles generated, I noticed something odd. It doesn't seem like the view encapsulation is working properly.

I found the following css for my component in a style tag in the page header:

<style> 
  app-mycomponent[_ngcontent-ryx-c3] .myclass[_ngcontent-ryx-c3]{
    font-size:1.3rem;
    display:block;
    margin-left:6rem
  }
</style>

however, in the html the _ngcontent-* attribute doesn't match up 

<app-mycomponent _ngcontent-ryx-c2="" ...>
  <span _ngcontent-ryx-c3="" class="my-class">test</span>

So the css is looking for the attribute combination

[_ngcontent-ryx-c3] [_ngcontent-ryx-c3]

but my html has

[_ngcontent-ryx-c2] [_ngcontent-ryx-c3]

When I switch the 2 to a 3, the style works. Why is Angular encapsulating the styles this way? How to I fix this? Is there a configuration variable that I can set?

My component definition is very simple:

import {Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mycomponent',
  template: `<span class='my-class'>Test</span>`,
  styleUrls: ['./app-mycomponent.component.scss'],
})
export class AccessWorkspaceComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
 }

css definition inside app-mycomponent.component.scss:

.my-class{
    font-size:1.3rem;
    display:block;
    margin-left:6rem
 }
afriedman111
  • 1,925
  • 4
  • 25
  • 42
  • can you show your actual component declarations and css? the generated stuff isn't helpful in figuring out the issue – bryan60 Dec 19 '19 at 20:59
  • If you haven’t overridden the default ViewEncapsulated value of emulated then you’re likely putting the styles on the wrong “level” of the parent rather than directly within the child. As bryan60 says, we need the component decorations, relevant html and css to help you – Andrew Allen Dec 19 '19 at 21:11
  • The component declaration is really simple. My base app is running on a custom webpack configuration. My libraries have been built with ng-packagr – afriedman111 Dec 19 '19 at 21:18
  • 1
    "custom webpack configuration" sounds like the problem. Probably need to know what you're doing there and why – bryan60 Dec 19 '19 at 21:22

0 Answers0