Is it possible to specify paths from project root in aurelia view models?

Question

I'm fairly new to Aurelia so please be gentle with me if this is an obvious question or even something one should not consider doing. From reading the documentation and various resources on the web this does not seem to be addressed anywhere.

As my project increased in size I restructured folders and files. While refactoring it felt a bit cumbersome, as to check the correct depth of the path, and also when I moved view models I needed to change the import path as well.

Currently I need to import certain files in my view models as:

import {log} from './../../services/log';

What I would find more comfortable would be to have a relative path starting from the root of the project like:

import {log} from 'services/log'; 

Is there anything I'm missing or simply not understanding? I know that with the ./ the relative path from the current file is specified.

Update:

I tried the same with the Aurelia Contact Manager Tutorial where all files in the src folder are on the same level. If I move the 'wep-api.ts' file into a 'src/services' folder and want to import that file from a viewmodel inside 'src/components/users' I need to use the import as

import {WebAPI} from './../../services/web-api';

It does not seem to work with only 'services/web-api' and the error is

[ts] cannot find module 'services/web-api'

The aurelia.json file includes

"paths": {
    "root": "src", ...

Carder

Answer 1

As it appears the typescript compiler needs to be configured to access the desired path.

tsconfig.json

{ 
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "*":["src/*"]
    }
  }
  ...
}

With this in place, imports now work as e.g. 'services/web-api' (located in 'src') from any file and folder structure below 'src'.

Kudos go to stoffeastrom from the Aurelia gitter channel who actually pointed out the right direction.

Carder

Answer 2

This should work just fine. The documentation on Aurelia's Doc HUB states:

"The path you supply in the from attribute can take one of two forms: It can be relative to the root of your application or relative to the path of the view you are currently in. A path that does not have a ./ or ../ to start the path will be relative to the root of your application, while a path with ./ or ../ will be relative to your view's path. Note that you can use multiple ..'s to traverse up a directory tree as needed."

This works correctly in practice as well (definitely with aurelia-cli, which is what I use).

Therefore, the statement as you wrote it:

import {log} from 'services/log';

will effectively import a viewmodel (log.ts) and view (log.html, unless the @noView decorator is specified) from the /src/services folder.

Class Only (No View)

If you don't have a view, it will throw an error unless you explicitly tell Aurelia not to look for one. To work around this, import noView and add the decorator before your class declaration, like this:

import {noView} from 'aurelia-framework';

@noView 
export class MyClass {

Trinatte

That is what I once read as well but had no luck getting it to work. I get a 'Cannot find module' error. I'm using typescript but I guess that doesn't matter. However the imported file is just a .ts file with no associated view. Maybe that could be the problem? – Carder

Yes, that would be the problem. Import noView and add @noView before your class declaration. I'll update my answer with sample code. – Trinatte

Ok this might be the case for viewmodels without views, but what about e.g. the web-api class fom the contact manager tutorial. When I put that file in a sub folder and want to reference it from another sub folder it only works with ./../ in front. I could make it more clear and update my question if that helps. – Carder

Make sure it is a subfolder of src. It should work for any Aurelia path. – Trinatte

I updated the question. Hopefully it is now more clear what I'm doing wrong. – Carder

I reviewed your update and again, it seems like it should work. We need the input of someone more experienced to help you troubleshoot this. – Trinatte

Have you tried the Aurelia gitter channel? This might be a good place to ask your question and try to get some back-and-forth troubleshooting. gitter.im/aurelia/discuss – Trinatte