How do refactor code for I amTypeError - Angular ^5.0

Question

I am getting TypeError when trying to implement this angular code. It generates error around Class({constructor: function() {}}). I have been pointed to this ( https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d ) but not sure how to implement solution.

I would love some help understand an alternative as I am new to this coding stuff.

This is from a book that I recently purchased about using rails, angular and postgres together. thanks.

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";

var CustomerSearchComponent = Component({
  selector: "shine-customer-search",
  template: '\
<header> \
  <h1 class="h2">Customer Search</h1> \
</header> \
  '
}).Class({
  constructor: function() {
  }
});

var CustomerAppModule = NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ CustomerSearchComponent ],
  bootstrap:    [ CustomerSearchComponent ]
})
.Class({
  constructor: function() {}
});

Answer 1

As I understand the information in the link above, you have to define your component as class and decorate it with the @Component decorator.

@Component({
  selector: "shine-customer-search",
  template: '\
<header> \
  <h1 class="h2">Customer Search</h1> \
</header> \
  '
})
export class CustomerSearchComponent {
  constructor() {
  }
}

EDIT

You also have to use typescript . As you tagged your question with javascript this may be an issue for you.

Your module will look like this:

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