CSS-файл компонента в библиотеке не загружается вместе с компонентом в угловом приложении - PullRequest
Новая
       44

CSS-файл компонента в библиотеке не загружается вместе с компонентом в угловом приложении

0 голосов
/ 07 июня 2019

Я разработал библиотеку в угловом приложении (которое генерируется с использованием 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']
})

На рисунке ниже показана структура каталога приложения.

enter image description here

Как видите, guitar-chord-generator.component.css - это файл CSS для компонента.

1 Ответ

1 голос
/ 07 июня 2019

Ваш компонент имеет 

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

Свойство styles принимает массив строк, содержащих код CSS.

Вы должны использовать styleUrls

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