Bootstrap (frontend) + ngMaterial (backend) вместе в приложении Angular-Meteor?

Question

Есть ли способ загрузить JS выборочно в зависимости от модуля?

Я хочу, чтобы Bootstrap.css был включен в шаблоны, которые находятся во внешнем и угловом материалах для temaplates, которые находятся в backend моего приложения.

В настоящее время, если я импортирую bootstrap.css в одном компоненте, он загружается глобально, что я не хочу. Это также означает, что backend.css и ngMaterial также будут загружены во внешние компоненты ...

Answer 1

Так что, чтобы условно загрузить CSS, я придумал не очень элегантный, но работает.

Я использую Angular UI Router, и когда дело доходит до разрешения маршрута, я добавляю/удаляю link тег с листом CSS, используя angular.element(). В моем случае это абстрактные маршруты для backend и frontend, поэтому он разрешает (и добавляет/удаляет) тег ссылки только один раз при просмотре маршрутов для детей.

// Frontend - add Bootstrap 

$stateProvider 
.state('front', { 
    url: "", 
    abstract: true, 
    templateUrl, 
    resolve: { 
     importBootstrapCss() { 
      let head = angular.element(document.querySelector('head')); 
      head.append("<link rel='stylesheet' type='text/css' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' id='bootstrap-css'>"); 
     } 
    } 
}); 

// Backend - remove Bootstrap 

$stateProvider 
.state('backend', { 
    url: "/backend", 
    abstract: true, 
    templateUrl, 
    resolve: { 
     deleteBootstrapCss() { 
      let link = angular.element(document.getElementById('bootstrap-css')); 
      link.remove(); 
     } 
    } 
});