small medium large xlarge

Generic-user-small
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

Dmfcb_pragsmall
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.

Generic-user-small
07 Nov 2017, 22:49
michael yosowitz (7 posts)

thanks for your help

https://github.com/michael2779/Shine/tree/master/app

Dmfcb_pragsmall
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 :(

Generic-user-small
07 Nov 2017, 23:33
michael yosowitz (7 posts)

will give it a go. thanks for your review.

Generic-user-small
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.

https://github.com/michael2779/Shine

Dmfcb_pragsmall
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.

Generic-user-small
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?

Generic-user-small
11 Nov 2017, 03:10
michael yosowitz (7 posts)

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

Dmfcb_pragsmall
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.

Generic-user-small
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!

Dmfcb_pragsmall
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…

Generic-user-small
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:

https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d

regards

Laura

Generic-user-small
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";


@Component({
  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> \
        2016-01-01\
      </h3> \
      <h2 class="h3"> \
        Pat Smith\
        <small>psmith34</small> \
      </h2> \
      <h4>pat.smith@example.com</h4> \
    </li> \
  </ol> \
</section>  
  `
})

class CustomerSearchComponent {}

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ CustomerSearchComponent ],
  bootstrap:    [ CustomerSearchComponent ]
})

export class AppModule { }


platformBrowserDynamic().bootstrapModule(AppModule);

Generic-user-small
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
Dmfcb_pragsmall
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?

Generic-user-small
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: https://github.com/u111979/shine.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.

Dmfcb_pragsmall
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).

Generic-user-small
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

Dmfcb_pragsmall
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.

Generic-user-small
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?

Dmfcb_pragsmall
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.

Generic-user-small
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?

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

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

Generic-user-small
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