угловая 2 загрузка библиотеки js по запросу при вызове маршрута

Question

работает над веб-приложением angular2, библиотеками приложений и зависимостями, увеличивающимися с течением времени .. так что теперь, когда моя загрузка index.html занимает больше времени, чем обычно.

Есть около 15-20 библиотек javascript, которые я вызываю на странице.

поэтому я хочу настроить приложение таким образом, чтобы при вызове определенного модуля/маршрута только требуемые зависимости и библиотеки вызывались.

только для примера, у меня есть company contact us page внутри, что я загружаю google map, поэтому я хочу загрузить его в файл js только тогда, когда будет называться маршрут /contact.

вот мой Google Map API вызов в index.html

<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, так что теперь я хочу ленить загружать ресурсы, когда этот модуль/компонент называется (дочерний или родительский).

так я хочу назвать моего Google Map файл в расслоение плотной контактному компонента, так как это я могу сделать 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/