title: Cannot find module Angular 2 @Component
body: <p>I have a very simple application and I used CLI to generate it. I created my own Directory called <code>customers</code> </p>
  
  <p><a href="https://i.stack.imgur.com/yC5e8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yC5e8.png" alt="enter image description here"></a></p>
  
  <p>Inside those directories are the following:</p>
  
  <p><a href="https://i.stack.imgur.com/pAixM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pAixM.png" alt="enter image description here"></a></p>
  
  <p>CustomerService.ts</p>
  
  <pre><code>import {CustomerModel} from "../model/customer"
  import {Injectable} from "@angular/core";
  
  @Injectable
  export class CustomerService {
  
      customer:CustomerModel[] = [
          new CustomerModel("male"),
          new CustomerModel("female"),
          new CustomerModel("male"),
          new CustomerModel("female")
      ]
  }
  </code></pre>
  
  <p>CustomerController.ts</p>
  
  <pre><code>import {Component} from "@angular/core";
  import {CustomerService} from "../service/CustomerService";
  import {CustomerModel} from "../model/customer";
  
  @Component({
      selector: 'customers',
      template: `
  &lt;div&gt;
  &lt;form (submit)="onSubmit()"&gt;
      &lt;input type="text" [(ngModel)]="customer.firstName"&gt;
      &lt;input type="text" [(ngModel)]="customer.lastName"&gt;
      &lt;input type="text" [(ngModel)]="customer.street"&gt;
      &lt;input type="text" [(ngModel)]="customer.phoneNumber"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>
      `,
      })</p>
  
  <pre><code>export class CustomerController {
  
      customer: CustomerModel = new CustomerModel();
  
      constructor(public customerService: CustomerService) {
  
      }
  
      onSubmit() {
          this.customerService.customer.push(this.customer);
          console.log("Push: " + this.customerService.customer);
          this.customer = new CustomerModel();
      }
  
  }
  </code></pre>
  
  <p>CustomerSerice.ts</p>
  
  <pre><code>import {CustomerModel} from "../model/customer"
  import {Injectable} from "@angular/core";
  
  @Injectable
  export class CustomerService {
  
      customer:CustomerModel[] = [
          new CustomerModel("male"),
          new CustomerModel("female"),
          new CustomerModel("male"),
          new CustomerModel("female")
      ]
  }
  </code></pre>
  
  <p>I am getting the current errors: <code>Cannot find module 'customers/controller/CustomerController'.</code> and  <code>Argument of type '{ moduleId: string; selector: string; directive: any[]; templateUrl: string; styleUrls: string[];</code> </p>
  
  <p>Main.ts</p>
  
  <pre><code>import { bootstrap } from '@angular/platform-browser-dynamic';
  import { enableProdMode } from '@angular/core';
  import { AppComponent, environment } from './app/';
  import {CustomerController} from './app/customers/controller/CustomerController';
  
  if (environment.production) {
    enableProdMode();
  }
  
  bootstrap(AppComponent,[CustomerController]);
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import {Component} from "@angular/core";
  import {CustomerController} from "customers/controller/CustomerController";
  
  @Component({
      moduleId: module.id,
      selector: 'app-root',
      directive: [CustomerController],
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.css']
  })
  
  export class AppComponent {
      title = 'app works!';
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Test App&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;app-root&gt;Loading...&lt;/app-root&gt;
  
      &lt;script&gt;
        System.import('system-config.js').then(function () {
          System.import('main');
        }).catch(console.error.bind(console));
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then app.component.html</p>
  
  <pre><code>&lt;h1&gt;
    {{title}}
      &lt;customers&gt;&lt;/customers&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>What I am trying to grasp is creating new directories in my application, like I did above, then reusing the <code>@Component</code> (<code>&lt;customers&gt;&lt;/customers&gt;</code>).</p>
  
  <p>------------------------Update 1------------------------</p>
  
  <p>I have done more to try and solve this and added it on Git.</p>
  
  <p><a href="https://github.com/drewjocham/Angular2TestApp" rel="nofollow noreferrer">https://github.com/drewjocham/Angular2TestApp</a></p>
  
  <p>-----------------------Update 2-------------------------</p>
  
  <p>I have updated my project with the answer and it compiles but my IDE is saying the following:</p>
  
  <p><a href="https://i.stack.imgur.com/s1kVZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s1kVZ.png" alt="enter image description here"></a></p>
  
  <p>and</p>
  
  <p><a href="https://i.stack.imgur.com/uXm9J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uXm9J.png" alt="enter image description here"></a></p>
  
  <p>And just displaying <code>Loading...</code></p>