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

Question

I am new to Aurelia, so please be careful with me if this is an obvious question or even something you should not think about. From reading documentation and various resources on the Internet, this seems to be nowhere to be seen.

As my project grew in size, I was restructured by folders and files. During refactoring, it looked a bit cumbersome to check the correct depth of the path, and also when I moved the view models, I also needed to change the import path.

Currently, I need to import certain files into my view models:

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

What would be more convenient for me would be to have a relative path starting from the root of the project, for example:

 import {log} from 'services/log'; 

Is there something I don’t see or just don’t understand? I know that with ./ the relative path from the current file is specified.

Update:

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

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

It seems to work only with "services / web-api", and the error

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

The aurelia.json file includes

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

Answer 1

It appears that the typescript compiler should be configured to access the desired path.

tsconfig.json

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

In this case, import now works, for example. 'services / web-api' (located in 'src') from any file and folder structure below 'src'.

Kudos goes to stoffeastrom from the channel Aurelia gitter, which actually pointed in the right direction.

Answer 2

This should work fine. The documentation at the HUA Aurelia Doc reads:

"The path that you specify 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 ./ or ../ to start the path will be relative to the root of your application, while the path with ./ or ../ will refer to your browsing path. Note that you can use several .. to navigate the directory tree as needed. "

This also works correctly in practice (specifically with aurelia-cli , which I use).

Therefore, the statement as you wrote it:

 import {log} from 'services/log'; 

it will efficiently import viewmodel ( log.ts ) and view ( log.html , if @noView decorator is not 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 her. To get around this, import noView and add a decorator before the class declaration, for example:

 import {noView} from 'aurelia-framework'; @noView export class MyClass {