Hello Angular World (from Visual Studio and Local IIS)

Pages: 1, 2, 3, 4, 5, 6, 7

NPM Packages

Now that we have a basic ASP.NET MVC 5 project let’s install some NPM Packages. Once you have installed the first NPM Package you will see a new file, called package.json, added to your Project’s root. We will look at the package.json in more details later.

Install TypeScript 2 Package

To give you an idea of how to install NPM Package, let’s use the TypeScript 2 NPM Package as an example you can follow for all the other packages.

http://www.typescriptlang.org/

1. Select Hello.Angular.World and right-click
2. Click Quick Install Package
   
   
3. Select npm, enter typescript and select latest version (in this case 2.1.4)
   
   
4. Click Install

Tip: You can monitor the installation process using Visual Studio’s Output window

Note: TypeScript is a language for application-scale JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to clean, readable, standards-based JavaScript. Try it out at http://www.typescriptlang.org/playground.

Edit the ‘package.json’ File

Now that you have installed a NPM Package locate the package.json file at the root of the Hello.Angular.World project.

1. Open the package.json file in Visual Studio (text editor) and review the content
   
2. Change the value for “name“, from “myproject” to “hello-angular-world“
3. Add “description”: “Hello Angular World (from Visual Studio and Local IIS) is a start-up project in which two worlds collide… “
4. Add “license”: “MIT”
5. Add “repository”: {} or add your Git details…
6. Add “scripts”: {} and leave it empty for now
7. Add “dependencies”: {} and leave it empty for now
8. Move “devDependencies” : { “typescript”: “^2.1.4” } to the end (this is just a personal preference not requirement)
9. Click File > Save or Ctrl+S

Note: Specifics of npm’s package.json handling https://docs.npmjs.com/files/package.json

Before we continue with the process of adding PMN Packages I would like to point out that the Quick Install Package tool seems to always add the package reference to the devDependencies section. I am assuming this is in order to avoid adding unnecessary packages to test harnesses or transpilers the production app. You can read more here: https://docs.npmjs.com/files/package.json

Add “dependencies” Packages

The following packages should be added to the dependencies section, however as I mentioned earlier they are added to the devDependencies section and so we need to manually update the package.json file once we have finished importing the list.

1. Select Hello.Angular.World and right-click
2. Click Quick Install Package
3. Select npm, enter the values in the table below
4. Click Install

Package Name	Latest Version*	NPM Website	Notes
@angular/common	Latest version
@angular/compiler	Latest version
@angular/core	Latest version
@angular/forms	Latest version
@angular/http	Latest version
@angular/platform-browser	Latest version
@angular/platform-browser-dynamic	Latest version
@angular/router	Latest version
@angular/upgrade	Latest version
angular2-in-memory-web-api	Latest version (0.0.21)	https://www.npmjs.com/package/angular2-in-memory-web-api	Replaced with angular-in-memory-web-api
angular-in-memory-web-api	0.2.4	https://www.npmjs.com/package/angular-in-memory-web-api/tutorial	UNMET PEER DEPENDENCY   rxjs@5.0.1 zone.js@0.7.4 extraneous
bootstrap	3.3.7	https://www.npmjs.com/package/bootstrap
core-js	2.4.1	https://www.npmjs.com/package/core-js
es6-module-loader	0.17.10	https://www.npmjs.com/package/es6-module-loader	GET http://localhost:6854/node_modules/es6-module-loader/dist/es6-module-loader.js 404 (Not Found)
jquery	3.1.1	https://www.npmjs.com/package/jquery
reflect-metadata	0.1.9	https://www.npmjs.com/package/reflect-metadata
rxjs	5.0.2	https://www.npmjs.com/package/rxjs
systemjs	0.19.41	https://www.npmjs.com/package/systemjs	To avoid errors don’t get an old version
zone.js	0.7.4	https://www.npmjs.com/package/zone.js

*At the time of writing…

Warning: The Quick Install Package’s Latest Version drop-down-list is not sorted numerically (the data is as string value and not number).

Tip: You can monitor the installation process using Visual Studio’s Output window

5. Open the package.json file in Visual Studio (text editor)
6. Move the above packaged to the dependencies section
7. Save and close the file

Add “devDependencies” Packages

These packages should be added to the “devDependencies” section of the package.json file.

1. Select Angular.World and right-click
2. Click Quick Install Package
3. Select npm, enter the values in the table below
4. Click Install

Package Name	Latest Version*	NPM Website
@types/core-js	Latest version	https://www.npmjs.com/package/@types/core-js
@types/node	Latest version	https://www.npmjs.com/package/@types/node
concurrently	3.1.0	https://www.npmjs.com/package/concurrently
lite-server	2.2.2	https://www.npmjs.com/package/lite-server
tslint	4.20	https://www.npmjs.com/package/tslint
typescript	2.1.4	https://www.npmjs.com/package/typescript
typings	2.1.0	https://www.npmjs.com/package/typings

*At the time of writing…

Warning: The Quick Install Package’s Latest Version drop-down-list is not sorted numerically (the data is as string values and not number).

Tip: You can monitor the installation process using Visual Studio’s Output window

5. Open the package.json file in Visual Studio (text editor)
6. Review the contents, however there shouldn’t be any further actions to complete
7. Close the file

Restore NPM Packages

Just as we sometime need to restoring NuGet packages, we also need to restore NPM packages too.

1. Navigate to root of the Angular.World project
2. Right-click package.json
3. Click Restore Packages

Tip: You can monitor the installation process using Visual Studio’s Output window

Once the restoration process is complete, then the Hello.Angular.World project should contain a hidden folder called node_modules, see the image above for details.

Update the “scripts” Property (package.json)

This section can contain a list of script commands that automate life cycle processes for your package. For more information: https://docs.npmjs.com/misc/scripts

1. Navigate to the root of the Angular.World project
2. Open the package.json file in Visual Studio (text editor)
3. Add the following properties/commands:
   
4. Save and close the file

‘tsconfig.json’ file

Now that we have our NPM packaged loaded, lets configure the TypeScript configuration file. The tsconfig.json file instructs the compiler on how to generate JavaScript files.

I’ve based the information below directly on the Angular website’s TypeScript Configuration article: https://angular.io/docs/ts/latest/guide/typescript-configuration.html

1. Select Hello.Angular.World and right-click
2. Click Add > JavaScript File
3. Set the Item name to: tsconfig.json
4. Click OK
5. Add the following code:
   
6. Save and close

Note: I have included “removeComments”: false for debugging purposes…

Pages: 1, 2, 3, 4, 5, 6, 7