basic bootstrap

Author: artemdemo

README.md

@@ -23,6 +23,11 @@ I'm using [dockie/lamp](http://github.com/robloach/dockie)
 
 4. Copy last [wordpress CMS](https://wordpress.org/download/) to `www` folder
 
+5. Build js and css
+    ```
+    $ npm run build
+    ```
+
 **Backend stack**
 
 * [Dockie](../dockie)

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "npm run watch",
     "watch": "webpack --watch --progress --profile",
-    "build": "webpack --progress --profile --bail",
+    "build": "webpack --progress --profile",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -19,7 +19,7 @@
     "angular"
   ],
   "author": "Artem Demo",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/artemdemo/wordpress-restapi-angular2/issues"
   },
@@ -47,11 +47,15 @@
     "reflect-metadata": "^0.1.10",
     "rxjs": "^5.3.0",
     "style-loader": "^0.16.1",
+    "ts-helpers": "^1.1.2",
     "ts-loader": "^2.0.3",
     "typescript": "^2.2.2",
     "url-loader": "^0.5.8",
     "webpack": "^2.3.3",
     "zone.js": "^0.8.5"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@types/requirejs": "^2.1.29",
+    "to-string-loader": "^1.1.5"
+  }
 }

source/app/app.component.html

@@ -1,8 +1,20 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'my-app', // <my-app></my-app>
-    templateUrl: './app.component.html',
+    selector: 'wp-app',
+    template: `
+        <header>
+            <nav>
+                <a [routerLink]="['']">Home</a>
+                <a [routerLink]="['about']">About</a>
+            </nav>
+        </header>
+        <main>
+            <h1>Hello!</h1>
+
+            <router-outlet></router-outlet>
+        </main>
+    `,
 })
 export class AppComponent {
     constructor() {

source/app/app.component.ts

@@ -3,7 +3,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 
-// import { ApiService } from './shared';
 import { AppComponent } from './app.component';
 import { HomeView } from '../views/home.view';
 import { routing } from './app.routing';
@@ -22,6 +21,6 @@ import { routing } from './app.routing';
     providers: [],
     bootstrap: [AppComponent]
 })
-export class AppModule {
+export default class AppModule {
     constructor(public appRef: ApplicationRef) {}
 }

source/app/app.module.ts

@@ -1,6 +1,12 @@
+/// <reference path="../node_modules/@types/requirejs/index.d.ts" />
+
 //import { enableProdMode } from '@angular/core';
+import 'ts-helpers';
+import 'reflect-metadata';
+import 'core-js/client/shim';
+import 'zone.js';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import AppModule from './app/app.module';
 
 // depending on the env mode, enable prod mode or add debugging modules
 // if (ENV.production === 'production') {
@@ -11,8 +17,10 @@ export function main() {
     return platformBrowserDynamic().bootstrapModule(AppModule);
 }
 
-if (document.readyState === 'complete') {
-    main();
-} else {
-    document.addEventListener('DOMContentLoaded', main);
-}
+main();
+
+// if (document.readyState === 'complete') {
+//     main();
+// } else {
+//     document.addEventListener('DOMContentLoaded', main);
+// }

source/index.ts

@@ -2,8 +2,12 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
     selector: 'home-view',
-    templateUrl: './home.view.html',
-    styleUrls: ['./home.view.less']
+    styles: [require('./home.view.less')],
+    template: `
+        <p>
+            Home Works!
+        </p>
+    `,
 })
 export class HomeView implements OnInit {
 

source/views/home.view.html

@@ -12,10 +12,12 @@
     <meta name="description" content="<?php bloginfo( 'description' ); ?>" />
     <link href="<?php echo get_template_directory_uri(); ?>/css/styles.css" rel="stylesheet" type="text/css" />
     <script async src="<?php echo get_template_directory_uri(); ?>/js/bundle.js"></script>
+
+    <base href="/">
 </head>
 <body>
 
-<wp-app>Loading...</wp-app>
+<wp-app>Loading...!!</wp-app>
 
 </body>
 </html>

source/views/home.view.ts

@@ -1,10 +1,10 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const path = require('path');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const ContextReplacementPlugin = require('webpack').ContextReplacementPlugin;
 const DefinePlugin = require('webpack').DefinePlugin;
+const path = require('path');
 
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -29,12 +29,8 @@ module.exports = {
                 exclude: /node_modules/,
             },
             {
-                test: /\.(less|css)$/,
-                use: [
-                    'style-loader',
-                    { loader: 'css-loader', options: { importLoaders: 1 } },
-                    'less-loader'
-                ]
+                test: /\.(css|less)$/,
+                loaders: ['to-string-loader', 'css-loader', 'less-loader'],
             },
             {test: /\.(png|gif|jpg)(\?.*$|$)/, loader: 'url-loader?limit=100000&name=images/[hash].[ext]'},
             {test: /\.(json)(\?.*$|$)/, loader: 'json-loader'},
@@ -55,7 +51,6 @@ module.exports = {
         new ExtractTextPlugin('./css/styles.css'),
 
         new CleanWebpackPlugin([
-            './theme/js',
             './www/wp-content/themes/restapi-angular'
         ], {
             verbose: true,