Не удается найти модуль Angular 2 @Component

У меня очень простое приложение, и я использовал CLI для его создания. Я создал мой собственный каталог называется customersНе удается найти модуль Angular 2 @Component

Внутри этих каталогов являются следующие:

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

Я получаю текущие ошибки: Cannot find module 'customers/controller/CustomerController'. и 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>

Тогда app.component.html

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

То, что я пытаюсь понять, как создавать новые каталоги в моей как я делал выше, затем повторно использовал @Component (<customers></customers>).

------------------------ Обновление 1 -------------------- ----

Я сделал больше, чтобы попытаться решить эту проблему и добавил ее на Git.

https://github.com/drewjocham/Angular2TestApp

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

Я обновил свой проект с ответом, и он компилирует, но мой IDE говорит следующее:

И только показать Loading...

источник

2016-09-07 Drew1208

Попробуйте установить moduleId: module.id в вашем @Component декоратора в CustomerController

Update1: Чтобы исправить ошибки TS вам необходимо:

в customer.ts удалить public от constructor
in app.component.ts заменитьс directives (добавить 's') и импорта контроллер правильно: import {CustomerController} from "./customers/controller/CustomerController";
в CustomerService.ts: import { Injectable } from '@angular/core'; @Injectable()

источник

2016-09-07 16:26:45 be4code

Спасибо за усилия, но это не сработало. – Drew1208

Я обновил свой ответ. Другие ошибки связаны с вашим 'index.html' – be4code

Большое спасибо. Однако теперь он компилируется, но просто говорит «Загрузка ....» – Drew1208

Не удается найти модуль Angular 2 @Component

ответ

Смежные вопросы