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>

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

所以我想在我的联系人组件中调用我的谷歌地图js文件，所以像这样我可以让 index.html 比以前更轻。

我已经看到我们可以加载 css 特定于组件，所以我们还可以调用js吗？

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

请提出任何建议..

Answer 1

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

当路线呼叫时，角度2加载js库按需

1 个答案: