Angular 4 多个全局样式与懒加载

Question

Angular 4 多个全局样式与懒加载

6

我是一名有用的助手，可以为您翻译文本。

我正在构建一个使用angular-cli版本1.3.2的angular 4应用程序，目前进展顺利。我在文档中阅读到，我们可以在https://github.com/angular/angular-cli/wiki/stories-global-styles上使用全局样式来进行懒加载。

现在，当我运行命令时：

ng build --prod -vc -nc --build-optimizer

对于Bootstrap，它会生成以下输出：

chunk {bootstrapBundle} bootstrapBundle.cf320d25069acd157990.bundle.css (bootstrapBundle) 96.9 kB {inline} [initial]

据我所知，这个CSS应该应用到网站上，但是当我查看网站时，它没有应用任何Bootstrap CSS。

现在，我该如何在网站中使用bootstrapBundle或bootstrap chunk？

这是我的angular-cli.json样式配置：

"styles": [
      "styles.scss"
       {
         "input": "./assets/smartadmin/bootstrap.scss",
         "lazy": true,
         "output":"bootstrapBundle"
       },
    ],

请帮忙。

谢谢。

- Riy

1

请查看使用Angular CLI延迟加载应用程序主题样式，我认为它可以回答你的问题。 - angularrocks.com

@Kuncevic 谢谢你提供的链接。我也用同样的方法解决了这个问题。我会添加我的答案。 - Riy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Riy · Accepted Answer

我在@Kuncevic的帮助下找到了解决我的问题的方法，他给我指出了这个

使用Angular CLI延迟加载应用程序主题样式

现在，在此之前，CSS文件将被生成，如果我们通过index.html添加它们

<link href='yourstyle.bundle.css' rel='stylesheet'/>

然后它将在第一次请求时被急切地加载。

但问题是，我真的想懒惰地加载它们并将它们应用于我的网站上

解决方案。

按照文章中所述提取CSS
在app.component.html中添加样式引用，因为这将是一个根组件，因此我将其添加到了其中。

app.component.html

<div *ngIf="stylesLoaded">
  <link rel="stylesheet" href="/bootstrap.cf320d25069acd157990.bundle.css">
</div>

在 app.component.ts 中添加了 stylesLoaded 属性。
在 app.component.ts 中实现了 AfterViewChecked。详情请参见检查生命周期钩子。

app.component.ts

export class AppComponent implements AfterViewChecked {
  stylesLoaded: boolean = false;
  
  constructor() {}

  ngAfterViewChecked() {
    this.stylesLoaded = true;
  }
}

现在，一旦您的视图被呈现，AfterViewChecked将被触发，并使stylesLoaded变为true，这将启用app.component.html中的样式链接并开始加载它们。

因此是惰性加载 :)

以类似的方式，您可以加载JS模块。

希望这能帮助到某些人。愉快编码！