angular 2在路由调用时按需加载js库

Question

处理 angular2 Web 应用程序、应用程序库和依赖项会随着时间的推移而增加。所以现在当我的 index.html 页面加载时，它需要比平时更多的时间。

我在页面中调用了大约 15-20 个 javascript 库。

所以我想以在调用特定模块/路由时仅调用它所需的依赖项和库的方式配置应用程序。

仅举个例子，我在里面有company contact us page，我正在加载google map，所以我只想在调用它的路由/contact时才加载它的js文件。

这是我在 index.html

中调用的 google map api

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=my-key" type="text/javascript"></script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=my-key" type="text/javascript"></script>

现在我在我的组件公司联系人中使用它。在里面我也有用于谷歌地图加载的子组件所以现在我想在这个模块/组件调用（子或父）时延迟加载资源。

所以我想在我的联系人组件中调用我的 google map js 文件，这样我可以使 index.html 比以前更轻。

我已经看到我们可以加载特定于组件的 css 所以无论如何我们也可以调用 js 吗？

@Component({
    selector: 'contact',
    templateUrl: './contact.component.html',
    styleUrls: ['../../assets/dmaterial/theme/css/dmaterial-theme.css'],
})

请有任何建议..

Answer 1

没有办法这样做（通过角度本身），但您可以使用此处建议的其他方式 -> https://jmperezperez.com/ondemand-javascript-lazy-loading-stubs/