How to include library project in angular

Question

I have a problem with angular library projects. I need to style a project with global stylesheet but only affect itself. I tried created a component that includes css files to main css file. But it's not working exactly. Here is a example of ts 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');
  }

}

And my module of library project:

import { NgModule } from "@angular/core";
import { GeneralConditionComponent } from "./components/contract/general-condition.component";
import { TransmissionConditionComponent } from "./components/contract/transmission-condition.component";
import { CompanyDetailComponent } from "./components/company/company-detail.component";
import { CompanyListComponent } from "./components/company/company-list.component";
import { RouterModule } from "@angular/router";
import { ConfigurationComponent } from "./components/configuration/configuration.component";
import { SalaryProgrammComponentComponent } from './components/salary-programm-component/salary-programm-component.component';
import { BrowserModule } from "@angular/platform-browser";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OrganizationComponent } from "./organization.component";

@NgModule({
  declarations: [
    GeneralConditionComponent,
    TransmissionConditionComponent,
    CompanyDetailComponent,
    CompanyListComponent,
    ConfigurationComponent,
    SalaryProgrammComponentComponent,
    OrganizationComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: "list",
        component: CompanyListComponent,
        data: {
          authorities: [],
          pageTitle: ""
        }
      },
      {
        path: "configuration",
        component: ConfigurationComponent,
        data: {
          authorities: [],
          pageTitle: ""
        }
      },
      {
        path: "contract/general-condition",
        component: GeneralConditionComponent,
        data: {
          authorities: [],
          pageTitle: ""
        }
      },
      {
        path: "contract/transmission-condition",
        component: TransmissionConditionComponent,
        data: {
          authorities: [],
          pageTitle: ""
        }
      },
    ]),
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [SalaryProgrammComponentComponent, FormsModule, ReactiveFormsModule, OrganizationComponent],
  bootstrap: [OrganizationComponent],

})
export class OrganizationModule {}

Here is some screen of my project structure:

What am i doing wrong ?

Answer 1

I figured out. I just configured my library project module to

RouterModule.forChild([
      {
        path: '',
        component: OrganizationComponent,
        children: [
          {
            path: "list",
            component: CompanyListComponent,
            data: {
              authorities: [],
              pageTitle: ""
            }
          },
          {
            path: "configuration",
            component: ConfigurationComponent,
            data: {
              authorities: [],
              pageTitle: ""
            }
          },
          {
            path: "contract/general-condition",
            component: GeneralConditionComponent,
            data: {
              authorities: [],
              pageTitle: ""
            }
          },
          {
            path: "contract/transmission-condition",
            component: TransmissionConditionComponent,
            data: {
              authorities: [],
              pageTitle: ""
            }
          },
        ]
      }
    ]),