small medium large xlarge

31 Dec 2017, 19:21
Denis S Dujota (13 posts)

i am getting an error where it doesn’t import the @angular/forms. looks like it cannot find it?

Failed to compile.

Module not found: Error: Can't resolve '@angular/forms' in '/Users/Denis/shine/app/javascript/packs'
 @ ./app/javascript/packs/customers.js 4:0-45
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/customers.js

the code looks the same as in the book unless my eyes are failing me somewhere (could be very likely)

var CustomerSearchComponent = Component({
  selector: "shine-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="forms-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> \
  </section> \
  constructor: function() {

31 Dec 2017, 20:40
David Copeland (491 posts)

Have you added @angular/forms to your package.json and done a yarn install?

31 Dec 2017, 20:49
Denis S Dujota (13 posts)

i got it somewhat working before checking the post, yes there was no @angular/forms module in my package.json.

i dont see where in the book it says i need to add this to the package.json since it states that its all preconfigiured by webpacker.

is there something wrong with how webpacker installed angular that caused this to be missing?

31 Dec 2017, 20:56
Denis S Dujota (13 posts)

rendering a blank page now, looks like i made a mistake writing the markup, says unexpected closing of h1 tag

ncaught Error: Template parse errors:
Unexpected closing tag "h1". It may happen when the tag has already been closed by another tag. 

For more info see ("  


<h1 class"h2">Customer Search [ERROR ->]</h1>   

<section class="search-form">     

<div class="input-group input-grou"): 


working through this issue now. I’m feeling a little better that I was able to figure out that was missing the forms module, but still feeling uneasy that something went wrong with the angular install

UPDATE: copied your markup and it works, so definitely a typo somewhere, but i don’t see it in the h1 tag it is trying to hint at me. im probably blinded by looking at this code for so long

31 Dec 2017, 21:44
David Copeland (491 posts)

On page 67, the book says to yarn add @angular/forms @angular/http. You may have missed it since it comes after a bunch of output.

31 Dec 2017, 22:00
Denis S Dujota (13 posts)

WOW! i cannot believe i totally missed that, it all looked like it was part of the angular install when i went through it.

Looking at that part again on pg 67 for a second time, looks like i need to add the @angular/http as well.

PS - looks like i can chain the yarn installs on one line?

31 Dec 2017, 22:03
David Copeland (491 posts)

yeah, if you do yarn install x y z it’ll install x, y, and z (if that makes sense)

You must be logged in to comment