如何使用vs2017rc创建Aurelia打字稿项目

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 vs2017rc, I found it uses .csproj as the default format(while vs2015 is project.json/.xproj), I think we should follow the vs2017 because we will upgrade our IDE after it's been launched.

The vs2017 have a wizard to upgrade .xproj project, but after the upgrading(skeleton-typescript-aspnetcore), there still lots of error ahead me...

I also tried aurelia-cli, but seems it has not support vs2017 yet, does anyone could give a guide to create the prototype project? I will integrate some plugins like the skeleton mentioned above, such as gulp,karma,breeze...

thank you in advance.

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.