为一个组件加载外部 JS 和 CSS答案

【问题标题】：Loading External JS and CSS for one component为一个组件加载外部 JS 和 CSS
【发布时间】：2017-08-28 10:57:55
【问题描述】：

我有一个 Angular 4 应用程序，其中我只为一个组件使用 js 和 css 文件。我看到的所有文档都建议将这些文件放在 Index.html 中，但我不想在每条路线上加载它们，只是在它们所使用的组件上加载它们。这些文件与其他捆绑的 js 位于 dist 文件夹中，并被 webpack 从另一个文件夹复制。

【问题讨论】：

import 语句不适合您吗？
如何导入随机 js 文件？它不是一个模块
你仍然可以做到。我没有发现任何问题。

标签： javascript angular webpack

【解决方案1】：

您可能对 LazyLoad 感兴趣。

查看Routing and Lazy loading @NgModules 或此Lazy Loading a Module 教程。

【讨论】：

它是一个组件，而不是一个模块。我必须在模块级别加载文件吗？

【解决方案2】：

如果你使用的是 sass，那么你可以直接从它的包中导入任何 css 文件例如在 example.component.scss 文件中添加这个

@import '~bootstrap/dist/css/bootstrap.min.css';

【讨论】：

【解决方案3】：

对于 JS 文件，您必须实现 AfterViewInit 生命周期挂钩，并在此处导入您的文件，例如：

test.component.ts

import { Component, AfterViewInit } from '@angular/core';

@Component({
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements AfterViewInit {

  public ngAfterViewInit() {
    require('path/to/your/script.js');
  }
}

对于 CSS 文件，将它们导入到您的 scss 文件中，如下所示：

test.component.scss

@import '~path/to/your/external/style.min.css';

【讨论】：

使用 ngAfterViewInit() 不会加载 js 文件。
确保你写的是正确的路径。你在用 webpack 吗？
是的，打包前后的位置我都试过了，没有
要从 node_modules 导入脚本吗？
我实际上让它工作了，问题是这个 js 文件加载了其他 js/css 文件（ckeditor），这一切都是用 SSR 完成的。遗憾的是，我认为需要做更多的工作：/