找不到模块 Angular 2 @Component答案

【问题标题】：Cannot find module Angular 2 @Component找不到模块 Angular 2 @Component
【发布时间】：2016-09-07 15:25:38
【问题描述】：

我有一个非常简单的应用程序，我使用 CLI 来生成它。我创建了自己的目录，名为customers

在这些目录内有以下内容：

客户服务.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();
    }

}

客户服务.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

-----------更新2---------- ---

我已经用答案更新了我的项目，它可以编译，但我的 IDE 显示如下：

和

只显示Loading...

【问题讨论】：

标签： angular

【解决方案1】：

尝试在 CustomerController 中的 @Component 装饰器中设置 moduleId: module.id

更新1： 要修复 TS 错误，您需要：

在 customer.ts 中从 constructor 中删除 public
在 app.component.ts 中将 directive 替换为 directives（添加 's'）并正确导入控制器：import {CustomerController} from "./customers/controller/CustomerController";
在 CustomerService.ts 中： import { Injectable } from '@angular/core'; @Injectable()

【讨论】：

我已经更新了我的答案。另一个错误与你的index.html有关
是加载Systemjs的问题引起的。您可以从这里尝试配置：angular.io/docs/ts/latest/quickstart.html
再次感谢您，我会仔细看看。我用两张截图更新了我的问题...
它与您问题的主题不对应，但您应该遵循前面提到的快速入门指南。在这种情况下，每个input 上都缺少name 属性。

【解决方案2】：

这可能是一个更好的解决方案像这样直接指定要使用的模块：

loadChildren: () => HomeModule

PS：不要忘记导入模块。

【讨论】：