Example of adding angular2-materialize in response for #394

src/Microsoft.AspNetCore.ReactServices/npm/redux-typed/.gitignore

@@ -1,4 +1,3 @@
-/typings/
 /node_modules/
 /*.js
 /*.d.ts

src/Microsoft.AspNetCore.ReactServices/npm/redux-typed/package.json

@@ -1,11 +1,11 @@
 {
   "name": "redux-typed",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Helpers for building React+Redux apps with strong TypeScript type checking everywhere",
   "main": "main.js",
   "typings": "main.d.ts",
   "scripts": {
-    "prepublish": "rimraf *.d.ts && tsd update && tsc && echo 'Finished building NPM package \"redux-typed\"'",
+    "prepublish": "rimraf *.d.ts && tsc && echo 'Finished building NPM package \"redux-typed\"'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Microsoft",
@@ -18,7 +18,10 @@
     "url": "https://github.com/aspnet/JavaScriptServices.git"
   },
   "devDependencies": {
+    "@types/react": "^0.14.38",
+    "@types/react-redux": "^4.4.32",
+    "@types/redux": "^3.5.30",
     "rimraf": "^2.5.4",
-    "typescript": "^1.8.10"
+    "typescript": "^2.0.0"
   }
 }

src/Microsoft.AspNetCore.ReactServices/npm/redux-typed/tsconfig.json

@@ -4,8 +4,12 @@
     "module": "commonjs",
     "target": "es5",
     "declaration": true,
-    "outDir": "."
+    "outDir": ".",
+    "lib": ["es2015", "dom"]
   },
+  "files": [
+    "src/main.ts"
+  ],
   "exclude": [
     "node_modules"
   ]

src/Microsoft.AspNetCore.ReactServices/npm/redux-typed/tsd.json

@@ -1,18 +0,0 @@
-{
-  "version": "v4",
-  "repo": "borisyankov/DefinitelyTyped",
-  "ref": "master",
-  "path": "typings",
-  "bundle": "typings/tsd.d.ts",
-  "installed": {
-    "react/react.d.ts": {
-      "commit": "f4b1797c1201b6c575668f5d7ea12d9b1ab21846"
-    },
-    "react-redux/react-redux.d.ts": {
-      "commit": "f4b1797c1201b6c575668f5d7ea12d9b1ab21846"
-    },
-    "redux/redux.d.ts": {
-      "commit": "f4b1797c1201b6c575668f5d7ea12d9b1ab21846"
-    }
-  }
-}

templates/Angular2Spa/ClientApp/app/app.module.ts

@@ -6,10 +6,12 @@ import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './components/home/home.component';
 import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
 import { CounterComponent } from './components/counter/counter.component';
+import { MaterializeDirective } from 'angular2-materialize';
 
 @NgModule({
     bootstrap: [ AppComponent ],
     declarations: [
+        MaterializeDirective,
         AppComponent,
         NavMenuComponent,
         CounterComponent,

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

@@ -1,4 +1,20 @@
 <h1>Hello, world!</h1>
+
+<ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
+    <li>
+    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+    </li>
+    <li>
+    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+    </li>
+    <li>
+    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+    </li>
+</ul>
+
 <p>Welcome to your new single-page application, built with:</p>
 <ul>
     <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>

templates/Angular2Spa/ClientApp/boot-client.ts

@@ -1,4 +1,6 @@
 import 'angular2-universal-polyfills/browser';
+import 'materialize-css';
+import 'angular2-materialize';
 import { enableProdMode } from '@angular/core';
 import { platformUniversalDynamic } from 'angular2-universal';
 import { AppModule } from './app/app.module';

templates/Angular2Spa/Views/Home/Index.cshtml

@@ -2,7 +2,7 @@
     ViewData["Title"] = "Home Page";
 }
 
-<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
+<app>Loading...</app>
 
 <script src="~/dist/vendor.js" asp-append-version="true"></script>
 @section scripts {

templates/Angular2Spa/Views/Shared/_Layout.cshtml

@@ -6,6 +6,8 @@
         <title>@ViewData["Title"] - WebApplicationBasic</title>
         <base href="/" />
         <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
+        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
     </head>
     <body>
         @RenderBody()

templates/Angular2Spa/package.json

@@ -12,6 +12,7 @@
     "@angular/platform-server": "2.0.2",
     "@angular/router": "3.0.2",
     "@types/node": "^6.0.42",
+    "angular2-materialize": "^5.2.1",
     "angular2-platform-node": "~2.0.11",
     "angular2-universal": "~2.0.11",
     "angular2-universal-polyfills": "~2.0.11",
@@ -27,6 +28,7 @@
     "file-loader": "^0.9.0",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^2.2.1",
+    "materialize-css": "^0.97.7",
     "preboot": "^4.5.2",
     "raw-loader": "^0.5.1",
     "rxjs": "5.0.0-beta.12",
@@ -37,8 +39,8 @@
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-hot-middleware": "^2.12.2",
-    "webpack-node-externals": "^1.4.3",
     "webpack-merge": "^0.14.1",
+    "webpack-node-externals": "^1.4.3",
     "zone.js": "^0.6.25"
   }
 }

templates/Angular2Spa/webpack.config.vendor.js

@@ -24,6 +24,7 @@ module.exports = {
             '@angular/platform-browser-dynamic',
             '@angular/router',
             '@angular/platform-server',
+            'angular2-materialize',
             'angular2-universal',
             'angular2-universal-polyfills',
             'bootstrap',
@@ -32,6 +33,7 @@ module.exports = {
             'es6-promise',
             'event-source-polyfill',
             'jquery',
+            'materialize-css',
             'zone.js',
         ]
     },
@@ -42,7 +44,12 @@ module.exports = {
     },
     plugins: [
         extractCSS,
-        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            jQuery: 'jquery',
+            'window.jQuery': 'jquery',
+            Hammer: 'hammerjs/hammer'
+        }), // Maps these identifiers to the jQuery/Hammer packages (because Materialize/Bootstrap expects them to be global variables)
         new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.DllPlugin({
             path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),

templates/ReactReduxSpa/package.json

@@ -35,7 +35,7 @@
     "react-router-redux": "^4.0.6",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",
-    "redux-typed": "^1.0.1",
+    "redux-typed": "^2.0.0",
     "style-loader": "^0.13.0",
     "ts-loader": "^0.8.1",
     "typescript": "2.0.3",

templates/package-builder/src/yeoman/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-aspnetcore-spa",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Single-Page App templates for ASP.NET Core",
   "author": "Microsoft",
   "license": "Apache-2.0",