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?

Palingenesis

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'

Cherise

the same issue was occurred for me, iam using grunt instead of gulp, how can i remove those tags with grunt @Jared Hooper – Gallego

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.

Bradley

For me this still created some, <style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style> but much less than before, thanks! – Jobina

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.

Ashworth