Getting Material2 working

[maxx0r]

The current material2 branch is broken, it doesnt even contain material2. It might a good idea to add a how-to-get-material2 working page in the wiki?

My steps

npm i --save node-sass sass-loader material

in app.module.ts import material 2 and load it

import { MaterialModule } from '@angular/material';

imports: [ // import Angular's modules
  ...
    MaterialModule.forRoot(),
..
]

in webpack.common.js under resolve add .scss to the extensions

under module.rules add

     {
          test: /\.scss$/,
          exclude: /node_modules/,
          loader: ['css-loader', 'sass-loader']
        },

in the src/assets folder create a scss folder and insert a index.scss with this line (or whatever theme you need)

@import '~@angular/material/core/theming/prebuilt/pink-bluegrey.scss';

in app.component.ts replace styleUrls with

styles: [require('../assets/scss/index.scss').toString()],

I did this twice. Forgot the second time what i needed to do to get it working, I think others will encounter this too.

[joshwiens]

@maxx0r - iirc you can't use require with AoT compilation. That said, I personally agree that material2 should be a Wiki article & not a branch.

//cc @gdi2290 / @katallaxie - Anyone object to creating a simple wiki article and removing the material2 branch? Getting material2 integrated into the starter isn't complicated enough to warrant maintaining the branch imo.

[Abhijith-Nagaraja]

@maxx0r @d3viant0ne
Angular Material integration is quite straight forward.

Saying that, if you are using bootstrap loader and saas loader like, it's very easy to include material scss.

in .bootstraprc add the below line.

appStyles: PATH_TO_YOUR_APPLICATION_SCSS

and in your APPLICATION_SCSS add the material theme imports. You can use any theme here.

@import '~@angular/material/core/theming/prebuilt/pink-bluegrey.scss';

But I am wondering, is there any way to choose the themes dynamically?

[ebeal]

@d3viant0ne I would also rather have this as a wiki article, having to pull master in every couple of weeks is tedious and error prone and all of the content that is in the branch can be contained in an article instead. @gdi2290 if you don't have objections I'm gonna go ahead with this.

[joshwiens]

@ebeal - Pull the trigger. Maintaining that branch given how little effort is actually needed to enable Material2 is just silly.

[romelgomez]

Hi, I having issues installing support for .scss files and material

Error:

You may need an appropriate loader to handle this file type.
| .personalized {
|   color: red; }
| 

After read:

https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components

I ended with this config in webpack.common.js:

module.rules

        {
         test: /\.scss$/,
         exclude: /node_modules/,
         use: ['sass-loader'] // sass-loader not scss-loader
        },

I have created a component to test this.

/src/app/users/users.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'users',
    templateUrl: 'users.component.html',
    styleUrls: ['./users.component.scss']
})
export class UsersComponent {
    private users: string[];
    constructor() {
        this.users = [
            'romel',
            'rudy'
        ];
    }
}

/src/app/users/users.component.scss

$primary-color: red;

.personalized {
    color: $primary-color;
}

/src/app/users/users.component.html

<h1 class="personalized"> Hola Romel </h1>

/src/app/users/index.ts

export * from './users.component';

The idea that I trying out is create .scss file for app.component, e.g:

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
    styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None
})
export class AppComponent {}

And in the app.component.scss only have this:

app/app.component.scss

@import '~@angular/material/core/theming/prebuilt/pink-bluegrey.scss';

for have material in all the app

[romelgomez]

I already resolved my error,

In the webpack.common.js file:

module.rules

        {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['to-string-loader','style-loader', 'css-loader', 'sass-loader']
        },

After edit that, I created the app.component.scss file, to have material available in the all components.

[cdupetit]

@romelgomez Hello, did your "checkbox" display well after your modification ?

[romelgomez]

@cdupetit Yes, I made this Gist, https://gist.github.com/romelgomez/106625de08bbf68a2ca2b5c8aa93dcc8 , Hope this can help you.

[cdupetit]

@romelgomez I found my error. Thanks for your patience.

[holms]

Can anyone please instructions to wiki? @romelgomez your gist doesn't work for me, please check the comments in there. Although I've started with react.js in here, but I'd like that this webpack would work finally.

[romelgomez]

@holms, Please check again, I rewrote the manual, based on a new installation of angular2-webpack-starter.

[maxx0r]

Using the documented loaders threw an error. Just using ['raw-loader', 'sass-loader'] is enough
The error is:
Invalid CSS after "": expected 1 selector or at-rule, was "var result = requir"

[romelgomez]

@maxx0r Yes, I updated the gist, thanks.

[katallaxie]

Material2 branch has been closed. We should close this issue.

[holms]

@katallaxie because of this you just lost a developer, I've migrated to react :) if starter takes so much time to start, and don't have even integrated materials, and instructions are insanely complicated (i've got a lot of issues with it), I decided to move somewhere else. Have fun to ignore simplicity.

[joshwiens]

Evidently haven't looked to deep into the code that runs create react app. GL & Hope the grass is greener.