Only include modules from Angular Material that I

Question

I'm using the module $mdDialog from Angular Material but I don't need the full library. Is it possible to only include the modules that I need in the project, and how can I do that? I have installed Angular Material with Bower and using Gulp in my project.

Answer 1

You choose only the components you want, by making a custom angularjs build from angular material git repository as follows

• download or clone the angular material repo.
• go the repository folder and execute "npm install" or "npm update"

For custom js build

In the "\gulp" folder edit the util.js, update the buildJs() function

    function buildJs () {
     // original code commented
     //var jsFiles = config.jsBaseFiles.concat([path.join(config.paths, '*.js')]);  

      var jsFiles = config.jsBaseFiles;

      //adding the paths of components you want
      jsFiles.push('src/components/icon/**/*.js');
      jsFiles.push('src/components/showHide/**/*.js');
      jsFiles.push('src/components/virtualRepeat/**/*.js');
      jsFiles.push('src/components/dialog/**/*.js');

• run "gulp build" and find the js files in "\dist" folder

I am using angularjs with webpack, I copied the "angular-material.js" to "\node_modules\angular-material" in my application and I was able to make a build without any changes.

For building custom css

edit "build-scss.js" in "\gulp\tasks" folder in the repository. edit the getPaths() function

function getPaths () {
    var paths = config.scssBaseFiles.slice();
    if ( modules ) {
      paths.push.apply(paths, modules.split(',').map(function (module) {
        return 'src/components/' + module + '/*.scss';
      }));
    } else {
     // original code commented
     // paths.push('src/components/**/*.scss');
      paths.push('src/core/services/layout/**/*.scss');

       //add the paths of components you want     
        paths.push('src/components/icon/**/*.scss');
        paths.push('src/components/showHide/**/*.scss');
        paths.push('src/components/virtualRepeat/**/*.scss');
        paths.push('src/components/datepicker/**/*.scss');
        paths.push('src/components/autocomplete/**/*.scss');
        paths.push('src/components/backdrop/**/*.scss');
        paths.push('src/components/dialog/**/*.scss');

• "gulp build" will also build css in the "\dist" folder

I hope it helps, please comment in case angular material gulp build is changed.

Other way

when you install angularjs with npm, you can find js and css files for each component in "\node_modules\angular-material\modules\js" you can use your custom build to concatinate them.

Answer 2

Soon Angular Material will turn into v1.1.0 as a major release.

As an addition the material-tools repository will be announced.

Material Tools allows developers to build a custom Angular Material build with the most necessary components.

It also can build precompiled theme stylesheets, which improves the performance significantly.

Material Tools is already available, but still in beta.

https://github.com/angular/material-tools

Answer 3

As per my comment above, $mdDialog depends on angular-material.js, which depends on angular.js, angular-aria.js and angular-animate.js. I don't think there's any way around that.

Although you are using Angular Material I would like to suggest an alternative - Polymer, which is similar to and consistent in style with Angular Material. This suggestion is related to you not wanting to load lots of dependencies.

The advantage of using Polymer is that you can include separate elements, for example paper-dialog - demo

From the docs