找不到模块 Angular 2 @Component

Question

I have a very simple application and I used CLI to generate it.我有一个非常简单的应用程序，我使用 CLI 生成它。 I created my own Directory called customers我创建了自己的名为customers的目录

Inside those directories are the following:这些目录中的内容如下：

CustomerService.ts客户服务.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客户控制器.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客户服务.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'.我收到当前错误： Cannot find module 'customers/controller/CustomerController'. and Argument of type '{ moduleId: string; selector: string; directive: any[]; templateUrl: string; styleUrls: string[];和Argument of type '{ moduleId: string; selector: string; directive: any[]; templateUrl: string; styleUrls: string[]; 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 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索引.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然后 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> ).我想要掌握的是在我的应用程序中创建新目录，就像我上面所做的那样，然后重用@Component ( <customers></customers> )。

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

I have done more to try and solve this and added it on Git.我做了更多尝试来解决这个问题并将其添加到 Git 上。

https://github.com/drewjocham/Angular2TestApp https://github.com/drewjocham/Angular2TestApp

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

I have updated my project with the answer and it compiles but my IDE is saying the following:我已经用答案更新了我的项目并且它可以编译，但我的 IDE 说以下内容：

and和

And just displaying Loading...并且只显示Loading...

Answer 1

Try setting moduleId: module.id in yours @Component decorator in CustomerController尝试在 CustomerController 的 @Component 装饰器中设置moduleId: module.id

UPDATE1: To fix TS errors you need: UPDATE1：要修复 TS 错误，您需要：

in customer.ts remove public from constructor在 customer.ts 中从constructor删除public
in app.component.ts replace directive with directives (add 's') and import controller properly: import {CustomerController} from "./customers/controller/CustomerController";在 app.component.ts 中用directives替换directive （添加“s”）并正确导入控制器： import {CustomerController} from "./customers/controller/CustomerController";
in CustomerService.ts: import { Injectable } from '@angular/core'; @Injectable()在 CustomerService.ts 中： import { Injectable } from '@angular/core'; @Injectable() import { Injectable } from '@angular/core'; @Injectable()

Answer 2

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. PS：不要忘记导入模块。

找不到模块 Angular 2 @Component

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-09-07 16:26:45

解决方案2
0 2020-03-07 21:28:20

找不到模块 Angular 2 @Component

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-09-07 16:26:45

解决方案2 0 2020-03-07 21:28:20

解决方案1
1 已采纳 2016-09-07 16:26:45

解决方案2
0 2020-03-07 21:28:20