Вопрос интеграция углового материала в угловой 2

Я пытаюсь настроить Angular 2 project с Material design и сталкиваюсь с проблемой, когда цвета для компонентов не отображаются, а эффект пульсации на кнопке также не работает. Однако анимации работают просто отлично.

Я пропустил добавление чего-либо для цветов и эффекта пульсации, чтобы не работать?!

пакет.формат JSON

{
  "name": "sample-project",
  "version": "1.0.0",
  "description": "sample project",
  "main": "index.html",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^2.1.2",
    "@angular/compiler": "^2.1.2",
    "@angular/core": "^2.1.2",
    "@angular/forms": "^2.1.2",
    "@angular/http": "^2.1.2",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "^2.1.2",
    "@angular/platform-browser-dynamic": "^2.1.2",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.0-rc.2",
    "systemjs": "^0.19.40",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34"
  }
}

индекс.html с настройкой SystemJS

<!DOCTYPE>
<html>
    <head>
        <title>Sample Project</title>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <script src="../node_modules/zone.js/dist/zone.js"></script>
        <script src="../node_modules/reflect-metadata/Reflect.js"></script>
        <script src="../node_modules/systemjs/dist/system.js"></script>
        <script>
            System.config({
            // we want to import modules without writing .js at the end
            defaultJSExtensions: true,
            // the app will need the following dependencies
            map: {
            '@angular/core': '../node_modules/@angular/core/bundles/core.umd.js',
            '@angular/common': '../node_modules/@angular/common/bundles/common.umd.js',
            '@angular/compiler': '../node_modules/@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': '../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': '../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/material': '../node_modules/@angular/material/material.umd.js',
            '@angular/forms': '../node_modules/@angular/forms/bundles/forms.umd.js',
            '@angular/http': '../node_modules/@angular/http/bundles/http.umd.js',
            'rxjs': '../node_modules/rxjs'
            }
            });
            // and to finish, let's boot the app!
            System.import('main');
        </script>
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>

приложение.модуль.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, MaterialModule.forRoot()],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {

}

приложение.деталь.ts

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

@Component({
    selector: 'app-root',
    template: `<h1>{{title}}</h1>aasdasd<button md-raised-button>RAISED</button>
                <button md-button>FLAT</button>
                <button md-raised-button>RAISED</button>
                <button md-icon-button>
                    <md-icon class="md-24">favorite</md-icon>
                </button>
                <button md-fab>
                    <md-icon class="md-24">add</md-icon>
                </button>
                <button md-mini-fab>
                    <md-icon class="md-24">add</md-icon>
                </button>
                <button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
                `
})
export class AppComponent {
    title = 'app setup completed!';
}

Вот как кнопка рендеринга сейчас.

Введите описание изображения здесь

1 ответ

  1. В текущей версии material2 в индекс можно включить предварительно созданную тему.формат html.

    Что-то вроде этого:

    <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">