Uncaught Error: Couldn't find Materialize object on window

[tahmid-hasan]

Hi,

I've tried to use MaterializeCSS on my Angular 6 app. I'm using materialize-css and angular2-materialize module from npm. When I run the app it builds successfully. But I've got this error from the browser console

Uncaught Error: Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize.

Though I've import them in the app.module.ts

Here is my code:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';

import { LayoutComponent } from './layout/layout.component';
import { SliderComponent } from './layout/slider/slider.component';

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

styles and scripts array from angular.json

"styles": [
    "./node_modules/materialize-css/sass/materialize.scss",
    "src/styles.sass"
],
"scripts": [
    "./node_modules/materialize-css/dist/js/materialize.min.js"
],

I haven't find any proper solution about this issue on internet :(

[RyanSpears]

I am having the same issue after following the instuctions section titled 'Installing & configuring angular2-materialize in projects created with the Angular CLI' at https://www.npmjs.com/package/angular2-materialize. Any help wold be appreciated.

[sergiutritean]

What worked for me was upgrading angular to ^6.1.7 and, after that, npm update.

[MatheusBueno]

angular2-materialize use materialize version '0.100.2'. In your package.json change materialize-css to "^0.100.2".

[bjgrassi]

I tried to do what @sergiutritean and @MatheusBueno said, but didn't work.
The only thing that i tried that worked was put those links in index.html

<!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

I've been trying to find another solution to fix this error, because I don't like that one. After all, I put the declarations on the style and script... should be working without those links

[MatheusBueno]

@bjgrassi After change in package.json do you run npm install in your project ?

[jefrice]

I am having the same problem and I did upgrade angular to 6.1.7 and materialize-css to 0.100.2. Still nothing...

[jefrice]

correction -- I upgraded angular to 6.1.7 and materialize-css to 0.100.2 AND ran npm install in my directory - AND IT WORKED! thanks @MatheusBueno!

[alvarogr91]

I had the very same problem and I was going nuts. I upgraded Angular to 6.1.9, materialize-css to 0.100.2 (as @sergiutritean, @MatheusBueno and @jefrice very well recommended; thanks guys) BUT I needed to add

ng update @angular/cli

in order to create a missing angular.json file, as explained here. I hope this can help. Keep going!

[Uzziel306]

Hi! i got the solution for this! first modify your package.json file in dependencies section adding these 4 lines "angular2-materialize": "^15.1.10", "hammerjs": "^2.0.8", "jquery": "^2.2.4", "materialize-css": "^0.100.2", it must look like this

"dependencies": { ... "angular2-materialize": "^15.1.10", "hammerjs": "^2.0.8", "jquery": "^2.2.4", "materialize-css": "^0.100.2", ... }

then in your .angular-cli.json file in scripts and style sections add this in this specific order

"styles": [ "../node_modules/materialize-css/dist/css/materialize.css", "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/hammerjs/hammer.js", "../node

delete your node_modules directory and run

npm i
ng serve

Hope this helps!! it works for me perfectly!

[eldeeno]

It took me two days to figure out what the problem was but finally i was able to resolve it by reading a comment by some guy on stackOF that goes:
"Basically materialize-css have changed their object name from Materialize to M in v1.0.0. But angular2-materialize have built on top of v0.100.2. That's why this error has been generated. You can change the object name by editing the source code of angular2-materialize from node_modules folder. But that needs a ton of effort. So I have decided to drop angular2-materialize module and just use materialize-css v1.0.0. And for this only materialize-css library is required. You don't need any other dependencies like jQuery or HammerJS".

[Ahsan9981]

@deenkadir , i did the same but I am having issues with routing. how did you solve it ?

[GabrielHoyos10]

Hi everyone

I have the same problem and tested the different proposed solutions but I still have the same problem.

already change in my package.json the dependencies and run npm install but it is not installed correctly materialize css and angular2-materialize in the browser presents the following message in console:

### "could not find materialize object on window. it is created by the materialize-css library. please import materialize-css before importing angular2-materialize."

Post: I am using angular 7 for this project and I want the front-end to use materialize

[Ahsan9981]

Use angular material which is designed for angular.