no developer is an island | Philip Holly

Aurelia 1.0 was recently released so I wanted to finally test it out.

I tried creating an Aurelia project using the Aurelia CLI  (v. 0.17.0) within a Visual Studio 2015 asp.net core application. I followed the instructions but saw a lot of red squigly lines in the typescript files and the solution couldn’t build because of all the Typescript “module not found” errors.

I tried the Aurelia CLI with Visual Studio Code and the CLI command worked fine to build the site and start the built-in webserver. Later on I realized that some files also had Typescript “module not found” errors, like build.ts in aurelia_project\tasks folder couldn’t find modules “gulp” and “aurelia-cli”.

I tried to get the Typescript Webpack skeleton to work inside a asp.net core project. I saw the Typescript errors but I noticed a different error in system.d.ts about not being able to define System in a global scope or something. I opened the project within Visual Studio Code and I didn't get that error so I knew something was wrong in my Visual Studio 2015 setup.

After researching online and looking at all the configuration files in the projects (I'm new to Typescript and module loading) I figured out what the problem is and how to get everything working in Visual Studio 2015.

1st problem: Visual Studio 2015 was using Typescript 1.8.6 but Aurelia was using 2.0.0.

The Typescript Webpack Skeleton and the CLI both created a settings.json file in a .vscode directory with "typescript.tsdk": "node_modules/typescript/lib". After looking that setting up I found Visual Studio Code uses it to point to the Typescript compiler. And the version in node_modules as specified by package.json was 2.0.0.

I realized Visual Studio probably isn't using the 2.0.0 beta version of Typescript. Finally I found out how to update it. You have to download it from here: (https://www.microsoft.com/en-us/download/details.aspx?id=48593). It's hidden within the "Details" section. After downloading and installing it I verified it was installed by going to Help->About Microsoft Visual Studio. And the error in system.d.ts in the Webpack skeleton went away!

2nd problem: Typescript typings are missing

Because I was getting "module not found" errors in Visual Studio Code and 2015 I figured something was wrong with my projects themselves and not the editors. The errors prevented Visual Studio 2015 from compiling so I first looked up how to disable Typescript compiling because I would do it using the CLI or Webpack anyway. Finally found this: http://rostacik.net/2015/08/14/how-to-disable-building-of-typescript-files-in-visual-studio-2015/ and added the line to my project .xproj. Reloaded the project and built the solution and it worked!

After reading https://www.typescriptlang.org/docs/handbook/modules.html and https://www.typescriptlang.org/docs/handbook/module-resolution.html I realized I was getting the "module not found" Typescript errors because some "modules" didn't have Typescript definition files. For example, aurelia-framework in npm_modules has one but aurelia-cli doesn't. gulp also doesn't have one.

I installed the gulp typings file by using Typings (https://github.com/typings/typings) and the gulp "module not found" errors went away (after closing and reopening the file that had the error). aurelia-cli doesn't have any Typescript definition files so any file that tries to import it will show an error. Good thing is these are Typescript errors, not es5 errors. aurelia-cli and others are designed to work with AMD module loading system so you shouldn't get any errors when you build using the CLI or Webpack.

Note for Visual Studio 2015 ASP.NET Code projects

You need to add app.UseFileServer(); to Startup.cs so your app will serve static and default files. Otherwise when IIS Express (or IIS) runs your aurelia app will not get served up because index.html will not get served.

.NET XElement functions that allow you to add child content will clone elements that already have a parent: https://msdn.microsoft.com/en-us/library/bb943882(v=vs.110).aspx

Cloning an XElement will only copy the node name, attributes, and string values. It will not copy Annotations.

Event callbacks in 3rd party libraries execute outside angular context so scope.$apply (or $timeout or $evalAsync) are needed in the callback body so that the digest loop kicks in.

In our dto that represents a table of contents node we added a property of type dynamic where all the content-type specific data would go. For example, for ordinances, the ordinance adoption date and direct url would go there.

This code works fine from within the project (dll) where the table of contents list is first created (`node.d` is the dynamic property)

`var ords = flatToc.Where(node => !node.d.hasChildren)`

However, from within our api controller, whose project includes a reference to our business objects project where the code above lives, that same exact line produces an error to the effect of "object does not have a hasChildren property". Totally caught me off guard.

I was hoping to use dynamics more often in our api but now I'm reconsidering and may just stick with typed dtos.

Update: a little googling and I found these helpful answers on stackoverflow:

http://stackoverflow.com/questions/7656630/accessing-properties-of-anonymous-dynamic-types-across-dll-boundaries-gives-runt

http://stackoverflow.com/questions/2993200/return-consume-dynamic-anonymous-type-across-assembly-boundaries?rq=1

I learned this the hard way.

We added health checks to ARR and coincidentally in the controller of the page it checks I was doing HttpContext.GetOverriddenUserAgent().Contains() because 51 degrees was incorrectly returning False for IsMobileDevice whenever I set the overridden browser.

Requests from a browser or even powershell all have values for GetOverriddenUserAgent(), but requests from ARR returned null.

While looking at event logs I noticed whenever there was a System.Net.Mail error the w3wp.exe process would crash. 

Since when do unhandled exceptions cause the IIS process to crash? I've seen other unhandled exceptions that don't.

This is an update to my previous post: http://www.philipholly.com/post/64211668657/node-js-iisnode-prerender-io-phantom-phantomjs

Current hardware/software:

Windows 8.1

Visual Studio 2013

Git Extensions (including git bash)

Since I got a new work laptop, I needed to resetup my local websites.

This are the steps I went through to get a local instance of prerender.io up and running locally in a node.js server. Much easier than last time! I didn't need to install phantom.js server first. That simplified a lot. And maybe because I have Visual Studio 2013 instead of 2012 installed things just worked. I don't know.

Download node.js for windows

Run node.js windows installer

Let it add node to your path

Open Git Bash and navigate to the directory where you want to host your prerender server

run Git clone https://github.com/collectiveip/prerender.git. Instructions are here: https://prerender.io/server

Run npm install

I got the error: Npm install failed: pyhton 2.6 or 2.7 is required to build

Download python 2.7.6 Windows Installer: https://www.python.org/download/

Run python installer

Exit out of console

Open a new git bash window and navigate to your prerender project

Run npm install

This time it should work - I did get one warning C4506 but it doesn’t' look like it's a showstopper

That's it! This time I didn't have to install phantomjs server separately. Maybe last time I didn't but I didn't know that? I don't know.

Follow the instructions here: https://prerender.io/server to test if it worked

When creating and debugging http handlers and http modules in ASP.NET you may find that the code you write is not getting executed or you can't set breakpoints because symbols could not be loaded for your document.

The reason is because Http modules and Http handlers are registered during application initialization and if your app is already running then that registration won't happen again until the app (IIS worker process) is shut down and a new one is created.

Easy fix: Make sure you're not debugging in Visual Studio, use Windows Task Manager to kill all your w3wp.exe processes (well make sure the process that your solution is running in is killed), set breakpoints, then start debugging.

After installing Git Extensions on my new laptop I quickly found myself having to enter my password every time git talked to the remote hosted on BitBucket.

If you have the same problem of Git Bash or Git Extensions asking you for your password every time you can try this, which worked for me:

Open the .gitconfig in your home directory in a text editor like SublimeText or Notepad++

in the [credential] section make sure there aren't extra \ characters escaping the double quotes.

So instead of

[credential] helper = !\\\"C:/Program Files (x86)/GitExtensions/GitCredentialWinStore/git-credential-winstore.exe\\\"

it should read

[credential] helper = !\"C:/Program Files (x86)/GitExtensions/GitCredentialWinStore/git-credential-winstore.exe\"

So I got a new computer for work (Macbook Pro 13" retina) and needed to get it up and running as my new dev machine.

In my first attempt everything worked except Visual Studio 2013 wouldn't launch. It was stuck at a white splash screen. It could have been because I installed IIS, then Visual Studio 2013, then I did a IIS Server Import from a Server Export of my old computer. Only after that did I try to run Visual Studio.

In my second attempt, after reinstalling windows and starting over, Visual Studio worked, but IIS didn't work properly. As you'll see in the steps below, I used IIS web deploy backup server / restore server to copy ALL my IIS settings (app pools, certs, sites, etc) but ran into a lot of problems. I kept getting a INSUFFICIENT_ACCESS_TO_APPHOSTCONFIG error, which seemed to indicate there was a permissions problem on applicationhosts.config, but in reality there wasn't. The problem was my encryption keys in applicationhosts.config. I only realized that after trying to manually add an App Pool. Adding the App Pool worked fine, so the config file could be written to. But when I tried to change the App Pool user to a local user, which requires a username and password, I got the insufficient access error again with a sub message about something being out of bounds. User passwords get encrypted so I realized the encryption was the problem.

In my third attempt, after uninstalling IIS using Windows Programs and Features and uninstalling everything that I installed using Web Platform Installer and reinstalling IIS, everything worked. Both IIS and Visual Studio 2013 worked. I can start to code again!

Steps that worked for me

Install Windows

Turn off UAC by suppressing all notifications

Using Programs and Features, add Windows Components, Install IIS. A quick way to get to the screen is Win+X (on windows 8) then select Programs and Features or type 'f'. I recommend installing more than you may actually need because if you web deploy import server from another computer that has a component installed but you don't you'll get an error. Under Web Management Tools: IIS Management Console. Under World Wide Web Services: everything.

Install Visual Studio

Using Web Platform Installer, install any IIS components you may need, such as Web Deploy 3.5, URL Rewrite, PHP, PHP Manager, IISNode. I went ahead and installed ones for IIS Express as well just in case I need them. Make sure IIS is selected in the Web Platform Installer options so you can see the IIS components. For some reas IIS Express was selected for me.

Add any local users you may need as users for your IIS App Pools. If you don't use actual users in your app pools then you can skip this step. Since some of our web apps need network resources we had to add local users that can authenticate on the network resources. I'm not sure if any built in accounts can authenticate on network resources. If you do things this way, be sure to set your website to use pass through authentication (app pool user) and your anonymous authentication to Application Pool Identity.

Now, the fun part. To get your IIS app pool and site configurations and site content off of your old computer there are a few options. As mentioned already, I first tried using IIS Export Server then IIS Import Server but ran into complications. Even if that worked, one thing I didn't like about that was that it includes all your site content (your actual files and folders for each web site). I would rather transfer those independently. A few of my personal sites are run from my Google Drive folder and my other work sites are all in Git so I want to transfer those myself.

Transfer all your site content. I let Google Drive handle the sites that are on Google Drive and I used a portable external hard drive to transfer my other work sites. I have them all under a Project/Git folder. Git is so great - because it's all file-based, including the repos themselves, once you transfer everything you can start working immediately with your repositories and configs in the exact same state.

Install Web Deploy 3.5 using the Web Platform Installer if you haven't already.

We want to install Web Deploy Remote Agent Service as well. The only way I found how to do this was to use Program and Features, select Microsoft Web Deploy 3.5, then click Change. When prompted click change, then be sure to select Remote Agent Service. There's another component in Web Platform Installer called Web Deploy for Hosting Servers - that may turn that on automatically - but I'm not sure.

Now, from your old computer, we want to push all the application pools to your new computer. Using Web Deploy takes care of all the encryption/decryption for you. And you can transfer all the app pool settings in just one line!

Make sure Web Deploy 3.5 is also installed on your old computer. Open up an administrator command prompt (that's in the Win+x menu too!) and navigate to (on a 64-bit machine) C:\Program Files\IIS\Microsoft Web Deploy V3. Web deploy will only work if the bit-ness of the source and destination match - so 64-bit to 64-bit and 32-bit to 32-bit. Presumably most computers, especially dev computers, will be 64-bit.

The command to transfer all the app pools is: msdeploy -verb:sync -source:appPoolConfig, -dest:apPoolConfig,computerName=NameOfNewComputerHere. The reference for the syntax is here: http://technet.microsoft.com/en-us/library/dd569070(v=ws.10).aspx

Now we want to transfer each site individually. The web deploy provider I used, appHostConfig, is supposed to transfer content as well as configuration. I didn't know that when I used it, and I can't verify it transferred content. The command executed so fast I would be surprised if it also transferred content.

For each site, use this command: msdeploy -verb:sync -source:apphostconfig="website name" -dest:apphostconfig="website name",computername=NameOfNewComputerHere. I just looked at my site list in in IIS and after each command hit the up arrow and used the arrow keys to replace the website names. Syntax reference: http://technet.microsoft.com/en-us/library/dd569080(v=ws.10).aspx

If you use local hostnames, then copy over your C:/Windows/System32/Drivers/etc/hosts file

Install Git

Copy over .gitconfig that's in the root of your home directory - for me it was my windows home directory (Users/username).

Webmatrix - copy over site configuration - C:\Users\Username\Documents\IISExpress\config\PublishUI and C:\Users\Username\Documents\IISExpress\config\web Deploy

Webmatrix - copy over IIS Express sites - if you don't do this then no sites will show in "My Sites" - copy all the <site> nodes under <sites> in C:\Users\Username\Documents\IISExpress\config\applicationhost.config

`context.Response.Headers.Add("Access-Control-Allow-Origin", "*");`

In my angular app I had a base tag that looked like this: <base href="/Library" >. No css or javascript would load in IE7.

The problem was not the missing trailing slash or a missing closing tag. The problem was that IE7 needs the base href to be an absolute url, which according to spec it should be anyway.

After changing the base tag to have an absolute full url my app worked.

Taken from: http://processwire.com/talk/topic/268-processwire-on-windows72008-server-with-iis-webserver/

I had to modify it slightly (comment out the configSections) to get it to work. I'm using this in a current project right now.

Gotchas when installing the above:

Be sure to download phantomjs from http://phantomjs.org/ and put it in your PATH somewhere - I put the exe in C:/Windows

many npm modules on windows requires python 2.7 to compile: https://github.com/TooTallNate/node-gyp

I had Visual Studio 2012 installed already. I kept getting msbuild target errors when trying to npm install phantom. The output made it seem like I couldn't use msbuild in 64-bit mode. I installed Windows 8 SDK, and I still get the error. Then I finally found this http://stackoverflow.com/questions/14180012/npm-install-for-some-packages-sqlite3-socket-io-fail-with-error-msb8020-on-wi and running npm install phantom --msvs_version=2012 worked

When I ran the phantom server (https://github.com/collectiveip/prerender#readme) I got missing dependency errors. Using npm install for all the required modules installed them.

I initially had my phantomjs server running as a virtual application under Default Web Site site in IIS. The path was http://localhost/prerender. Every request I made was giving me a blank screen. I first made sure my web.config was properly rewriting all urls to use index.js by using a boilerplate web.config for iisnode: http://tomasz.janczuk.org/2012/05/yaml-configuration-support-in-iisnode.html.

I moved my site to be its own top-level website in IIS. At first I gave it a port number (8082) and got port errors when I navigated to http://localhost:8082. So I changed the IIS bindings to use host name instead. I added local.prerender.com to my windows hosts file and used that name in the IIS bindings.

I still got a semi-cryptic port error message from phantomjs. After googling and hoping to find a stack overflow question, I decided to restart my computer. The error indicated a port was already in use. Because I've made so many changes I figured a restart should at least reset all the ports.

After restarting my local phantomjs server worked! Navigating to http://local.prerender.com/http://www.google.com resulted in a html snapshot of Google's iconic home page.

Deploying to web server

Make sure phantomjs.exe is copied to your PATH somewhere, as mentioned above

I didn't need to install Python or any SDK on my dev server. Those are only needed for npm to compile the dependent packages. Because I already did that locally all I needed to do was deploy to my server.

Sample snippet from my current project to add a clearing div based on count of columns added and viewport: