CODEWITHSUNDEEP
javascriptnode.jsangulartypescriptwebpack
Alon
Alon

Reputation: 11885

Getting 'Module not found' although file exists

I downloaded the angular starter and ran the app and it ran well. Now I Added a new file "people.service.ts" located in "src/app/services/people.service.ts".

When I try to import it, I get an error:

Module not found: Error: Can't resolve 'services/people.service' in '/path-to-project/angular-starter-master/src/app'

This is the code I use to import it (in src/app/app.module.ts):

import {PeopleService} from 'services/people.service';

I'm sure that there's no typos because the IDE recognizes it. There isn't any TypeScript error in the entire project. The file 'services/people.service' does contain a class named PeopleService.

Any help will be profoundly appreciated. Please let me know if you need any additional information.

Upvotes: 1

Views: 1573

Answers (2)

monica
monica

Reputation: 1484

TypeScript 2.0+

In TypeScript 2.0 you can add a baseUrl property in tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

Then you can import everything as if you were in the base directory:

import {PeopleService} from 'services/people.service';

On top of this, you could add a paths property, which allows you to match a pattern then map it out. For example:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

Which would allow you to import it from anywhere like so:

import {PeopleService} from 'services/people.service';

From there, you will need to configure whatever module loader you are using to support these import names as well. Right now the TypeScript compiler doesn't seem to automatically map these out.

You can read more about this in the github issue. There is also a rootDirs property which is useful when using multiple projects.

OR

You can directly change the absolute path to relative path like this: 

import {PeopleService} from './services/people.service';

Upvotes: 0

Max Koretskyi
Max Koretskyi

Reputation: 105449

The problem is that you're using absolute path instead of a relative path. Change the import to the following:

import {PeopleService} from './services/people.service';

Upvotes: 3

Related Questions