How to create aurelia typescript project with vs2017rc

Question

I am new to aurelia, and I need create a prototype project of the framework. At the beginning, I planed to use skeleton-typescript-aspnetcore skeleton, but when I tried the

Answer 1

Since Visual Studio 2017 just launched I thought I'd answer how I solved this, as there are still many errors when using "skeleton-typescript-aspnetcore".

Using https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 as a starting point, these are the steps to get it running:

When you first run the project you will get errors complaining that some files located in /test/ is not under 'rootDir'. In your tsconfig.json the rootDir is defined as "src/", this can be solved simply by moving your test folder inside your src folder. This will cause new errors because the paths defined in those files has now changed. You will need to edit app, child-router and users imports like this: import {Users} from '../../users'; IntelliSense should help you out here.

The command gulp test will also not run before changing to the new path, you can change the path in karma.conf.js:

files: [
  'src/test/unit/setup.ts',
  'src/test/unit/*.ts'
],

Next the file users.ts will throw errors like Type 'Response' is not assignable to type 'any[]'. You will need to tell TypeScript what you're declaring like this: public users : Object = []; or simply: public users = {};

The final problem is that you're going to have a lot of duplicate identifier errors, at the time of writing this the cause of this seems to be from the changes brought on by TypeScript version 2.2.1. I don't know what specifically breaks, but I know that previous version 2.1.5 still works. So what you need to do is to run npm install typescript@2.1.5 --save in your src/skeleton directory, the --save is just to update your package.json file, you can do this on your own later as well if you wish.

After you've done that your gulp errors (20~ of them) should be resolved. But there are still some errors remaining caused by duplicate signatures. Again, things have changed in TypeScript 2.0+, there is now a simplified way of getting and using declaration files. Here is an answer on SO on how to use the @types feature: How should I use @types with TypeScript 2 , but to keep this short and sweet you will have to go to your tsconfig.json file and explicitly tell where to find the @types/node folder. It would look something like this:

"compilerOptions": {
...
"typeRoots": [
   "node_modules/@types"
],
"types": [ "node" ]
...
},

Hope this helps, with these changes the project should now build and launch correctly.

EDIT: I recently ran into some problems again with building my project. I got a lot of duplicate identifiers again... I however ran across this answer on SO: TypeScript throws multiple duplicate identifiers

Apparently TypeScript latest ships with fetch definitions out of the box, so I was able to run the command from the answer in the link:

npm uninstall @types/whatwg-fetch

And upgrading from typescript 2.1.5 to latest:

npm install typescript --save

You might even want to install typescript globally by appending -g. Also this will continue to be an issue unless you comment out/delete url and whatwg-fetch from typings.json globalDependencies in order to prevent it from recreating itself:

 "globalDependencies": {
    //"url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
    //"whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
  }

Then you can either delete the typings folder, running typings install again or edit index.d.ts in the typings folder and delete the reference paths to whatwg-fetch and url. Hope this helps someone who might've encountered the same problems even after "fixing" it.