Angular2 (angular-cli) and Material Design Lite (angular2-mdl)

问题

I'm having some issues starting an Angular2 project using the angular2-mdl package.

My project setup is using angular-cli (webpack) - https://github.com/angular/angular-cli

I am trying to integrate Google Material Design Lite (https://getmdl.io/started/index.html) using the angular2-mdl package (https://www.npmjs.com/package/angular2-mdl).

The angular2-mdl setup steps are fairly simple:

npm install angular2-mdl --save

Apparently that is it... and it should work. But it doesn't. I've got to a point where the components using MDL are styled correctly, but the JavaScript for animations doesn't fire at all. I understand this is because MDL is scanning the page for DOM elements before Angular loads them in, so have tried the 'refresh DOM' fix as advertised on SO but it's not working for me:

ngAfterViewInit(){
    console.log("HeaderComponent.ngAfterViewInit");
    componentHandler.upgradeAllRegistered();
}

There are no errors in the console, the styling works and the javascript does not. I'm wondering if anyone has experience with this setup / similar issues?

P.s. I'm new to Angular2 and really not enjoying the differences every environment setup seems to have... with some using webpack, some using systemjs, loads of different generator tools etc... am I alone here?!

Thanks

回答1:

after you already installed angular-cli and created a project
install material-desgin-lite with:

npm install material-design-lite --save

Once intalled open the .angular-cli.json on the root directory of your project and add the following lines:

"styles":
["../node_modules/material-design-lite/material.min.css"],
"scripts":
["../node_modules/material-design-lite/material.min.js"],

Save the file and the start the server with:
ng serve

Use the desired css classes and other components in your code.

回答2:

open your root Module, ex: AppModule, then add MdlModule to imports array.

import { MdlModule } from 'angular2-mdl';
// other imports 
@NgModule({
  imports: [MdlModule],
  ...
})
export class AppModule { }

来源：https://stackoverflow.com/questions/41986734/angular2-angular-cli-and-material-design-lite-angular2-mdl

标签

angular

Webpack

material-design

angular-cli

angular2-mdl