Siôn J. Lewis

Hello Angular World (page 2 of 7)

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
    Visual Studio project menu showing the Quick Install Package option
  3. Select npm, enter typescript and select latest version (in this case 2.1.4)
    NPM browser with typescript 2.1.4 selected
  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
    Basic package.jason file
  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 NameLatest Version*NPM WebsiteNotes
@angular/commonLatest version  
@angular/compilerLatest version  
@angular/coreLatest version  
@angular/formsLatest version  
@angular/httpLatest version  
@angular/platform-browserLatest version  
@angular/platform-browser-dynamicLatest version  
@angular/routerLatest version  
@angular/upgradeLatest version  
angular2-in-memory-web-apiLatest version (0.0.21)https://www.npmjs.com/package/angular2-in-memory-web-apiReplaced with angular-in-memory-web-api
angular-in-memory-web-api0.2.4https://www.npmjs.com/package/angular-in-memory-web-api/tutorialUNMET PEER DEPENDENCY

 

  • rxjs@5.0.1
  • zone.js@0.7.4 extraneous
bootstrap3.3.7https://www.npmjs.com/package/bootstrap 
core-js2.4.1https://www.npmjs.com/package/core-js 
es6-module-loader0.17.10https://www.npmjs.com/package/es6-module-loaderGET http://localhost:6854/node_modules/es6-module-loader/dist/es6-module-loader.js 404 (Not Found)
jquery3.1.1https://www.npmjs.com/package/jquery 
reflect-metadata0.1.9https://www.npmjs.com/package/reflect-metadata 
rxjs5.0.2https://www.npmjs.com/package/rxjs 
systemjs0.19.41https://www.npmjs.com/package/systemjsTo avoid errors don’t get an old version
zone.js0.7.4https://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

  1. Open the package.json file in Visual Studio (text editor)
  2. Move the above packaged to the dependencies section
  3. 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 NameLatest Version*NPM Website
@types/core-jsLatest versionhttps://www.npmjs.com/package/@types/core-js
@types/nodeLatest versionhttps://www.npmjs.com/package/@types/node
concurrently3.1.0https://www.npmjs.com/package/concurrently
lite-server2.2.2https://www.npmjs.com/package/lite-server
tslint4.20https://www.npmjs.com/package/tslint
typescript2.1.4https://www.npmjs.com/package/typescript
typings2.1.0https://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

  1. Open the package.json file in Visual Studio (text editor)
  2. Review the contents, however there shouldn’t be any further actions to complete
  3. 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

Visual Studio project with node_modules

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

Siôn Lewis

, , , ,
, , , , , , , , , , ,

Categories

Recent Posts

  • How to sort an array using Power Automate
    Learn how to sort an array using Power Automate. In this post I share a Power Platform solution containing two example Cloud Flows demonstrating how an array can be sorted. I also briefly explore performance results of running actions in parallel verses serial with some surprising results.
  • How to Add and Remove Accounts from Multi-Select SharePoint Person and Group Fields
    Learn how to use the SharePoint API and Power Automate to add and remove accounts from multi-select Person and Group fields in SharePoint. Our step-by-step guide includes detailed illustrations and examples, as well as an optional Power Platform solution to help you deploy the solution to your tenant. Improve your SharePoint workflow management today!
  • Navigating Microsoft Power Automate Licensing: Challenges, Considerations, and Compliance
    Navigate the complexities of Microsoft Power Automate licensing with insights on challenges, considerations, and compliance. Learn about potential risks, licensing rules, and best practices for organizations using Power Automate. Get guidance on avoiding license breaches, managing premium connectors, and ensuring compliance with Microsoft licensing requirements. Stay informed and take proactive steps to maintain licensing compliance in Power Automate, regardless of your location. Discover practical strategies to optimize your Power Automate licensing and avoid potential pitfalls.
  • SharePoint REST API: How to find the List or Library “__metadata” “type”
    SharePoint REST API is a powerful tool for updating lists and items in SharePoint, but determining the correct “__metadata” “type” for API calls can be confusing. While it’s typically “SP.Data.ListNameItem” based on the list’s URL, there are cases where it may be “SP.Data.ListNameListItem” in certain Office 365 tenants. In this article, we will explore how to find the correct “__metadata” “type” when updating lists or libraries in SharePoint, and also highlight the alternative approach of using the Microsoft Graph API. By understanding this crucial aspect of SharePoint REST API, readers can ensure successful updates and avoid potential errors.
  • “The Age of #AI has begun” said Bill Gates
    March 2023 has been an extraordinary month with the launch of GPT-4 on March 14th, closely followed by #Microsoft’s launch of Copilot preview on March 16th, and Bill Gates’ article, “The Age of AI has begun,” on March 21st.
%d bloggers like this: