MaterializeCSS framework inside of ionic 2 app (third-party libs)


#1

I just want to use MaterializeCSS framework inside my ionic 2 app instead of native ionic components.

I read this Third-party libs IONIC

And I did :

“npm install --save materialize-css” - for installing materializeCSS in node_module folder

“npm install --save @types/materialize-css” - for typescript intellisense

And added in map.ts file:

import { Materialize } from 'materialize-css';

And this line in map.html file :

<a class="waves-effect waves-light btn">button</a>

Hoping that I will see beautiful MaterializeCSS button.

Unfortunatelly it doesnt work.

I tried also simply add css and js files in my main index.html file like this :

<link rel="stylesheet" type="text/css" href="../node_modules/materialize-css/bin/materialize.css">
<script src="../node_modules/materialize-css/bin/materialize.js"></script>

But somehow it doesnt see node_modules folder.

After hours of effort Im asking for help.


#2

Copy the CSS and js files into you assets folder and try it again.


#3

Oh no. Terrible solution. And all my project mates have after “npm install” coppy and paste all dependencies into assets folder ?
There must be easiest way.


#4

Do you don’t use git? Copy it and then make a commit. They don’t have to run npm install.

Copy them into assets and change the CSS and js import in your index.html.

The repo gives you nothing more than some CSS classes. You don’t need types. You only need them if you want to use an external js library


#5

But I dont want to keep on github my all dependencies library.
I just want to keep there informations about all necessary dependencies and install them by using dependencies manager.
And somehow connect that dependencies with my project.

Your solution kill npm logic.


#6

Then use app-scripts and config the ionic-copy part


Error - Couldn't find Materialize object on window
#7

Hi @pumanitro . I just followed the intructions from this article https://ionicacademy.com/ionic-include-css-files-from-npm/ and now I have MaterializeCSS components working in my Ionic2 app very nicely. I used https://www.npmjs.com/package/angular2-materialize


#8

Thanks a lot it works :slight_smile: