CODEWITHSUNDEEP
angularvisual-studiotypescriptvisual-studio-2015
developer82
developer82

Reputation: 13713

Start working with VisualStudio, TypeScript and Angular

We are trying to start a new Angular project with Visual Studio 2015. We've created a new TypeScript project, and following an example we found we have put the followings in our index.html file:

<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

(sidenode - why do we need to many includes? what each means and why not have all of them in a single base file?)

our Angular app looks like this:

import {Component} from 'angular2/core';

@Component({
    // Declare the tag name in index.html to where the component attaches
    selector: 'hello-world',
    // Location of the template for this component
    templateUrl: 'app/hello_world.html'
})

export class HelloWorld {
    // Declaring the variable for binding with initial value
    yourName: string = '';
}

We wanted to add a type file for Angular from definitelytyped but it seems like it's empty (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/angular2/angular2.d.ts). We also installed it from nuget (https://www.nuget.org/packages/angular2.TypeScript.DefinitelyTyped/) and got the same empty file - maybe it's not keeping up with Angular development?

Error   TS1148  Cannot compile modules unless the '--module' flag is provided.  Angular2TS_Test c:\Users\Ophir_O\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   3   Active
Error   TS2307  Cannot find module 'angular2/core'. Angular2TS_Test c:\Users\Ophir_O\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   3   Active
Error       Build: Argument of type '{ selector: string; templateUrl: string; }' is not assignable to parameter of type '{ selector: string; properties?: Object; hostListeners?: Object; injectables?: List<any>; lifecyc...'. Angular2TS_Test c:\users\ophir_o\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   9   
Error       Build: Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning.   Angular2TS_Test c:\users\ophir_o\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   12  
Error   TS1219  Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning.  Angular2TS_Test c:\Users\Ophir_O\documents\visual studio 2015\Projects\Angular2TS_Test\Angular2TS_Test\app\app.ts   12  Active

What is to correct current way to start an Angular project with TypeScript and VisualStudio? we couldn't find any up-to-date guide...

Upvotes: 1

Views: 4108

Answers (3)

Michael Kang
Michael Kang

Reputation: 52847

  • system.js: AngularJS with TypeScript depends on module loaders. SystemJS is a universal dynamic module loader.
  • angular2-polyfills.js: needed for zones and supporting change detection.
  • RxJS: Library for supporting observable sequences and event streams. Unless you're planning to use Observables, you don't need this one.
  • Angular2.dev.js: Yes you need this. This is the Angular2 library.
  • es6-shim: This is needed to ensure es6 compatibility on browsers that don't yet support the full es6 standard. You should include this if you're targeting the es6 language specification (i.e. using the language features that es6 provides). Otherwise, if you're just using es5, this shim is not necessary.
  • typescript.ts: For transpiling typescript into javascript client-side. Include this if you are writing your Angular2 components in typescript, and you want the transpilation to happen on the client. The alternative is to transpile typescript on the server, in which case, this include is not necessary.

Your component implementation looks fine.

To integrate with VS2015, follow these instructions from the accepted answer:

cannot find module 'angular2/core'

Your script should look like this:

<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {'app': {defaultExtension: 'ts'}}
  });
</script>
<!-- 3. Bootstrap -->
<script>
    System.import('app/boot')
               .then(null, console.error.bind(console));

</script>

HTML

<!-- 4. Display the application -->
<body>
    <hello-world>Loading...</hello-world>
</body>

Create an app folder. Inside the app folder, add a boot.ts and an helloworld.component.ts.

app/boot.ts

import { bootstrap } from 'angular2/platform/browser';
import { HelloWorld } from './helloworld.component';

bootstrap(HelloWorld);

app/helloworld.component.ts

import {Component} from 'angular2/core';

@Component({
    // Declare the tag name in index.html to where the component attaches
    selector: 'hello-world',
    // Location of the template for this component
    templateUrl: './hello_world.html'
})

export class HelloWorld {
    // Declaring the variable for binding with initial value
    yourName: string = '';
}

Upvotes: 2

Erab BO
Erab BO

Reputation: 826

Here is a link to a seed project with the minimum requirements and code for Angular 2. Angular 2 seed project for Visual Studio 2015

2 things are important though:

1 - configuring IIS to server the project

2 - downloading the latest nodejs (with the latest npm), after node is installed - set VS2015 "External Web Tools" (you can find it in quick launch) to use the nodejs location (for me the default was "c:\Program Files\nodejs") and take it to the first priority using the up arrow.

Upvotes: 0

Wilgert
Wilgert

Reputation: 706

You need to add a tsconfig.json file that tells the TypeScript compiler how to compile your code for Angular2. See: https://github.com/mgechev/angular2-seed/blob/master/tsconfig.json

Upvotes: 0

Related Questions