Question

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

的目录

在这些目录中如下：

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>）。

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

我已经做了更多尝试解决这个问题并将其添加到Git上。

https://github.com/drewjocham/Angular2TestApp

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

我已经用答案更新了我的项目并且它编译但是我的IDE说了以下内容：

和

只显示Loading...

Answer 1

尝试在您的CustomerController

中的@Component装饰器中设置moduleId: module.id

<强> UPDATE1：要修复您需要的TS错误：

从public

constructor

将directive替换为directives（添加's'）并正确导入控制器：import {CustomerController} from "./customers/controller/CustomerController";
： import { Injectable } from '@angular/core'; @Injectable()

Answer 2

这可能是一个更好的解决方案直接指定要使用的模块，如下所示：

loadChildren: () => HomeModule

PS：别忘了导入模块。

找不到模块Angular 2 @Component

2 个答案: