Как избавиться от нескольких тегов стиля, вставленных в голову Angular Материал?

Ответ 1

Я не знаю, стоит ли хлопот. Пожалуйста, создайте резервную копию своей работы, я не тестировал ее:

Angular -материал включает в себя некоторую тему css по умолчанию как константную переменную в JavaScript. Вы можете просмотреть этот код в angular-material.js внизу, начиная с строки:

angular.module("material.core").constant("$MD_THEME_CSS"...

При загрузке в ваш браузер это добавляет много тегов стиля CSS в динамический документ страницы. Чтобы отключить их, вам необходимо перекомпилировать angular -материал самостоятельно, используя следующие команды:

git clone https://github.com/angular/material.git

Затем установите зависимости:

cd material
npm install

Затем перейдите к gulp/util.js и измените строку 53 на:

var jsProcess = series(jsBuildStream, themeBuildStream() )

:

var jsProcess = series(jsBuildStream)

Затем запустите процесс сборки:

gulp build

Этот вопрос дает более подробную информацию: Как избавиться от Angular Материал дополнительных стилей и CSS, связанных с ним "сильно"

Ответ 2

Прямо из документов angular

Lazy Generate Themes

По умолчанию каждая тема генерируется при определении. Вы можете отключить это в разделе конфигурации с помощью $mdThemingProvider

angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider) {
        //disable theme generation
        $mdThemingProvider.generateThemesOnDemand(true);
    });

Вот точный синтаксис, который я использовал, и он работал как чемпион. (Важно отметить, что это тоже не нарушило для нас никакого стиля):

.config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.generateThemesOnDemand(true);
}])

Также может быть полезно знать, что это кажется стандартом для angular. Мне тоже пришлось отключить анимацию. По умолчанию они оживляли почти все.

Ответ 3

Я не уверен, отвечает ли этот вопрос на вопрос, но чтобы полностью удалить все элементы <style/> в верхней части страницы, я сделал следующее:

angular.module( 'myApp', ['ngMaterial'] )
   .config( function( $mdThemingProvider, $provide ) {
       $mdThemingProvider.theme('myTheme')
           .primaryPalette('blue')
           .accentPalette('green')
           .warnPalette('yellow');
       $mdThemingProvider.generateThemesOnDemand(true);
       $provide.value('themingProvider', $mdThemingProvider);
    });

и это успешно удалило все элементы.

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

angular.module('myApp').controller('MyCtrl', function( themingProvider ){
    themingProvider.reload('myTheme'); 
    // pretty sure it themingProvider.generateTheme('myTheme')
    // but I ended up refactoring this workaround out, anyway.
});

Ответ основан на этом вопросе.