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

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 (479 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 (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.

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

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

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

regards

Laura

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


@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);

You must be logged in to comment