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

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 { }

Shaul Naim · Accepted Answer · 2016-10-02 08:11:59Z

7

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]

answered Oct 2, 2016 at 8:11

Shaul Naim

2764 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Larry Popiel · Accepted Answer · 2016-10-10 20:35:13Z

0

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/

answered Oct 10, 2016 at 20:35

Larry Popiel

1411 silver badge4 bronze badges

Comments

tomastrajan · Accepted Answer · 2017-04-17 20:43:10Z

0

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"

answered Apr 17, 2017 at 20:43

tomastrajan

1,72614 silver badges28 bronze badges

1 Comment

An-droid Over a year ago

Sass version of materialize is really confusing on how to install it in a clean way

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related