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 (512 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 (512 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 (512 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 (512 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 (512 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 (47 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 (47 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 { }


23 Dec 2017, 14:55
Thomas Mangold (5 posts)

This still does not work for me with angular 5: The @ before component is marked as invalid token:

Failed to compile.

./app/javascript/packs/customers.js Module build failed: SyntaxError: Unexpected token (8:0)    6 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
   7 | 
>  8 | @Component({
     | ^
   9 |   selector: 'shine-customer-search',
  10 |   template: '\
  11 | <header> \ @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/customers.js
26 Dec 2017, 14:38
David Copeland (512 posts)

If you want to use typscript, you need to name your file with a .ts extension—the error shows a .js one. Any chance that’s the issue?

If not, can you post your app on github?

03 Jan 2018, 13:22
Thomas Mangold (5 posts)

Was partially a solution, but got lots of compile errors from typescript. I set my project on git: There must be something in the configuration of webpack, that needs a change as well when switching from JavaScript to TypeScript. Thanks for your support.

03 Jan 2018, 14:04
David Copeland (512 posts)

It looks like you are mixing the JavaScript and TypeScript syntax in a way that I don’t think will work.

I would recommend you follow what is in the book and not try to learn TypeScript until you have the app working.

If you do want to do TypeScript, you will not be able to follow the book directly—TypeScript works differently (and I can’t be more helpful as I don’t know TypeScript very well).

03 Jan 2018, 16:57
Thomas Mangold (5 posts)

Thank you David, I’ll not intending to learn typescript, I’m fine with javascript, but I’m stuck in chapter 6-20. Untill 6-10 all went well but then there is nothing displayed and the debugger of firefox shows the message TypeError: Object(…)(…).Class is not a function. I exchanged my modified files in the git repo by the originals files downloaded from dcbang2 Sorry about my diffculties

03 Jan 2018, 17:45
David Copeland (512 posts)

Yeah, I was confused because you have @Component in your source, which is a typescript annotation and is not valid JavaScript.

03 Jan 2018, 19:36
Thomas Mangold (5 posts)

But how do I get rid of that error

TypeError: Object(...)(...).Class is not a function

Do I have do downgrade on angular 4.0,x?

03 Jan 2018, 20:47
David Copeland (512 posts)

OH, yeah. Angular 5 apparently breaks something. I had thought you were still using the @Component annotation, but if you are following the book’s code, you do need to downgrade to Angular 4.

04 Jan 2018, 06:24
Thomas Mangold (5 posts)

Hi David, thanks for the answer. Are you planning an update or a third edition of the book based on angular 5?

04 Jan 2018, 13:28
David Copeland (512 posts)

There isn’t an update planned right now, sorry :(

28 Jan 2018, 22:00
AK (1 post)

I had the same error.

What helped me, was to replace all the angular related lines in package.json with the following:

"@angular/common": "^4.1.3",
"@angular/compiler": "^4.1.3",
"@angular/core": "^4.1.3",
"@angular/forms": "^4.1.3",
"@angular/http": "^4.1.3",
"@angular/platform-browser": "^4.1.3",
"@angular/platform-browser-dynamic": "^4.1.3"

(I had installed the latest Angular version, 5.x.x).

p.s. It would have been super helpful to specify the Angular version in the book!

You must be logged in to comment