small medium large xlarge

07 Nov 2017, 19:48
michael yosowitz (7 posts)

Chapter 6. Porting Search to Angular. I have copied the customer.js and changes to index.html.erb exactly. When I go to page /customers, nothing is appearing. My Chrome browser console is giving me the message below.

I ran the previous test in the chapter (“hello angular”) that allowed me to verify that angular is installed.

Not sure where I went wrong. Feedback is appreciated.

customers.js?3bca:55 Uncaught TypeError: Object(…)(…).Class is not a function at eval (customers.js?3bca:55) at Object. (customers-9ed9a8d58f0a5b1bc57c.js:2100) at __webpack_require__ (customers-9ed9a8d58f0a5b1bc57c.js:20) at Object. (customers-9ed9a8d58f0a5b1bc57c.js:2087) at __webpack_require__ (customers-9ed9a8d58f0a5b1bc57c.js:20) at customers-9ed9a8d58f0a5b1bc57c.js:63 at customers-9ed9a8d58f0a5b1bc57c.js:66 (anonymous) @ customers.js?3bca:55 (anonymous) @ customers-9ed9a8d58f0a5b1bc57c.js:2100 __webpack_require__ @ customers-9ed9a8d58f0a5b1bc57c.js:20 (anonymous) @ customers-9ed9a8d58f0a5b1bc57c.js:2087 __webpack_require__ @ customers-9ed9a8d58f0a5b1bc57c.js:20 (anonymous) @ customers-9ed9a8d58f0a5b1bc57c.js:63 (anonymous) @ customers-9ed9a8d58f0a5b1bc57c.js:66

07 Nov 2017, 22:14
David Copeland (479 posts)

Can you paste your app’s code somewhere e.g. github? It’s hard to tell without seeing it.

07 Nov 2017, 22:49
michael yosowitz (7 posts)

thanks for your help

07 Nov 2017, 23:26
David Copeland (479 posts)

Ugh, it seems like it only works on Angular 4. If you swtich all the 5.0.0 in package.json to 4.0.0 it will all work.

I can’t see any obviously breaking change for Angular 5 from their release notes, but clearly the Component() function is now returning undefined instead of a thing we can call Class on :(

07 Nov 2017, 23:33
michael yosowitz (7 posts)

will give it a go. thanks for your review.

08 Nov 2017, 01:24
michael yosowitz (7 posts)

Well, I changed the package.json, restarted foreman but did not have any luck. Same error it seems.

committed new code below on github. Thanks in advance for additional suggestions.

08 Nov 2017, 13:17
David Copeland (479 posts)

I used “^4.0.0” instead of “4.0.0” and it’s working for me locally.

09 Nov 2017, 15:07
michael yosowitz (7 posts)

well, no luck. tried latest recommendation, but no change. bummer. any other variations on the syntax that I could try?

11 Nov 2017, 03:10
michael yosowitz (7 posts)

so how do I get the package.json to install 4.0.0 ?

11 Nov 2017, 15:53
David Copeland (479 posts)

Hey, sorry I’ve been a bit busy with some other things. I just pushed a pull request to your repo that has my changes in them.

Note that all I did was load the /customers page and see that Angular was executing. If there’s other things broken let me know and I can check it out.

11 Nov 2017, 23:28
michael yosowitz (7 posts)

Thanks. I see that the step that I was missing before was that I needed to run

yarn upgrade package.json

from my terminal after I altered package.json.

But it’s working now. Yeah!

11 Nov 2017, 23:30
David Copeland (479 posts)

Oh, duh. I should’ve mentioned that :(

Glad it’s working. As to why Angular 5 breaks it…ugh. I will have to find out…

21 Nov 2017, 11:42
Laura (44 posts)

Hi David, I had the same issue. I had to use typescript to fix. It seems that syntax you use is not supported by Angular5:



21 Nov 2017, 13:01
Laura (44 posts)

this is the code that works with Angular5:

import "hello_angular/polyfills";

import { Component, NgModule    } from "@angular/core";
import { BrowserModule          } from "@angular/platform-browser";
import { FormsModule            } from "@angular/forms";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

  selector: 'customer-search',
  template: `\
<header> \
  <h1 class="h2">Customer Search</h1> \
</header> \
<section class="search-form"> \
  <form> \
    <div class="input-group input-group-lg"> \
      <label for="keywords" class="sr-only">Keywords></label> \
      <input type="text" id="keywords" name="keywords" \
             placeholder="First Name, Last Name, or Email Address"\
             class="form-control input-lg">\
      <span class="input-group-btn"> \
        <input type="submit" value="Find Customers"\
               class="btn btn-primary btn-lg">\
      </span> \
    </div> \
  </form> \
</section> \
<section class="search-results"> \
  <header> \
    <h1 class="h3">Results</h1> \
  </header> \
  <ol class="list-group"> \
    <li class="list-group-item clearfix"> \
      <h3 class="pull-right"> \
        <small class="text-uppercase">Joined</small> \
      </h3> \
      <h2 class="h3"> \
        Pat Smith\
        <small>psmith34</small> \
      </h2> \
      <h4></h4> \
    </li> \
  </ol> \

class CustomerSearchComponent {}

  imports:      [ BrowserModule, FormsModule ],
  declarations: [ CustomerSearchComponent ],
  bootstrap:    [ CustomerSearchComponent ]

export class AppModule { }


You must be logged in to comment