Wie man angular2-materialize in einem mit angular cli erstellten Projekt integriert

Question

Ich möchte das Materialize CSS Framework in meinem Projekt verwenden. ich die Einrichtung eines Projekts die Angular CLI mit ng new BLABLA

Danach habe ich die Schritte in this Führung befolgt haben.

Wenn ich jedoch ng serve verwenden das Projekt zu starten, bekomme ich diesen Fehler im Browser:

TypeError: undefined is not an object (evaluating 'jQuery.easing.swing') 

meine Winkel cli.json

{ 
    "project": { 
    "version": "1.0.0-beta.15", 
    "name": "blabla" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": "assets", 
     "index": "index.html", 
     "main": "main.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "app", 
     "mobile": false, 
     "styles": [ 
     "styles.css" 
     ], 
     "scripts": [ 
     "../node_modules/jquery/dist/jquery.js", 
     "../node_modules/materialize-css/dist/js/materialize.js" 
     ], 
     "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "addons": [], 
    "packages": [], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "prefixInterfaces": false 
    } 
} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { MaterializeModule } from 'angular2-materialize'; 
import "materialize-css"; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ AppComponent ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    MaterializeModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

was Sie tun müssen, ist wie folgt:

Fügen Sie Ihrer globalen CSS-Datei diese Zeile hinzu: @import "../node_modules/materialize-css/dist/css/materialize.css";

und diese Zeile entfernen importieren "materialize-css"; von app.module.ts

auch sicherstellen, dass Sie die richtige Version jquery besser installiert, wenn Sie dies in jedem Fall ausführen: npm jquery@^2.2.4 installieren --save

tun es funktionierte für mich. [viel Glück]

Answer 2

Ich fand auch, dass wenn Sie npm Wiederaufbau nach dem Erstellen der Einträge in den Apps [0] .scripts und apps [0] .styles Eigenschaften von eckig-cli.json alles funktioniert, und Sie don ' Ich muss den @import zur styles.css hinzufügen.

fand ich diese Informationen auf Mike Lynch Website http://mikelynchgames.com/software-development/setting-up-and-using-angular-2-cli/

Answer 3

Alternativ, wenn Sie ursprünglichen sass und nicht die DIST Version von materialzie CSS verwenden möchten, weil Sie überschreiben Farben und anderen Variablen wollen können Sie diese verwenden können ...

Importieren Sie materialisieren css in Ihrer wichtigsten styles.sass-Datei wie folgt.

// override fonts path to prevent build errors (or use resolve-url loader) 
$roboto-font-path: "../node_modules/materialize-css/fonts/roboto/" 

// optionally override color variables eg: ... 
$primary-color: color("materialize-purple"); 

@import "~materialize-css/sass/materialize"