Ember quickstart tutorial 3.16 Upgrade from 3.11 to 3.16

Ember CLI
1

Hi

I was following the

I created the scientists route and template as described. But it doesn’t list the scientists names from the data provided in the scientists route?

Is there an error in the quick start guide or do I have an issue on my setup?

scientists.hbs

<h2>List of Scientists</h2>

<ul>
  {{#each @model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>

scientists.js

import Route from '@ember/routing/route';

export default class ScientistsRoute extends Route {
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
}
2

From the information you provided, it should be working. Do you have any error messages in your terminal or in the browser console?

3

After I run ember serve I see this

ember serve ‘ember-inflector’ is imported by -private\build-url-mixin.js, but could not be resolved – treating it as an external dependency

but it does build successfully

Build successful (6631ms) – Serving on http://localhost:4200/

in the browser no errors in the console…

just see Navigated to http://localhost:4200/scientists

then All the browser displays is

image

same in chrome and Firefox

I even started fresh coping the guide word for word…

4

I just made an edit in the pasted code above so it matches the guide exactly…

One question:

if the class in is called ScientistsRoute in the scientists.js

how would the template scientists.hbs

find it if its listing @model as |scientist|

and

  • {{scientist}}

    • I don’t see the word scientist anywhere in the scientists.js ?

    5

    It must be my version I switched the guide to a different version.

    And this works now…

    3.14 version

    it doesnt have the class…

    Just

    import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
});

    and

    <h2>List of Scientists</h2>

<ul>
  {{#each this.model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>
    6

    do you know how I upgrade to 3.16 ?

    I went here

    and it mentioned

    npm install -g ember-cli-update ember-cli-update

    that ran successfully

    but when I run : npm list --depth=0

    I get :

    C:\ember-quickstart\npm list --depth=0


ember-quickstart@0.0.0 C:\ember-quickstart
+-- @ember/jquery@0.6.1
+-- @ember/optional-features@0.7.0
+-- broccoli-asset-rev@3.0.0
+-- ember-ajax@5.0.0
+-- ember-cli@3.11.0
+-- ember-cli-app-version@3.2.0
+-- ember-cli-babel@7.18.0
+-- ember-cli-dependency-checker@3.2.0
+-- ember-cli-eslint@5.1.0
+-- ember-cli-htmlbars@3.1.0
+-- ember-cli-htmlbars-inline-precompile@2.1.0
+-- ember-cli-inject-live-reload@1.10.2
+-- ember-cli-sri@2.1.1
+-- ember-cli-template-lint@1.0.0
+-- ember-cli-uglify@2.1.0
+-- ember-data@3.11.5
+-- ember-export-application-global@2.0.1
+-- ember-load-initializers@2.1.1
+-- ember-maybe-import-regenerator@0.1.6
+-- ember-qunit@4.6.0
+-- ember-resolver@5.3.0
+-- ember-source@3.11.1
+-- ember-welcome-page@4.0.0
+-- eslint-plugin-ember@6.10.1
+-- eslint-plugin-node@9.2.0
+-- loader.js@4.7.0
`-- qunit-dom@0.8.5
    7

    so ember cli is still at 3.11 ?

    8

    I guess I need to run the upgrade on a clean app / branch

    9

    yes and your ember-source (the actual ember core code) is at 3.11 also. I think you installed the updater but didn’t actually update it.

    and it mentioned npm install -g ember-cli-update ember-cli-update that ran successfully

    This installs ember-cli-update as a global npm package, but then you need to run ember-cli-update like so: ember-cli-update [--to=3.16] the bracket part is only necessary if you want to specify the version you’re going to (and you shouldn’t actually type the brackets btw).

    This does a bunch of magic and merges the new blueprints into your app, but you’ll need to resolve some git conflicts usually to cover any customizations you’ve made to the ember project files that get updated.

    1 Like
    10

    Thanks you @locks and @dknutsen for your help!!!

    11

    so does 3.16 handle components differently? I noticed the fresh project doesn’t have a components directory in the templates directory?

    I also noticed that the template for a component is in a directory called components ?

    I also noticed when you run ember generate component it mentions: ** skip app/components/people-list.js** also:

    tip to add a class, run ember generate component-class people-list

    ember generate component people-list
installing component
  create app\components\people-list.hbs
skip app/components/people-list.js
  tip to add a class, run `ember generate component-class people-list`
installing component-test
  create tests\integration\components\people-list-test.js

    so the .js for the component’s .hbs is now generated separately as a class?

    12

    so the broad strokes are roughly:

    • Ember 3.15 marked the “release” (basically it’s now the default) of Ember Octane which includes a bunch of new features landed throughout the 3.x series.
    • one of the new features is a greater emphasis on template-first components. So by default the component generator actually only generates a template, and adding a js class is encourage on an “only if needed” basis
    • Octane also supports “template co-location” meaning templates are placed inline with the component and not in templates/components
    • There are now two varieties of components: Classic and Glimmer. Glimmer components are now encouraged as the new default and eventually I think Ember classic components will be deprecated. There are a lot of differences between the two but if you’re following the quickstart hopefully they won’t be as noticeable vs updating a large old app.

    Anyway hope that helps clear things up a little bit. Checking out the “upgrade guide” might help sort out the new features too.

    13

    Thank you for your explanation. Very helpful!

    Also to note for the last 45 years Ive been trying to break myself of the habit I taught myself as a child:

    Take the model out and try to build it (make a mess)…Then read the instructions…

    Then later

    Write whole working app/program in a new language, get it working …Then actually learn the correct way to code it…LOL…

    14

    :joy: I’m still learning new stuff every day so it’s a weird balance. On the one hand learning stuff upfront can definitely make your life easier but on the other hand sometimes the best way to learn is to jump in and get your hands dirty. Good luck!

    15

    quick question: how to I get new applications to start at the newer versions of ember-cli emb-babel etc etc…it seems like I need to run a upgrade install after I generate a new app ?

    16

    If I’m understanding the question you should just have to update your ember-cli global version (npm install -g ember-cli) to the latest, and then it will use its default app blueprint to create the new app. So each project has ember-cli listed as a dependency, but you also have a globally installed version of ember-cli on your machine in your node runtime environment that determines what new projects are initialized with.

    17

    I’m having trouble finding my ember-cli global version?

    Ive ran npm install -g ember-cli and npm install -g ember-cli --to=3.16 and ember-cli-update --to=3.16 in multiple locations but when I run:

    ember new appp

    the app is still at ember 3.11 I must be missing something

    18

    Okay I think I got it… I deleted the ember cmd batch file and the ember ps1 powershell file from my nodejs installation location then ran the npm install -g ember-cli --to=3.16…

    Now it builds new ember apps at 3.16

    2 Likes