StyleUrls не работает в Angular 2

Я использую Angular 2 с SystemJS и пытаюсь добавить таблицу стилей к компоненту.
Поскольку я использую SystemJS, я не может использовать относительный путь на данный момент, поэтому я использовал абсолютный путь для URL-адреса шаблона компонента, а также стиль URL-адрес.
Однако встроенный стиль работает отлично (т.е. styles: ['h1 {font-size: 12px; }'])

Компонент выглядит примерно так:

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['/app/components/dashboard/dashboard.css']
})

Таблица стилей dashboard.css никогда не загружается (и не возвращает никаких ошибок).

Версии инструментов:

~ angular 2: 2.0.0-beta.6
~ systemjs: 0.19.20
~ typescript: 1.8.0

Ответ 1

Вам просто нужно удалить косую черту с начала пути styleUrls следующим образом:

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['app/components/dashboard/dashboard.css']
})

Ответ 2

Angular 2 docs говорят, что SystemJS предоставляет переменную __moduleName, необходимую для относительных имен, аналогично module.id для CommonJS... Вы пытались что?

declare var __moduleName: any;
@Component({
    moduleId: __moduleName,
    selector: 'dashboard',
    templateUrl: 'dashboard.html',
    styleUrls: ['dashboard.css']
})

Ответ 3

У меня была такая же проблема с учебником Heroes. ModuleId решил проблему:

@Component({
  moduleId: module.id, // this is the key
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: ['dashboard.component.css']
})

Без moduleId работают только встроенные стили и шаблоны.

Ответ 4

Я попытался реализовать styleUrls: в примере plunker. Это сработало для меня.

Я использовал следующее:

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app-root.style.css']
})

Проверьте файл app.component.ts и app-root.style.css

https://plnkr.co/edit/z6tl8o0b8cJ6zGofKfmF?p=preview

Ответ 5

URL-адрес стиля выглядит правильно, если index.html находится в папке выше приложения.

Также в разметке html класс должен быть настроен на то, что вы хотите в стилях.

Ответ 6

для этого вам не нужно удалять какую-либо завершающую косую черту или любую вещь, на самом деле я также делал эту ошибку, а html-страница не связывалась с css файлом.

На самом деле я делал глупую ошибку: html-страница как:

<img src="../../assets/images/logo.png" alt="LOGO" class="responsive-img login-logo-width">

css файл как:

login-logo-width {
   width: 260px;
}

Ошибка, которую я получал как: Эта проверка обнаруживает неизвестные селектор CSS и предоставляет возможность объявлять их как класс или id

Итак, htiong, который вам нужно сделать, это: определите параметр id или class, что вы объявили в html файле, как:

.login-logo-width {
    width: 260px;
}

Ответ 7

Не используйте styleUrls. Просто переименуйте файл стиля с расширением scss. Таблица стилей будет использоваться автоматически!

Поэтому мои файлы компонентов будут такими, и будут работать со стилем:

mycomponent.ts
mycomponent.html
mycomponent.scss