Example of adding angular2-materialize in response for #394

2025-12-23 10:08:57 +00:00 · 2016-10-21 11:35:43 +01:00
7 changed files with 34 additions and 3 deletions
--- a/templates/Angular2Spa/ClientApp/app/app.module.ts
+++ b/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,
--- a/templates/Angular2Spa/ClientApp/app/components/home/home.component.html
+++ b/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>
--- a/templates/Angular2Spa/ClientApp/boot-client.ts
+++ b/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';
--- a/templates/Angular2Spa/Views/Home/Index.cshtml
+++ b/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 {
--- a/templates/Angular2Spa/Views/Shared/_Layout.cshtml
+++ b/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()
--- a/templates/Angular2Spa/package.json
+++ b/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"
  }
 }
--- a/templates/Angular2Spa/webpack.config.vendor.js
+++ b/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'),