abuiles / ember-cli-101-errata

18 stars 4 forks source link

ember-cli-fill-murray and ember-cli 0.2.0 incompatible as per book (loc 2178/64%) #180

Open t1mmen opened 9 years ago

t1mmen commented 9 years ago

The generated output is different, and it appears the addon should be built in the addon folder, not app now.

When building the addon, I also had to fix this manually:

Anaddon/templatestree was detected, but there are no template compilers registered forember-cli-fill-murray. Please make sure your template precompiler (commonlyember-cli-htmlbars) is listed independencies(NOTdevDependencies) inember-cli-fill-murray'spackage.json.

abuiles commented 9 years ago

@t1mmen thanks! there were some recent changes to addons, I'll check this out :)

Oladele commented 9 years ago

I had to do same manual fix for ...Please make sure your template precompiler...is listed in dependencies. I'm using ember-cli 0.2.2

Oladele commented 9 years ago

Regarding "it appears the addon should be built in the addon folder, not app now.", I built mine in app folder following the book's instruction (version downloaded from email update 03/30/15) BUT in file 'app/components/fill-murray.js', I had to leave generated code import fillMurray from 'ember-cli-fill-murray/components/fill-murray'; which is not shown in book Page 94 code excerpt:

app/components/fill-murray.js

// The following generated line of code should not be removed
 import fillMurray from 'ember-cli-fill-murray/components/fill-murray';
// Book excerpt continues below...

import Ember from 'ember';

export default Ember.Component.extend({ 

  height: 100, // Default height and width 100 
  width: 100,
  //
  // The following computed property will give us the url for
  // fill-murray. In this case it depends on the properties height and width.
  //
  src: Ember.computed('height', 'width', function() {
    var base = 'http://www.fillmurray.com/';
    return base + this.get('width') + '/' + this.get('height');
  }) 
});
idali0226 commented 9 years ago

I tried to follow the book, and did command $ ember addon ember-cli-fill-murray. Some error happened during the process, and after the addon created, the ember-cli not working any more. If I run ember -v, I get: The ember-cli-fill-murray addon could not be found at /Users/mm. Now I am not be able to create new project with ember-cli, and I tried to remove ember-cli and reinstall again, but not fixed the problem. Can anyone help me? Thanks in advance.

idali0226 commented 9 years ago

It fixed. I had package.json in my home directory by mistake. Remove it to fix the error.

ivanoats commented 9 years ago

I'm getting the same issue. I have the generated code importing the component in.

jdowd commented 9 years ago

With ember-cli v0.2.3, ember g component fill-murray will create the component and template in addon/, rather than app/ as shown in the book. app/component/fill-murray.js will also be created with:

import fillMurray from 'ember-cli-fill-murray/components/fill-murray';

export default fillMurray;

The will make whatever work is done in addon/components/fill-murray available in the parent app namespece.

Two further steps were required for me to get the images to render:

abuiles commented 9 years ago

@jdowd thanks! yes, we have a new patter now, I'll rewrite to match this :)

hashemi commented 9 years ago

For people who can't wait for the new version of the book to fix the issue, this is how I got it to work with ember cli 0.2.5:

  1. If you used ember generate to create the component, you do not need to touch anything in the app folder. The generator does the right thing by creating a stub javascript file in app/components/fill-murray.js that imports your component from the addon folder and exports it to be consumed by apps installing your addon. You do not need to duplicate the contents into that file!
  2. The one liner template in the book goes into addon\templates\components\fill-murray.hbs.
  3. The JavaScript from the book goes into addon\components\fill-murray.js and needs to be modified slightly. Note that the stub that's created by the generator contains the clues to all the modifications necessary! Here is what needs to be modified compared to what you'll see in the book:
import Ember from 'ember';
import layout from '../templates/components/fill-murray'; // add this line

export default Ember.Component.extend({
  layout: layout, // add this line
  height: 100,
// etc

That's it in terms of changes to the addon.

If you've published your addon as an NPM already, you will need to republish. To do that, you need to bump up the version of your package by going to package.json and changing the second line to something like this:

"version": "0.1.1",

You will then need to run the publish command again in the addon directory:

$ npm publish

Then re-install the updated package from npm by running this in the main ember app directory:

$ npm install --save ember-cli-fill-murray-your-github-username

I hope this helps someone.

danlourenco commented 9 years ago

Thanks @jdowd. Only thing I had to do at this point was:

add "ember-cli-htmlbars": "0.7.4" to "dependencies" in the addon's package.json

brunojppb commented 9 years ago

@dlo83 +1

bambery commented 9 years ago

Is the htmlbars being in the wrong place in the package.json an error with the addon generator, or it is something peculiar to this app? I did not see any issues in the emberjs repo which seemed to address this issue.

hphoeksma commented 9 years ago

What worked for me was generating the addon with the correct name ember generate addon ember-cli-fill-murray-myname and move the ember-cli-htmlbars from devDependencies to dependencies. After that the code worked as described.

bytheway875 commented 9 years ago

@AhmadH THANKS SO MUCH! :) I figured there was something going on with the addon vs app thing because i noticed that when i generated the component it generated different things in addon/components/fill-murray vs app/components/fill-murray, but i was stuck on what exactly to change. Your guide helped me get through it!