Angular 2应用程序找不到我的目录

时间:2016-09-12 19:56:08

标签: angular

在浏览器的控制台中说:

app/app.module.ts(4,33): error TS2307: Cannot find module 'customer/app.customer'.
app/customer/app.customer.service.ts(1,29): error TS2307: Cannot find module 'customer/app.customer.model'.
app/customer/app.customer.ts(2,29): error TS2307: Cannot find module 'customer/app.customer.model'.
app/customer/app.customer.ts(3,31): error TS2307: Cannot find module 'customer/app.customer.service'.

这些是我创建的所有文件!

这是一款非常基本的应用。我所做的就是创建一个新目录,并从Angular的快速入门指南中生成我的项目。

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent, CustomerComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component

@Component({
    selector: 'my-app',
    template: '<customer></customer>'
})
export class AppComponent { }

这是我在客户目录中创建的文件

app.customer.model

export class CustomerModel {

    firstName:String = "";
    lastName:String = "";

    constructor(title:String = ""){

    }

}

app.customer.service

import {CustomerModel} from 'customer/app.customer.model';
import {Injectable} from '@angular/core';

@Injectable()
export class CustomerService {

    customerList:CustomerModel[] = [
        new CustomerModel("Mr."),
        new CustomerModel("Miss."),
        new CustomerModel("Ms."),
    ];

}

app.customer.ts

import {Component} from '@angular/core';
import {CustomerModel} from 'customer/app.customer.model';
import {CustomerService} from 'customer/app.customer.service';

@Component({
    moduleId: module.id,
    selector: 'customer',
    templateUrl: './customer.html'
})

export class CustomerComponent {

    customer:CustomerModel = new CustomerModel();

    constructor(public service:CustomerService){

    }

    onSubmit(){
        this.service.customerList.push(this.customer);
    }
}

customer.html

<div>

    <form (submit)="onSubmit()">

        <label>FistName:
            <input type="text" name="firstName" [(ngModel)]="customer.firstName">
        </label>

        <label>FistLast:
            <input type="text" name="lastName" [(ngModel)]="customer.lastName">
        </label>

        <button type="submit">Submit</button>
    </form>

    <ul>
        <li *ngFor="let customers of service.customerList">
            {{customers.value}}
            {{customers.firstName}}
            {{customers.lastName}}
        </li>
    </ul>

</div>

我也在GIT HUB

将其发布在GIT上

1 个答案:

答案 0 :(得分:1)

我认为每个文件中的import语句都存在问题。

app.module.ts

import { CustomerComponent } from './customer/app.customer;

app.customer.service

import { CustomerModel } from './app.customer.model';

app.customer.ts

import { CustomerModel } from './app.customer.model';
import { CustomerService } from './app.customer.service';