2016-09-07 16 views
0

私は非常に単純なアプリケーションを持っており、CLIを使って生成しています。私は自分のディレクトリはそのディレクトリ内customersモジュールが見つかりません角度2 @Component

enter image description here

と呼ば作成し、次のとおりです。

enter image description here

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.htmlその後

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> 

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

私は何を把握しようとしていますが、私の中に新しいディレクトリを作成しています上記のように、@Component<customers></customers>)を再利用してください。

------------------------更新1 -------------------- ----

私はこの問題を解決し、Gitに追加しました。

https://github.com/drewjocham/Angular2TestApp

-----------------------アップデート2 ---------------- ---------

私は答えと私のプロジェクトを更新している、それはコンパイルが、私のIDEには、次のように言っている:

enter image description here

enter image description here

そして、ちょうどLoading...

答えて

1

がCustomerControllerであなたに

UPDATE1 @ComponentデコレータをmoduleId: module.idを設定してみてください表示:customer.tsで

  • publicを削除: はあなたが必要とするTSのエラーを修正するにはconstructor
  • (app.component.tsから)と( 's' を追加)し、正しくインポートコントローラ:import {CustomerController} from "./customers/controller/CustomerController";
  • CustomerService.ts中: import { Injectable } from '@angular/core'; @Injectable()
+0

努力いただきありがとうございますが、それは動作しませんでした。 – Drew1208

+0

私は自分の答えを更新しました。別のエラーがあなたの 'index.html'に接続されています – be4code

+0

ありがとうございます。しかし今はコンパイルしますが、ただ 'Loading ....'と言っています – Drew1208

関連する問題