Because it uses sessionStorage in nodejs, it sometimes gives you compilation errors. We’ll explain how to resolve this issue as well.<\/p>\n
#1 Getting the Template<\/h3>\n
The first step is to create a SPA (Single Page Application)\u00a0.NET Core project using Visual Studio 2015 Community Edition. Make sure you have the latest VS update and download the proper template, as per Steve Sanderson’s blog<\/a>).<\/p>\n Another easy approach is to simply clone the following GitHub project:<\/p>\n This template is based off the ASP.NET Core template for Visual Studio created by Mads Kristensen. It contains the necessary settings for Angular2 and WebPack, including Hot Module Replacement (HMR)<\/a>,\u00a0which is extremely useful when developing an application. HMR will detect any client-side modification and recompile your JS application, immediately reflecting all the updates on your browser without the need to refresh it.<\/p>\n Once you have successfully cloned the application, or created one in Visual Studio, let\u2019s proceed to restore the\u00a0.NET references by running the following command in Visual Studio Code terminal (to access the terminal, click under View then select Integrated Terminal or press CTRL + ` key combination) .<\/p>\n Once in the terminal, execute the following command:<\/p>\n dotnet restore<\/strong><\/p>\n To run the application in Visual Studio Code, you have two options:<\/p>\n 1. Execute\u00a0dotnet run<\/strong>\u00a0command in VS Code terminal<\/p>\n OR<\/em><\/p>\n 2.\u00a0Debug<\/strong>\u00a0the application in VS Code (click on the bug button from the left menu and click on the play green button that is on top)<\/p>\n Let\u2019s execute either of the options and check the results. Did you get it working?\u00a0\u2026 Most likely no, and the reason is because there are a few additional steps.<\/p>\n If you are familiar with Angular or any other JS application, you\u2019ll notice that packages are most of the time resolved or downloaded by NPM (Node Package Manager). The way it works is simple – NPM will look into a file called\u00a0package.json<\/strong>\u00a0to resolve all the module references.<\/p>\n Now, let\u2019s run the following command:<\/p>\n npm install<\/strong><\/p>\n Note<\/strong>: You might want to run the install command using elevated rights. There are some packages that won\u2019t get properly installed if the command is not executed with elevated rights.<\/em><\/p>\n For Linux or OSX, run:\u00a0<\/em><\/strong><\/p>\n sudo npm install<\/p>\n For Windows, run:<\/em><\/strong><\/p>\n install command (npm install) by executing\u00a0cmd as an Administrator<\/strong><\/p>\n After you have successfully installed all the packages, you will notice there is a new folder called\u00a0node_modules<\/strong>, which contains all the packages referenced in package.json.<\/p>\n Fig 1. node_modules folder\u00a0created<\/em><\/p><\/div>\n<\/div>\n<\/figure>\n Now, proceed to close the folder (or exit Visual Studio Code) and open it again. This way it will stop complaining about missing references (even if you already added them).<\/p>\n Now that we have all the packages (nuget and NPM) restored, we should be all set to start debugging our application in Visual Studio Code.<\/p>\n Let\u2019s proceed to debug our application (click on the bug button, then click on the green play button). Is it still complaining and throwing an exception?<\/p>\n Yes, that’s because if\u00a0you look closely at the stack trace, you will find a\u00a0missing module exception<\/strong>: vendor-manifest.json (you might need to keep clicking on the play button until the entire stack trace is fully displayed).<\/p>\n Fig 2. Missing vendor-manifest.json file<\/em><\/p><\/div>\n<\/div>\n<\/div>\n<\/figure>\n If you know a little bit about Webpack, you\u2019ll realize that the error is related to Webpack not being able to find\u00a0the\u00a0vendor-manifest.json<\/strong>\u00a0file. But how does this file get created? Don\u2019t panic, I went through the same feeling and I\u2019ll explain what you need to do.<\/p>\n If you open up your csproj file, look toward the end of the file where you will find a target called\u00a0PrepublishScript. <\/em>This target has two node commands that are related to Webpack. To run these commands, you have two options:<\/p>\n Now, let\u2019s look at your project structure and you\u2019ll see that under wwwroot \u2014 dist folder, there are several new files, including the missing vendor-manifest.json.<\/p>\n If you open ClientApp \u2014 dist folder, you\u2019ll notice that a new file was created. These are the files (called “emitted” files) that Webpack<\/a> created after running node webpack.js commands.<\/p>\n Fig 4. Files emitted by\u00a0Webpack <\/em><\/p><\/div>\n What is left at this point is to finally debug the application using Visual Studio Code.<\/p>\n Let\u2019s click on the bug button from the left menu and click on the green play button on top to start the debugging session. If you experience access issues when debugging the application, refer to File Access Error.<\/p>\n If you followed all the steps but get a file access error when you want to debug your application, then you will have to grant read\/write access to your folders – or run Visual Studio as an Administrator.<\/p>\n If you are using a Mac:<\/p>\n Now debug your application and voila! Visual Studio Code should now be able to debug your application.<\/p>\n Fig 5. Grant read & right\u00a0access<\/em><\/p><\/div>\n<\/div>\n<\/div>\n<\/figure>\n If Chrome is your browser of choice, press F12 (in Windows) or ALT + Command + I (in Mac) and look at the Console tab. You will see that it says: [HMR] connected.<\/p>\n Note<\/strong>: If you decide to run your application by executing\u00a0dotnet run,<\/strong>\u00a0you will notice that HMR is not be enabled. This is because you are not passing \u201cDevelopment\u201d as the environment variable. If you want to run the application in Development mode, execute the following command:<\/p>\n dotnet run \u2014 environment=\u201dDevelopment\u201d<\/strong><\/p>\n To make sure that HMR is properly running , you will need to make a quick update to the home page.<\/p>\n Look at your browser\u2019s console log. You will see that WebPack just updated your existing bundle.<\/p>\n Fig 6. Webpack HMR in\u00a0action<\/em><\/p><\/div>\n<\/div>\n<\/div>\n<\/figure>\n If you don\u2019t have an IdentityServer4<\/a> host running, please refer to\u00a0this post<\/a>\u00a0for directions on how to run IdentityServer4 in ASP.NET Core and configure a JS Client.<\/p>\n Now that we have a working Angular2 project in ASP\u00a0.NET Core, what we need to do is to add a new package in package.json file. We\u2019ll take advantage of Visual Studio Code intellisense. Proceed to open up\u00a0package.json<\/strong>, and type the following after the last package:<\/p>\n \u201coidc-client\u201d: \u201c1.3.0-beta.3\u201d<\/strong><\/p>\n If you only type \u201coidc-client\u201d and you hover over it, Visual Studio Code will tell you which is the latest version.<\/p>\n Fig 7. Adding oidc-client package<\/em><\/p><\/div>\n Now, proceed to install the new package by running the following command:<\/p>\n npm install<\/strong><\/p>\n Remember to run the command with elevated rights (run cmd as an administrator or by adding sudo to the command).<\/p>\n After running the command, you will see that oidc-client<\/a> was successfully installed (you can validate that the package has been successfully installed by expanding node_modules folder and locating oidc-client).<\/p>\n After we have the package installed, what we need to do next is to proceed to configure our Angular2 application by following these steps. The following code is an adoption of Justin Murphy\u2019s repo<\/a>):<\/p>\n Recommendation<\/strong>: Clone the repo as it has all the necessary code for your Angular2 application to interact with OpenID Connect . This repo was built on top of the previous Angular2 + ASP.NET Core template mentioned above.<\/em><\/p>\n This repo contains all the necessary code to configure your Angular2 application to work with IdentityServer4 by using oidc-client component. Additional code in this repo shows how to secure your components by verifying if the user is logged in or not.<\/p>\n If not, then the user will get redirected to the login screen, development and production settings included. And lastly, it contains HTTP call wrappers .<\/p>\n All this additional code is good but there is one missing piece, an\u00a0if condition<\/strong>.<\/p>\n This was the step that took me the longest to implement, simply because I did not find a single source that could serve as guidance.<\/p>\n As mentioned before, I found a pretty good and solid example – thanks to Justin Murphy – but there was a missing piece related to a sessionStorage error that I was constantly facing.<\/p>\n Oidc-client uses sessionStorage to store, at the client side, Access and Refresh tokens (OAuth2 tokens). Since the JS code gets compiled on the server side by nodejs, a sessionStorage (which belongs to window object, does not exist on nodejs ) workaround is to simply add an\u00a0if condition<\/strong>\u00a0like the following:<\/p>\n Fig 8. Missing condition<\/em><\/p><\/div>\n<\/div>\n<\/figure>\n But, where do you add this statement? Well, if you have already cloned my last github repo, then there are two places that need this if condition<\/em><\/strong>:<\/p>\n Now you have a fully working template that works in Visual Studio Code, Visual Studio Preview and Visual Studio 2015+.<\/p>\n\n
#2 Restoring nuget Packages<\/h3>\n
#3 Attempting to Run the Application<\/h3>\n
#4 Restoring NPM\u00a0Packages<\/h3>\n
![\"\"](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/1f7a4zmRn07gAmetWGVtWoA.png\")
#5 Debugging the Application<\/h3>\n
![\"\"](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/10qs0inXfiXsj4yMgCJNV0g.png\")
\n
![\"Fig](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/1UnK64x1F0vKNqmVFxr4ohQ.png\")
<\/p>\n<\/div>\n<\/div>\n<\/li>\n![\"\"](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/1xbg22CEiSNqtLdcXn0yLBg.png\")
#5.1 File Access\u00a0error<\/h3>\n
\n
![\"\"](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/1DiHv2CzeJsjOpdgWxj6eYA.gif\")
#6 Validating Hot Module Replacement Configuration<\/h3>\n
#7 Testing Hot Module Replacement<\/h3>\n
\n
![\"\"](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/1NhOz07dNG88sSbIK1lETjw.gif\")
#8 Integrating with IdentityServer4<\/h3>\n
![\"\"](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/1Wfg4_nFjwqCYi_aqqYyB9w.gif\")
#9 Configuring oidc-client<\/h3>\n
\n
#10 Making oidc-client Work with\u00a0Angular2<\/h3>\n
![\"\"](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/07\/10cV-SGl_nGBgsOcCfdcQ5A.png\")
\n