CODEWITHSUNDEEP
cssangularstylesangular-cliangular-library
Dame Lyngdoh
Dame Lyngdoh

Reputation: 352

CSS file of a component within a library does not get loaded with the component in angular app

I have developed a library in an angular application (which is generated using angular cli) and the library contains a component with its own template file and stylesheet. However, when I load the module in the app.module.ts and run the app (using ng serve for simplicity), the styles within the stylesheet are not rendered.

The app.module.ts file contains the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { GuitarChordGeneratorModule } from 'projects/guitar-chord-generator/src/public-api';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        GuitarChordGeneratorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Below is a snippet from the guitar-chord-generator.component.ts file:

import { Component, OnInit, Input } from '@angular/core';
import { Chord } from './chord';
import { GCSGConfig } from './gcsgconfig';

@Component({
    selector: 'lib-guitar-chord-generator',
    templateUrl: './guitar-chord-generator.component.html',
    styles: ['./guitar-chord-generator.component.css']
})

The image below is the directory structure of the app.

enter image description here

As you can see that guitar-chord-generator.component.css is the CSS file for the component.

Upvotes: 0

Views: 1919

Answers (1)

abney317
abney317

Reputation: 8492

Your component has

styles: ['./guitar-chord-generator.component.css']

The styles property takes an array of strings that contain CSS code.

You should be using styleUrls

styleUrls: ['./guitar-chord-generator.component.css']

Upvotes: 3

Related Questions