styleUrls 在 Angular 2 中不起作用答案

【问题标题】：styleUrls not working in Angular 2styleUrls 在 Angular 2 中不起作用
【发布时间】：2016-03-24 18:51:50
【问题描述】：

我正在使用带有 SystemJS 的 Angular 2，并尝试将样式表添加到组件中。
由于我现在使用的是 SystemJS 我 can't use relative path，所以我使用了组件模板 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

【问题讨论】：

styleUrls 属性中的绝对路径存在问题。有关 mroe 详细信息，请参阅以下链接：* stackoverflow.com/questions/35188803/… * github.com/angular/angular/issues/6905
它适用于 Angular 2.0.0-beta.9。您是否限制使用 6？
正如@thierry styleUrls 所提到的，不允许使用绝对网址。而且我现在不能在 SystemJS 中使用相对路径。但是我将 angular2 更新为 beta-12，它的行为与前一个相同。
这是 ng2 中的一个开放错误：github.com/angular/angular/issues/4974 在 beta17 中发生在我身上
这个问题似乎已经解决，更新 Angular。 github.com/angular/angular-cli/issues/6007

标签： angular systemjs angular2-template

【解决方案1】：

如果您在项目中使用 PrimeNG 或 Angular Material，那么 styleUrl 将不会像这样工作。您需要导入 ViewEncapsulation 并将 encapsulation: ViewEncapsulation.None 放在@component 定义中。

import { Component, Output, Input, ViewEncapsulation} from '@angular/core';

@Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'message-center',
   templateUrl: './messagecenter.component.html',
   styleUrls: ['./messagecenter.component.css']
})

【讨论】：

对此有何解释？
Ngb 也会发生同样的事情吗？

【解决方案2】：

您只需要像这样从 styleUrls 路径的开头删除斜线：

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

【讨论】：

为什么模板 URL 可以使用前导斜杠，但样式 URL 不行？
这是一个错误，应该允许前导斜杠，就像templateUrl:github.com/angular/angular/issues/4974
...那是一团糟。为什么他们有这么多的路径？导入，templateUrl 和 styleUrl 都是不一样的......奇怪
对于 angular-cli this has changed again - 现在 templateUrl 和 styleUrls 都需要相对路径...
如果您有相对路径，这不是正确的解决方案。如果您保留相对路径，例如 './app.component.css'，则 SystemJS 不会导入它们。如果您删除相关部分 './'，则 SystemJS 将尝试加载 CSS，但会在应用程序的根目录加载 404。

【解决方案3】：

我尝试在 plunker 示例中实现 styleUrls:。它对我有用。

我使用了以下内容：

@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

【讨论】：

【解决方案4】：

Angular 2 文档说相对名称需要 SystemJS exposes __moduleName variable，就像 CommonJS 的 module.id 一样...你试过了吗？

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

【讨论】：

我不明白，你的链接说 404 我使用完全但是得到 __moduleName 没有定义
在我看来它现在已经过时了。如果您使用的是 AOT 编译器，即使使用 SystemJS 也应该不再是问题。在此处查看文档：angular.io/docs/ts/latest/guide/…
错误：静态解析符号值时遇到错误。引用本地（非导出）符号“___moduleName”

【解决方案5】：

我刚刚在英雄教程中遇到了同样的问题。 moduleId 解决了这个问题：

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

没有 moduleId 只有内联样式和模板工作。

【讨论】：

这对 SystemJS 没有任何帮助。行为没有变化。
module.id 方法现已弃用，请勿使用！

【解决方案6】：

只要 index.html 位于 app 上方的文件夹中，样式 url 的外观就会正确。

同样在 html 标记中，需要将类设置为您想要的样式。

【讨论】：

【解决方案7】：

为此，您不需要删除任何尾部斜杠或任何东西，实际上我也犯了这个错误，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 的能力

所以你要做的就是：将参数定义为 id 或 class 您在 html 文件中声明的任何内容：

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

【讨论】：

【解决方案8】：

@boskicthebrain 解决方案中带有 moduleId 的当前文件的相对路径对我有用。

但是，由于我在 webpack 上，这种情况下的 css 文件必须使用 raw-loader （而不是 style-loader/css-loader组合，因为样式加载器不适用于服务器端 AOT）并让 Angular 完成它的工作。

最后，由于::ng-deep 运算符已弃用，而且样式的范围非常有限，我将所有这些都倾倒了，并在 .component.ts 文件。这样做的好处是可以与组件一起加载，同时也是全局 CSS。

【讨论】：