库中组件的CSS文件未在angular应用程序中加载该组件

Question

我已经在angular应用程序中开发了一个库（使用angular cli生成），并且该库包含一个具有自己的模板文件和样式表的组件。但是，当我在app.module.ts中加载模块并运行应用程序（为简化起见，使用ng serve）时，样式表中的样式不会呈现。

• 该库是使用ng generate library
生成的
• 该库包含在应用程序的projects目录中
• 该组件位于<name of the component>/src/lib目录中

app.module.ts文件包含以下代码：

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 { }

以下是guitar-chord-generator.component.ts文件中的摘录：

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']
})

下面的图像是应用程序的目录结构。

您会看到guitar-chord-generator.component.css是组件的CSS文件。

Answer 1

您的组件具有

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

  

styles property采用包含CSS代码的字符串数组。

您应该使用styleUrls

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