problem with external imports in aurelia

[lucamorelli]

Hi,
I'm using visual studio code to reproduce this sample in typescript

http://odetocode.com/blogs/scott/archive/2015/02/18/using-jspm-with-visual-studio-2015-and-asp-net-5.aspx

all works fine until I arrive at the point 4 and try to use moment. I follow the instructions, install the package using jspm, but I have the error message that cannot find this module, and the source files are not compiled.

Am I missing something?

[lucamorelli]

I tried to install tsd inside this project and is giving to me some problems, with a lot of errors: looks like ts I trying to recompile the content of the /node_modules/tsd/build and find a lot of missing references.

[lucamorelli]

I solved the first problem setting to false noEmitOnError in the tsconfig file, but I would like to find a better solution

[mhegazy]

I tried to install tsd inside this project and is giving to me some problems, with a lot of errors: looks like ts I trying to recompile the content of the /node_modules/tsd/build and find a lot of missing references.

The probelm is that tsconfig.json does not support execludes. this is tracked by #1927. So it is teling the compiler to include *__.ts in the current directory, which includes your tsd sources as well. To workaround this, in tsconfig,add a "files" entry and list your files, this will not include all files.

but I have the error message that cannot find this module, and the source files are not compiled.

As you mentioned later you also need a reference to moment.d.ts.

[lucamorelli]

thanks, add my application ts files in the files section solved several problems. I see that enabling es 6 output generates a few errors in the moment.d.ts file too.

[mhegazy]

if it is:

error TS1203: Export assignment cannot be used when targeting ECMAScript 6 or higher

This has been fixed in #2929, and should be in master now.

[lucamorelli]

I have some errors like these, using visual studio code that uses tsconfig.json :
App/contact-list.ts(1,31): error TS2307: Cannot find external module 'aurelia-event-aggregator'.
App/loading-indicator.ts(1,23): error TS2307: Cannot find external module 'nprogress'.
App/loading-indicator.ts(2,32): error TS2307: Cannot find external module 'aurelia-framework'.

I suppose this may be happen when I'm using new frameworks when thd .d.ts is not still available and/or complete.

btw: always talking about visual studio code, looks like that similar scenario when I compile I found 0 errors, as I start to write something detect a few errors

[DanielRosenwasser]

Yeah, that sounds like a .d.ts issue. Where'd you get your definitions from? DefinitelyTyped doesn't seem to have it yet.

[lucamorelli]

found this

https://github.com/cmichaelgraham/aurelia-typescript

[mhegazy]

@cmichaelgraham can you point @lucamorelli to the latest .d.ts for aurelia?

[cmichaelgraham]

we are now automatically generating the aurelia .d.ts files, one per repo, using a typescript port of the aurelia libraries. you can find a working sample of the results here with the .d.ts files here

We are still working out some kinks. let me know if you have troubles.

[lucamorelli]

thanks for the link. I'm still working on it to see if is possibile to use jspm as in the normal javascript version. nothing against the solution you have found, but in this solution when you have a problem with the program you don't know if it is part of the problem.

[cmichaelgraham]

you should be able to use the .d.ts files above with your jspm solution. i'm happy to help if you run into trouble

[lucamorelli]

I copied directly all the sample in an asp.net 5 proejct: runs with chrome but not with ie.
Tried to changed the index page configuring the load via jspm (I think I already installed the jspm packages during previous tests) but doesn't show the startup screen neither.
seems that this alternate configuration is due to the esri library, that requires es5 compilation and amd module support.
This may be a problem in production if someone start to develop using es 6 and must add some "legacy" library during development.
Is there some way to wrap this library in a es 6 module and let the two things coexists?

[cmichaelgraham]

i started down the path you describe with jspm & systemjs & esri. esri uses dojo. dojo has its own loader (which is requirejs compliant).

for the time being, i have given up on making esri work properly with jspm and systemjs.

instead, i create an amd module bundle of the aurelia libraries and use the dojo amd loader that is part of the esri distribution via cdn.

you can see that working here

and described in the blog entry: Getting Started with Aurelia and TypeScript

[lucamorelli]

Thanks for the infos. I'm more interested to have a running project using typescript and jspm that to have esri, so I'll try to clean up and recreate it.
I read the article, really nice. If you'll decide to move to ts and need help let me know: I don't know if I can be of help, but I'm very interested.

[cmichaelgraham]

sounds great - reach out if you run into troubles 👍

[lucamorelli]

Hi, looks like that now it works, and I see that now .d.ts files are inside the package.
I'm giving a look to the code and I see that in this code

      return this.http.jsonp(this.url).then(response => {    
            this.images = response.content.items;    
        });

response is any, I think because of this.

    /**
       * Sends a JSONP request.
       *
       * @method jsonp
       * @param {String} url The target URL.
       * @return {Promise} A cancellable promise object.
       */
    jsonp(url: any, callbackParameterName?: any): any;

can you give me more informations on how to modify the .d.ts files?

[lucamorelli]

I'm trying to convert to full typescript some parts of the samples

import {Router} from 'aurelia-router';
import {RouterConfiguration} from 'aurelia-router';

export class App {
    router: Router;
    configureRouter(config: RouterConfiguration, router: Router) {
        config.title = 'Aurelia'; 
        config.map([ 
            { route: ['', 'welcome'], name: 'welcome', moduleId: './welcome', nav: true, title: 'Welcome' },
            { route: 'flickr', name: 'flickr', moduleId: './flickr', nav: true, title: 'Flickr' },
            { route: 'child-router', name: 'childRouter', moduleId: './child-router', nav: true, title: 'Child Router' }
        ]);
        this.router = router;
    }
}

if I'm correct, I think that in the .d.ts files are included just methods, not properties, because in the RouterConfiguration class I had to add the property title.
Same problem for config.map method: I suppose that is an array of NavigationInstruction, but if I'm correct the properties are missing

[ctoran]

@lucamorelli if you're still interested, I have a full port of aurelia skeleton-navigation to TypeScript. Please follow link to related issue.