CODEWITHSUNDEEP
angulartypescriptwebpack
alik_cybershot
alik_cybershot

Reputation: 35

Angular 2 doesn't load all source files

In my angular 2 project I have a few components generated by angular-cli 1.0.0-rc.0. So project src folder look like this:

List:

├── app
│   ├── app.component.html
│   ├── app.component.ts
│   ├── routing.module.ts
│   ├── app.module.ts
│   ├── info
│   │   ├── info.component.html
│   │   └── info.component.ts
│   ├── journal
│   │   ├── journal.component.html
│   │   └── journal.component.ts
│   ├── model
│   │   ├── entity.ts
│   │   └── user.ts
│   ├── roles
│   │   ├── roles.component.html
│   │   └── roles.component.ts
│   └── users
│       ├── users.component.html
│       ├── users.component.ts
│       └── users.service.ts
│
├── favicon.ico
├── fonts
│...
├── img
│  ...
└── index.html

The src/model/user.ts file has User class declaration. Anyway, when I launched my project I've got many errors like

TypeError: this.currentUser.getFullName is not a function

At the Chrome DevTools on Sources I didn't find my source files from model folder, can see on this screenshot.

Why Webpack ignore folders, which hasn't angular components?

AppComponent class declaration:

import {Component, OnInit} from "@angular/core";
    import {UsersService} from "./users/users.service";

    import {User} from "./model/user";

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    export class AppComponent implements OnInit {

        constructor(private userService: UsersService) {
        }

        currentUser: User;

        ngOnInit(): void {
            this.userService.getCurrentUser().subscribe(user => {
                this.currentUser = user;
                console.log(user);
            });
        }

        getFullName(): string {
            return this.currentUser != null ? this.currentUser.getFullName() : "";
        }

    }

UsersService class declaration:

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import "rxjs/add/operator/map";
import {Observable} from "rxjs";

import {User} from "../model/user";

@Injectable()
export class UsersService {

    private url = 'api/users'

    constructor(private http: Http) {
    }

    getCurrentUser(): Observable<User> {
        return this.http.get(`${this.url}/cu`)
            .map(response => {
                return response.json() as User;
            });
    }

    private handleError(error: any): Promise<any> {
        return Promise.reject(error.message || error);
    }
}

User class declaration: 

import {Entity} from "../model/entity";

export class User extends Entity {

    constructor(
        public id: number,
        public name: string,
        public surname: string,
        public patronimyc: string,
        public login: string
    ) {
        super(id);
    };

    getFullName():string{
        return `${this.surname} ${this.name} ${this.patronimyc}`;
    }

}

Upvotes: 0

Views: 340

Answers (1)

JB Nizet
JB Nizet

Reputation: 691755

In your service, you're doing this:

return response.json() as User;

This basically tells TypeScript: Trust me, I know that the object returned by response.json() is an instance of the class User. But it's not. response.json() just creates a dumb JavaScript object, which is not an instance of your class (how could Angular know about your class), and has no method other than the ones all JS objects have.

So trying to call getFullName() on this dumb object fails, because, as the message says, this method doesn't exist.

Upvotes: 1

Related Questions