Failed to instantiate module ngMessages / no ripples on header menu

[kevincaradant]

Hi

I try to add the material design on my bootstrap. This is my import:

// Import angular
import 'angular';

// Animation
import angularAnimate from 'angular-animate';

// Router
import angularUIRouter from 'angular-ui-router';

import angularUIBootstrap from 'angular-ui-bootstrap';

import angularBootstrapMaterial from 'angular-bootstrap-material/dist/angular-bootstrap-material';

And my css imports:

@import 'node_modules/bootstrap/dist/css/bootstrap';
@import 'node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.min';
@import 'node_modules/bootstrap-material-design/dist/css/ripples.min';

My angular module:

export const demoModule = angular.module('demo', [
    angularAnimate,
    angularUIRouter,
    angularUIBootstrap,
    'angularBootstrapMaterial',
]);

I get this error:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module demo due to:
Error: [$injector:modulerr] Failed to instantiate module angularBootstrapMaterial due to:
Error: [$injector:modulerr] Failed to instantiate module ngMessages due to:
Error: [$injector:nomod] Module 'ngMessages' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=ngMessages

What do I have forgot ? Thank you

Edit: I fixed the problem by a import of angular-messages

NEW problem: I haven't any ripples on the header menu :/

[tilwinjoy]

Hi Kevin, By header you mean navbar? Which component is not having ripples?

[kevincaradant]

Yes sorry it's the navbar ;) Mhh for example, I have this in my navbar, is it possible to ripples it like in your example in the demo ?

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" ng-init="langCtrl.navCollapsed = true" ng-click="langCtrl.navCollapsed = !langCtrl.navCollapsed">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" ui-sref="home">Brand</a>
            </div>

            <div class="collapse navbar-collapse" ng-class="!langCtrl.navCollapsed && 'in'">
                <ul class="nav navbar-nav">
                    <li ui-sref-active="active" ng-click="langCtrl.navCollapsed=true">
                        <a ui-sref="home"><i class="material-icons md-18">home</i></a>
                    </li>
                    <li ui-sref-active="active" ng-click="langCtrl.navCollapsed=true">
                        <a  ui-sref="page1">Page 1</a>
                    </li>
                    <li ui-sref-active="active" ng-click="langCtrl.navCollapsed=true">
                        <a ui-sref="page2">Page 2</a>
                    </li>
                    <li ui-sref-active="active" ng-click="langCtrl.navCollapsed=true">
                        <a ui-sref="page3">Page 3</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right lang">
                    <li class="lang"><a href="" ng-click="langCtrl.changeLanguageTo('fr')" ng-class="{ selected: langCtrl.getLanguage()==='fr'}">FR</a></li>
                    <li><a href="" ng-click="langCtrl.changeLanguageTo('en')" ng-class="{ selected: langCtrl.getLanguage()==='en'}">EN</a></li>
                </ul>
            </div>
        </div>
    </nav>

Edit: I tried a lot of things but it's like my ripples.js or css was not loaded. But it's the case :/. Even when I took your example and paste it in my project, I haven't the ripples. Do you see something wrong in y imports ?

[kevincaradant]

I would try an other version with npm but it's seems there is only one version 0.4.0 available. If you need more code or something else. Feel free to ask me ;)

[tilwinjoy]

By "component" I was referring to checkbox radio etc... You mean your menu items itself doesn't have the effect? I'll take a look at it once I'm free. In the meantime it'll be very helpfull if you can reproduce this in the JSFiddle template mentioned here so that I can play with it

[kevincaradant]

Yes the ul/li url in the header must have the ripple effects and it's seems I don't have them :/

It's more simple maybe if you play with my repo: https://github.com/kevincaradant/web-template-webpack

Thank you to check ;).

[kevincaradant]

OK my bad, I don't add the attributes abm-component="" on navbar component :/. It's was just that since the begin. Thank you :)