How to integrate angular2-materialize in a project created with angular cli - angularjs

Question

I want to use the Materialize CSS Framework in my project.
I set up a project the Angular CLI using ng new BLABLA
After that I've followed the steps in this guide.
However, if I use ng serve to start the project, I get this error in the browser:
TypeError: undefined is not an object (evaluating 'jQuery.easing.swing')
my angular-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

what you need to do is as follow:
add to your global css file this line:
#import "../node_modules/materialize-css/dist/css/materialize.css";
and remove this line
import "materialize-css";
from app.module.ts
also make sure you installed the correct jquery version better if you run this in any case:
npm install jquery#^2.2.4 --save
doing it worked for me. [good luck]

Answer 2

I also found that if you run npm rebuild after making the entries in the apps[0].scripts and apps[0].styles properties of angular-cli.json everthing works, and you don't have to add the #import to the styles.css.
I found this information on Mike Lynch's site http://mikelynchgames.com/software-development/setting-up-and-using-angular-2-cli/

Answer 3

Alternatively if you want to use original sass and not the DIST version of materialzie css because you might want override colors and other variables you can use this...
Import materialize css in your main styles.sass file like this.
// 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"