How to get rid off multiple style tags inserted to head by AngularJS Material?

Question

AngularJS Material inserts multiple (around 30) style tags with md-theme-style attribute. I guess it's some kind of performance tuning but I would rather do it myself - I don't need an external framework to pollute my HTML in this nasty way. Any thoughts on how to get rid of the style tags?

Answer 1

I do not know if it is worth the hassle. Please back-up your work, I have not tested any of this:

Angular-material includes some default theme css as a const variable in JavaScript. You can view this code in angular-material.js at the bottom starting with the line:

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

When loaded into your browser this adds lots of css style tags dynamically to the page document. To disable them you will need to recompile angular-material yourself using the following commands:

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

Then install dependancies:

cd material
npm install

Then go to gulp/util.js and change line 53 from:

var jsProcess = series(jsBuildStream, themeBuildStream() )

to be:

var jsProcess = series(jsBuildStream)

Then run the build process:

gulp build

This question gives more detail: How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'

Answer 2

Direct from the angular material docs

Lazy Generate Themes

By default, every theme is generated when defined. You can disable this in the configuration section using the $mdThemingProvider

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

Here's the exact syntax I used, and it worked like a champ. (Important to note this didn't break any style for us, either):

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

It may also be useful to know this seems to be a standard for angular. I had to turn the animations down too. By default they were animating pretty much everything.

Answer 3

I'm not sure if this answers the question, but to completely remove all of the <style/> elements from the top of the page, I did the following:

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

and this successfully removed all the elements.

Now, when I want them generated, I call this within the main controller:

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

The answer is based on this question.