Cannot find module Angular 2 @Component
<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>