CODEWITHSUNDEEP
angular
Mike3355
Mike3355

Reputation: 12081

Angular 2 app cannot find my directory

In my console in my browser is says:

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'.

Those are all the files I created!

This is a very basic app. All I did was make a new directory and generated my project from Angular's quickstart guide.

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 { }

This are the files I created in the customer directory

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>

I also posted it on GIT at GIT HUB

Upvotes: 0

Views: 464

Answers (1)

Riv
Riv

Reputation: 1859

I think that there's a problem with your import statements in each of those files.

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';

Upvotes: 1

Related Questions