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

Question

我正在尝试切换href一个<link />用于主题目的,并且SCSS主题存在于我的monorepo的包文件夹中,这些文件夹是符号链接的node_modules.我需要能够编译和引用这些.

我遇到了以下固定问题:angular/angular-cli#3401并且一直试图实现类似的东西:

"styles": [
    "styles.scss",
    {
        "input": "../node_modules/@org/themes/dark.scss",
        "output": "dark",
        "lazy": true
    }
],

我的理解(也许是不正确的)是这会将dark.scss文件编译成dist/dark.bundle.css我可以通过http:// localhost:4200/dist/dark.bundle.css加载它但是它没有按预期工作.我误解了某些事情或完全错误吗？

如何编译SCSS文件node_modules,然后我可以在应用程序中延迟加载？我可以尝试另一种/更好的方法吗？

补充说明:

• 使用Angular版本 4.2.4
• 使用Angular CLI版本 1.3.0
• 这种方法的文档
• 我在monorepo工作,所以node_modules/@org/themes是一个符号链接
• 我已尝试使用ng serve --preserve-symlinks选项,以防上述问题.它没有任何区别

我已经研究过Angular Material docs网站解决这个问题的方式,看起来他们有一个自定义构建脚本,assets在服务应用程序之前将SCSS文件编译成目录中的CSS文件.我认为上面修复的问题消除了对这一步的需要,但也许没有.这是唯一可行的方法吗？

解决了

感谢@Kuncevic.我错过了--extract-css国旗.

工作配置:

"styles": [
    "styles.scss",
    {
        "input": "../node_modules/@org/themes/src/dark.scss",
        "output": "themes/dark",
        "lazy": true
    }
],

使用以下服务脚本,我可以通过http:// localhost:4200/themes/dark.bundle.css访问它:

ng serve --extract-css --preserve-symlinks

Answer 1

通过设置"lazy": true意味着它不会出现index.html但是没有机制会延迟为你加载该包,请检查该注释:

懒惰的选项实际上并不是懒惰加载任何东西.它只是阻止它在应用程序启动时执行.

我同意"lazy": true起初有点混乱.

如果你运行,ng build你实际上可以看到你的构建中输出了什么,并分析cli生成的所有文件.

当你这样做时:

{
    "input": "../node_modules/@org/themes/dark.scss",
    "output": "dark",
    "lazy": true
}

您应该可以直接访问http:// localhost:4200/dark.bundle.js,但它不会出现在index.html您设置的文件中"lazy": true

如果你想获得dark.bundle.cssbundle而不是 dark.bundle.jsdev模式,你可以使用--extract-cssflag.

cli生成样式以js在开发模式下捆绑的原因是因为这种方式更快.当你做prod构建时ng buld --prod它会像.css默认情况下默认输出.

Answer 2

我知道这是一篇旧帖子，但我还没有找到一个完整的例子，只是片段来在 Angular 中为CSS 文件或js 文件实现延迟加载。这是 Angular 7.1.4 版本和font-awesome 4.7和bootstrap 4延迟加载的解决方案

1. 安装 bootstrap 和 font-awesome

    npm install --save font-awesome bootstrap

2. 编辑angular.json文件以确保编译器将生成分离的文件到dist文件夹中

      "styles": [
         "src/styles.css",
         {
           "input": "./node_modules/font-awesome/css/font-awesome.css",
           "lazy": true,
           "bundleName": "font-awesome"
         },
         {
           "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css",
           "lazy": true,
           "bundleName": "bootstrap"
         }
       ], 
   

   参数说明：

"input" : "第一步中的命令将下载引导程序和字体的位置"

"lazy" : " true的值将确保编译器不会将bootstrap.min.css和font-awesome.css文件嵌入到发送到浏览器的编译文件中"

"bundleName" : "是您将在dist文件夹中找到的名称"

3. 根据此答案，您必须将以下脚本添加到index.html下的标题标记内 <base href="/">

    npm install --save font-awesome bootstrap

注意： window.onload = function ()用于确保页面被加载（这是因为我们进入dist的文件是.js格式；这是 Angular 编译的快捷方式）

4. 运行此命令，编译应用程序

    ng build --extract-css=false --prod

注意：在构建时我们使用--extract-css=false来生成.js文件

测试

• 进入浏览器并将其更改为 dev（F12 或右键单击并检查元素）
• 选择网络选项卡
• 按 Ctrl+Shift+R 进行硬重新加载

您必须能够看到 bootstrap.js 和 font-awesome.js 像照片中一样分别加载，并且您还可以看到没有样式的页面=> 这是样式加载良好的时刻DOM 加载后