Cannot find module Angular 2 @Component

Question

I have a very simple application and I used CLI to generate it. I created my own Directory called customers

Inside those directories are the following:

CustomerService.ts

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")
    ]
}

CustomerController.ts

import {Component} from "@angular/core";
import {CustomerService} from "../service/CustomerService";
import {CustomerModel} from "../model/customer";

@Component({
    selector: 'customers',
    template: `
<div>
<form (submit)="onSubmit()">
    <input type="text" [(ngModel)]="customer.firstName">
    <input type="text" [(ngModel)]="customer.lastName">
    <input type="text" [(ngModel)]="customer.street">
    <input type="text" [(ngModel)]="customer.phoneNumber">
</form>

`, })

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();
    }

}

CustomerSerice.ts

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")
    ]
}

I am getting the current errors: Cannot find module 'customers/controller/CustomerController'. and Argument of type '{ moduleId: string; selector: string; directive: any[]; templateUrl: string; styleUrls: string[];

Main.ts

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

app.component.ts

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!';
}

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<app-root>Loading...</app-root>

    <script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
    </script>

</body>
</html>

Then app.component.html

<h1>
  {{title}}
    <customers></customers>
</h1>

What I am trying to grasp is creating new directories in my application, like I did above, then reusing the @Component (<customers></customers>).

------------------------Update 1------------------------

I have done more to try and solve this and added it on Git.

https://github.com/drewjocham/Angular2TestApp

-----------------------Update 2-------------------------

I have updated my project with the answer and it compiles but my IDE is saying the following:

and

And just displaying Loading...

be4code · Accepted Answer · 2016-09-07 18:00:17Z

1

Try setting moduleId: module.id in yours @Component decorator in CustomerController

UPDATE1: To fix TS errors you need:

in customer.ts remove public from constructor
in app.component.ts replace directive with directives (add 's') and import controller properly: import {CustomerController} from "./customers/controller/CustomerController";
in CustomerService.ts: import { Injectable } from '@angular/core'; @Injectable()

edited Sep 7, 2016 at 18:00

answered Sep 7, 2016 at 16:26

be4code

7085 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zion · Accepted Answer · 2020-03-07 21:28:20Z

0

Here's what might be a better solution Directly specify what module you want to use like this:

loadChildren: () => HomeModule

PS: Don't forget to import the module.

answered Mar 7, 2020 at 21:28

Zion

352 silver badges9 bronze badges

Comments

Francesco Borzi · Accepted Answer · 2022-10-27 13:53:34Z

0

I got a similar error in my unit tests using spectator and the createHostFactory method, getting the following when running the test:

Error: Cannot find component/directive function MyComponent

In my case, the problem was that the component was missing from the template that I specified.

Adding the correct HTML of the component under test solved the problem for me.

answered Oct 27, 2022 at 13:53

Francesco Borzi

63.2k56 gold badges203 silver badges280 bronze badges

Collectives™ on Stack Overflow

Cannot find module Angular 2 @Component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related