[Angular] Lazy Load CSS at runtime with the Angular CLI
Ever had the need for multiple "app themes", or even to completely dynamically load CSS based on which customer logs into your application? You could of course bundle all of the various themes into a single CSS entry file, but your application size would suffer a lot. Therefore, in this lesson we're going to have a look how to define multiple entry-level CSS files and how to "lazy load" them at runtime.
Source: https://egghead.io/lessons/angular-lazy-load-css-at-runtime-with-the-angular-cli
For example we want to lazy load two theme file: 'client-a-style.scss', 'client-b-style.scss':
In angular.json:
"architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/dyncss", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": false, "assets": ["src/favicon.ico", "src/assets"], "extractCss": true, "styles": [ "src/styles.scss", { "input": "src/client-a-styles.scss", "bundleName": "client-a", "inject": false }, { "input": "src/client-b-styles.scss", "bundleName": "client-b", "inject": false } ], "scripts": [] },
After you do `ng build --prod`, it will generate two css files: 'client-a.css' and 'client-b.css'.
Then we can do lazy load when button click:
import { Component, Inject, Renderer2 } from '@angular/core'; import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'dyncss'; // reference document constructor(@Inject(DOCUMENT) private document: Document) {} loadStyle(styleName: string) { // get head const head = this.document.getElementsByTagName('head')[0]; // create link tag to load css let themeLink = this.document.getElementById( 'client-theme' ) as HTMLLinkElement; if (themeLink) { // if the link is already exist, we just replace the link source themeLink.href = styleName; } else { // if link doesn't exist, we create link tag const style = this.document.createElement('link'); style.id = 'client-theme'; style.rel = 'stylesheet'; style.href = `${styleName}`; head.appendChild(style); } } }
<button type="button" (click)="loadStyle('client-a.css')"> Load client style a </button> <button type="button" (click)="loadStyle('client-b.css')"> Load client style b </button>
相关文章
- 怎么组织 Angular 项目 |Top 5 技巧
- css opacity属性_CSS中的opacity属性[通俗易懂]
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- angular debounce throttle「建议收藏」
- 前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
- Angular HTTPClient API 在 SAP 电商云中的使用
- 前端面试题angular_Vue前端面试题
- 使用 Angular 14 的 inject 函数优化对 Ngrx 的使用方式
- 【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild
- Angular 应用如何回退到之前曾经浏览过的页面
- 关于 Angular 应用对浏览器 Back 按钮支持问题的讨论
- 前端必备的 CSS 库,normalize.css
- 【CSS教程】紫色渐变登陆布局html+css代码
- 关于 Angular 应用的 Bootstrap 过程
- 关于 Angular 应用部署时的 base-href 参数
- The Shapes of CSS(css的形状)详解编程语言
- Angular 框架将进入 2.0 时代
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 高质量 VR 直播有望了,Google 带来 Equi-Angular Cubemaps 技术
- CSS规则层叠的应用css必须要注意的几点
- CSS顶级技巧大放送,div+css布局必知
- CSS教程之css选择器、属性、值
- 简单的加密css地址防止别人下载你的CSS文件的方法
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- 基于豆瓣API+Angular开发的webApp