In Angular2Spa template, use per-component scoped styles. Fixes common config issues like #234.

templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.css

@@ -0,0 +1,59 @@
+li .glyphicon {
+    margin-right: 10px;
+}
+
+/* Highlighting rules for nav menu items */
+li.link-active a,
+li.link-active a:hover,
+li.link-active a:focus {
+    background-color: #4189C7;
+    color: white;
+}
+
+/* Keep the nav menu independent of scrolling and on top of other items */
+.main-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+@media (min-width: 768px) {
+    /* On small screens, convert the nav menu to a vertical sidebar */
+    .main-nav {
+        height: 100%;
+        width: calc(25% - 20px);
+    }
+    .navbar {
+        border-radius: 0px;
+        border-width: 0px;
+        height: 100%;
+    }
+    .navbar-header {
+        float: none;
+    }
+    .navbar-collapse {
+        border-top: 1px solid #444;
+        padding: 0px;
+    }
+    .navbar ul {
+        float: none;
+    }
+    .navbar li {
+        float: none;
+        font-size: 15px;
+        margin: 6px;
+    }
+    .navbar li a {
+        padding: 10px 16px;
+        border-radius: 4px;
+    }
+    .navbar a {
+        /* If a menu item's text is too long, truncate it */
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.html

@@ -1,5 +1,5 @@
 <div class='main-nav'>
-        <div class='navbar navbar-inverse'>
+    <div class='navbar navbar-inverse'>
         <div class='navbar-header'>
             <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                 <span class='sr-only'>Toggle navigation</span>

templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'nav-menu',
-    template: require('./navmenu.component.html')
+    template: require('./navmenu.component.html'),
+    styles: [require('./navmenu.component.css')]
 })
 export class NavMenuComponent {
 }