I've been encountering a challenge with angular library projects lately. I'm trying to style a project using a global stylesheet while ensuring that the styles only affect the specific project itself. My attempted solution was to create a component that includes CSS files in the main CSS file, but it doesn't seem to be working as intended. Below is an example of the TypeScript file:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'lib-organization',
templateUrl: './organization.component.html',
styleUrls: ['./organization.component.css'],
encapsulation: ViewEncapsulation.None
})
export class OrganizationComponent implements OnInit {
constructor() { }
ngOnInit() {
console.log('Hello World');
}
}
Additionally, here's the module for my library project:
import { NgModule } from "@angular/core";
// List of components imported...
@NgModule({
declarations: [
// List of components declared...
],
imports: [
// List of modules imported...
],
exports: [SalaryProgrammComponentComponent, FormsModule, ReactiveFormsModule, OrganizationComponent],
bootstrap: [OrganizationComponent],
})
export class OrganizationModule {}
I've provided a snapshot of my project structure for reference:
https://i.sstatic.net/iy8Vd.jpg
If anyone can pinpoint where I might be going wrong, I would greatly appreciate it.