Trying to use in the aurelia-cli

[egeland]

Hi,

So I'm trying out the new aurelia-cli and it seems to only use packages via npm.
I've tried all sorts of contortions, but I can't seem to get aurelia-mdl and its encapsulated-mdl dependency to work - I just get errors in the browser.

Have you tried the cli? Did you get mdl to work and if so, how?
I'm wanting to migrate my project (based on aurelia-mdl) to use the cli as the packaging looks very nice in that structure, but I'm stuck on this..

Any and all assistance would be very much appreciated.

My expected "happy path" for a basic use case (which does not work at present):

• Start a new project in the cli: au new (follow the prompts)
• Install mdl: npm install aurelia-mdl
• Add to aurelia_project/aurelia.json:

"dependencies": [
...
    "aurelia-mdl",
...
]

• Add mdl to app.html: <require from="encapsulated-mdl/material.amber-pink.min.css"></require>
• Run the app: au run --watch
• Browse to the app

At this point I get errors: 😭

GET http://localhost:9000/node_modules/aurelia-mdl/dist/commonjs/index/mdl.js 404 (Not Found)

Unhandled rejection Error: Script error for "aurelia-mdl/mdl"
http://requirejs.org/docs/errors.html#scripterror
    at Error (native)
    at F (http://localhost:9000/scripts/vendor-bundle.js:3661:290)
    at HTMLScriptElement.onScriptError (http://localhost:9000/scripts/vendor-bundle.js:3684:113)
...

So I guess that the default, commonjs path is screwy, and change my entry in aurelia_project/aurelia.json to:

          {
            "name": "aurelia-mdl",
            "path": "../node_modules/aurelia-mdl/dist/amd",
            "main": "index"
          },

Now I get

GET http://localhost:9000/src/annoto-mdl.js
Unhandled rejection Error: Script error for "annoto-mdl", needed by: aurelia-mdl/mdl
http://requirejs.org/docs/errors.html#scripterror
    at Error (native)
    at F (http://localhost:9000/scripts/vendor-bundle.js:3661:290)
    at HTMLScriptElement.onScriptError (http://localhost:9000/scripts/vendor-bundle.js:3684:113)
...

I try to npm install annoto-mdl --save, but get 404 Registry returned 404 for GET on https://registry.npmjs.org/annoto-mdl

I search for annoto-mdl, but Google failed to find it for me.. can you help? 😓
I notice in the package.json that there are references to it and a bitbucket repo, but that appears to be inaccessible:

"dependencies": {
      "annoto-mdl": "bitbucket:annototeam/annoto-mdl@annoto-widget"
    },

Cheers,
Frode
😃

[genadis]

Hi,
I'm considering to move to aurelia-cli as well.

Seems to be issue in the npm package, I'll fix it.

[genadis]

fixed the package.json and published to npm (v0.2.2)

[sergiuoala]

Hi @genadis , how did you get this working? I'm pretty much in the same position.
Though, the error I have is:

Unhandled rejection TypeError: Cannot read property 'componentHandler' of undefined
at upgradeElement (http://localhost:9000/node_modules/aurelia-mdl/dist/amd/mdl.js:194:25)
at MDLCustomAttribute.attached (http://localhost:9000/node_modules/aurelia-mdl/dist/amd/mdl.js:247:9)

I think I've added the dependencies properly in aurelia.json file as follows:

{
            "name": "aurelia-mdl",
            "path": "../node_modules/aurelia-mdl/dist/amd",
            "main": "index"
          }

What would be the config for encapsulated-mdl here? There's no dist folder inside.

Thanks!

[genadis]

I'm not using Aurelia-cli at the moment (I'm using jspm)

Seems there is missing dependency configuration of encapsulated-mdl.
Idea how you could try to make it work:
The dependency you need is encapsulated-mdl

1. clone the git repo.
2. add dependency, something like:

{
            "name": "encapsulated-mdl",
            "path": "../path_to_cloned_repo/jspm_release",
            "main": "material.min",
             "resources": [
                 "material.blue-red.min.css"     // your choice of style
              ]
}

If it works for you, I can later publish encapsulated-mdl to npm as well so it's easier to install.

[beeterry]

I'm using CLI as well and have pretty much the same problem. I've gotten it to load properly, however I'm getting a "Mismatched anonymous define() module: function (exports, _aureliaFramework, _encapsulatedMdl, _aureliaEventAggregator) {
'use strict';"

Here's how I'm loading it in my aurelia.json file:

{
         "name": "aurelia-mdl",
         "path": "../node_modules/aurelia-mdl/dist/amd",
         "main": "index",
         "resources": [
         "mdl.js"
      ]
}

and I'm using aurelia.use.plugin("aurelia-mdl") in my main.ts file. I'm pretty sure the issue is arising from the _encapsulateMdl. I tried to change the value to just "mdl" since I'm loading normal MDL in node_modules and giving it an alias of "mdl," however that's not working.

This is in the mdl.js file you provided:

define(['exports', 'aurelia-framework', 'mdl', 'aurelia-event-aggregator'], function (exports, _aureliaFramework, _encapsulatedMdl, _aureliaEventAggregator) {
  'use strict';

[genadis]

@beeterry @sergiuoala @egeland If it's still relevant for you,
I've got it working.
(Started new project, and decided to use aurelia-cli in it, so updated the plugin to support it).
fixed package.json and uploaded dependency (encapsulated-mdl) to npm as well.
So basically you just need to configure your aurelia.json with something like:

        "dependencies": [
          {
            "name": "encapsulated-mdl",
            "path": "../node_modules/encapsulated-mdl/dist",
            "main": "material.min",
            "resources": [
              "material.blue_grey-red.min.css"
            ]
          },
          {
            "name": "aurelia-mdl",
            "path": "../node_modules/aurelia-mdl/dist/amd",
            "main": "index",
            "deps": ["encapsulated-mdl"]
          }
        ]

notice the resources in encapsulated-mdl.
in your app.hml (or wherever)

<require from="encapsulated-mdl/material.blue_grey-red.min.css"></require>

and in bootstrap (as usual):

aurelia.use.plugin('aurelia-mdl');