jqui datepicker working (some styles and/or files missing)

package.json

@@ -44,6 +44,8 @@
     "@nguniversal/express-engine": "^1.0.0-beta.2",
     "d3": "^4.10.1",
     "express": "^4.15.2",
+    "jquery": "^3.2.1",
+    "jquery-ui": "^1.12.1",
     "moment": "^2.18.1",
     "rxjs": "^5.4.0",
     "serialize-javascript": "^1.3.0",
@@ -55,13 +57,17 @@
     "@ngtools/webpack": "^1.3.1",
     "@types/d3": "^4.10.0",
     "@types/express": "^4.0.35",
+    "@types/jquery": "^3.2.12",
+    "@types/jqueryui": "^1.11.36",
     "@types/moment": "^2.13.0",
     "@types/node": "^7.0.18",
+    "css-loader": "^0.28.7",
     "html-webpack-plugin": "^2.28.0",
     "nodemon": "^1.11.0",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.6.1",
     "script-ext-html-webpack-plugin": "^1.7.1",
+    "style-loader": "^0.18.2",
     "typescript": "^2.3.2",
     "webpack": "3.3.0",
     "webpack-merge": "^4.1.0",

src/app/dates/dates-sample.component.ts

@@ -4,7 +4,7 @@ import { momentToken, Moment } from './moment.lib';
 @Component({
   selector: 'dates-sample',
   template: `
-    <input type="text" [(ngModel)]="date" />
+    <input jquiDatePicker type="text" [(ngModel)]="date" />
     {{ date | momentFromNow }}
   `
 })

src/app/dates/dates.module.ts

@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { momentToken, moment } from './moment.lib';
 import { DatesSampleComponent } from './dates-sample.component';
 import { MomentFromNowPipe } from './moment-from-now.pipe';
+import { JquiDatePickerDirective } from './jqui-date-picker.directive';
 
 @NgModule({
   imports: [
@@ -14,7 +15,8 @@ import { MomentFromNowPipe } from './moment-from-now.pipe';
   ],
   declarations: [
     MomentFromNowPipe,
-    DatesSampleComponent
+    DatesSampleComponent,
+    JquiDatePickerDirective
   ],
   providers: [
     { provide: momentToken, useValue: moment }

src/app/dates/jqui-date-picker.directive.ts

@@ -0,0 +1,29 @@
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
+import { Directive, AfterViewChecked, ElementRef, PLATFORM_ID, Inject, EventEmitter, Output } from '@angular/core';
+import { isPlatformBrowser, isPlatformServer } from '@angular/common';
+import 'jquery';
+import 'jquery-ui/themes/base/core.css';
+import 'jquery-ui/themes/base/datepicker.css';
+import 'jquery-ui/ui/widgets/datepicker';
+
+@Directive({
+  selector: 'input[ngModel][jquiDatePicker]'
+})
+export class JquiDatePickerDirective implements AfterViewChecked {
+
+  @Output()
+  ngModelChange = new EventEmitter();
+
+  constructor(private el: ElementRef, 
+    @Inject(PLATFORM_ID) private platformId: Object) {}
+
+  ngAfterViewChecked() {
+    if (isPlatformServer(this.platformId))
+      return;
+
+    $(this.el.nativeElement).datepicker({
+      onSelect: (val) => this.ngModelChange.emit(val)
+    });
+  }
+}

webpack/webpack.client.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const { root } = require('./helpers');
 
 const { AotPlugin } = require('@ngtools/webpack');
@@ -23,6 +24,11 @@ module.exports = {
     }),
     new ScriptExtPlugin({
       defaultAttribute: 'defer'
+    }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jQuery'
     })
   ]
 };

webpack/webpack.common.js

@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.ts$/, loader: '@ngtools/webpack' },
-      { test: /\.css$/, loader: 'raw-loader' },
+      { test: /\.css$/, loader: 'style-loader!css-loader' },
       { test: /\.html$/, loader: 'raw-loader' }
     ]
   },