chore: init commit

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.DS_Store
+npm-debug.log
+src/ngfactory
+coverage/

LICENCE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Bleenco
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,24 @@
+# Angular Webpack Seed
+
+<p align="center">
+  <img src="https://cloud.githubusercontent.com/assets/1796022/23861990/11b1ac98-080c-11e7-8ea6-30c66633f8df.png" width="200">
+</p>
+
+---
+
+### Commands
+
+```sh
+# Development
+npm start
+
+# Production Build
+npm run build:prod
+
+# Run Server
+node dist/server.js
+```
+
+### Licence
+
+MIT

package.json

@@ -0,0 +1,75 @@
+{
+  "name": "angular-webpack-seed",
+  "version": "0.1.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --env.client --env.serve --progress",
+    "start:aot": "webpack-dev-server --env.client --env.serve --env.aot --progress",
+    "build:client": "webpack --env.client --env.aot --progress --hide-modules",
+    "build:server": "webpack --env.server --env.aot --progress --hide-modules",
+    "build": "npm run build:client && npm run build:server",
+    "prebuild": "npm run clean",
+    "clean": "rimraf dist",
+    "server": "node dist/server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bleenco/angular-webpack-seed.git"
+  },
+  "authors": [
+    "Jan Kuri <[email protected]>",
+    "Irman Abdic <[email protected]>"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/bleenco/angular-webpack-seed/issues"
+  },
+  "homepage": "https://github.com/bleenco/angular-webpack-seed#readme",
+  "dependencies": {
+    "@angular/common": "^4.0.0-rc.3",
+    "@angular/compiler": "^4.0.0-rc.3",
+    "@angular/core": "^4.0.0-rc.3",
+    "@angular/forms": "^4.0.0-rc.3",
+    "@angular/http": "^4.0.0-rc.3",
+    "@angular/platform-browser": "^4.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "^4.0.0-rc.3",
+    "@angular/platform-server": "^4.0.0-rc.3",
+    "@angular/router": "^4.0.0-rc.3",
+    "@angularclass/universal-express": "^1.0.1",
+    "@angularclass/universal-transfer-state": "^1.0.11",
+    "core-js": "^2.4.1",
+    "express": "^4.15.2",
+    "rxjs": "^5.2.0",
+    "zone.js": "~0.7.7"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^4.0.0-rc.3",
+    "@ngtools/webpack": "^1.2.13",
+    "@types/express": "^4.0.35",
+    "@types/node": "^7.0.8",
+    "add-asset-html-webpack-plugin": "^1.0.2",
+    "angular2-template-loader": "^0.6.2",
+    "awesome-typescript-loader": "^3.1.2",
+    "codelyzer": "^3.0.0-beta.3",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.27.3",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.28.0",
+    "ng-router-loader": "^2.1.0",
+    "node-sass": "^4.5.0",
+    "portfinder": "^1.0.13",
+    "raw-loader": "^0.5.1",
+    "rimraf": "^2.6.1",
+    "sass-loader": "^6.0.3",
+    "script-ext-html-webpack-plugin": "^1.7.1",
+    "style-loader": "^0.13.2",
+    "to-string-loader": "^1.1.5",
+    "tslint": "^4.5.1",
+    "typescript": "^2.2.1",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.2",
+    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
+    "webpack-merge": "^4.0.0"
+  }
+}

src/api/app.ts

@@ -0,0 +1,7 @@
+import { data } from './data';
+
+export class App {
+  getData() {
+    return data;
+  }
+}

src/api/data.ts

@@ -0,0 +1,4 @@
+export const data = {
+  greeting: 'Hello',
+  name: 'World'
+};

src/app/+lazy/lazy.module.ts

@@ -0,0 +1,21 @@
+import {NgModule, Component} from '@angular/core'
+import {RouterModule} from '@angular/router'
+
+
+@Component({
+	selector: 'lazy-view',
+	template: `<h3>i'm lazy</h3>`
+})
+export class LazyView {}
+
+@NgModule({
+	declarations: [LazyView],
+	imports: [
+		RouterModule.forChild([
+			{ path: '', component: LazyView, pathMatch: 'full'}
+		])
+	]
+})
+export class LazyModule {
+
+}

src/app/app.component.html

@@ -0,0 +1,4 @@
+<h1>Angular Webpack Seed</h1>
+<a routerLink="/">Home</a>
+<a routerLink="/lazy">Lazy</a>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { TransferState } from '@angularclass/universal-transfer-state';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html'
+})
+export class AppComponent implements OnInit {
+  constructor(private cache: TransferState) {}
+
+  ngOnInit() {
+    this.cache.set('cached', true);
+  }
+}

src/app/app.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { APP_BASE_HREF, CommonModule } from '@angular/common';
+import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+import { HomeViewComponent } from './home/home-view.component';
+import { TransferHttpModule } from '@angularclass/universal-transfer-state/browser';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HttpModule,
+    TransferHttpModule,
+    RouterModule.forRoot([
+      { path: '', component: HomeViewComponent, pathMatch: 'full'},
+      { path: 'lazy', loadChildren: './+lazy/lazy.module#LazyModule'}
+    ])
+  ],
+  providers: [
+    { provide: APP_BASE_HREF, useValue: '/'}
+  ],
+  declarations: [ AppComponent, HomeViewComponent ],
+  exports: [ AppComponent ]
+})
+export class AppModule {}

src/app/browser-app.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
+import { BrowserTransferStateModule } from '@angularclass/universal-transfer-state/browser';
+
+@NgModule({
+  bootstrap: [ AppComponent ],
+  imports: [
+    BrowserModule.withServerTransition({
+      appId: 'my-app-id'
+    }),
+    BrowserTransferStateModule,
+    AppModule
+  ]
+})
+export class BrowserAppModule {}

src/app/home/home-view.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { TransferHttp } from '@angularclass/universal-transfer-state';
+
+@Component({
+  selector: 'app-home-view',
+  template: `<h3>{{ data }}</h3>`
+})
+export class HomeViewComponent implements OnInit {
+  data: { greeting: string, name: string };
+
+  constructor(private http: TransferHttp) {}
+
+  ngOnInit() {
+    this.http.get('http://localhost:8000/data')
+    .first()
+    .map(data => {
+      return `${ data.greeting } ${ data.name }`;
+    })
+    .subscribe(data => this.data = data, err => {
+      this.data = err;
+    });
+  }
+}

src/app/server-app.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
+import { ServerTransferStateModule, TransferState } from '@angularclass/universal-transfer-state/server';
+import { UniversalOnInit } from '@angularclass/universal-express';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  bootstrap: [AppComponent],
+  imports: [
+    BrowserModule.withServerTransition({
+      appId: 'my-app-id'
+    }),
+    ServerModule,
+    ServerTransferStateModule,
+    AppModule
+  ]
+})
+export class ServerAppModule implements UniversalOnInit {
+
+  constructor(private transferState: TransferState) { }
+
+  // Gotcha
+  universalOnInit() {
+    this.transferState.inject();
+  }
+}

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Angular Webpack Seed</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/main.browser.ts

@@ -0,0 +1,7 @@
+import './styles';
+import './polyfills';
+import 'rxjs';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserAppModule } from './app/browser-app.module';
+
+platformBrowserDynamic().bootstrapModule(BrowserAppModule);

src/main.server.aot.ts

@@ -0,0 +1,45 @@
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+import 'rxjs';
+import * as express from 'express';
+import { platformServer, renderModuleFactory } from '@angular/platform-server';
+import { ServerAppModuleNgFactory } from './ngfactory/app/server-app.module.ngfactory';
+import { universalExpressEngine } from '@angularclass/universal-express';
+import { ROUTES } from './routes';
+import { App } from './api/app';
+import { enableProdMode } from '@angular/core';
+enableProdMode();
+const app = express();
+const api = new App();
+const port = 8000;
+const baseUrl = `http://localhost:${ port }`;
+
+app.engine('html', universalExpressEngine({
+  ngModule: ServerAppModuleNgFactory
+}));
+
+app.set('view engine', 'html');
+app.set('views', 'src');
+
+app.use('/', express.static('dist', { index: false }));
+
+ROUTES.forEach(route => {
+  app.get(route, (req, res) => {
+    console.time(`GET: ${req.originalUrl}`);
+    res.render('index', {
+      req: req,
+      res: res
+    });
+    console.timeEnd(`GET: ${req.originalUrl}`);
+  });
+});
+
+app.get('/data', (req, res) => {
+  console.time(`GET: ${req.originalUrl}`);
+  res.json(api.getData());
+  console.timeEnd(`GET: ${req.originalUrl}`);
+});
+
+app.listen(8000, () => {
+  console.log(`Listening at ${baseUrl}`);
+});

src/main.server.ts

@@ -0,0 +1,46 @@
+import './styles';
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+import 'rxjs';
+import * as express from 'express';
+import { platformServer, renderModuleFactory } from '@angular/platform-server';
+import { ServerAppModule } from './app/server-app.module';
+import { universalExpressEngine } from '@angularclass/universal-express';
+import { ROUTES } from './routes';
+import { App } from './api/app';
+import { enableProdMode } from '@angular/core';
+enableProdMode();
+const app = express();
+const port = 8000;
+const api = new App();
+const baseUrl = `http://localhost:${ port }`;
+
+app.engine('html', universalExpressEngine({
+  ngModule: ServerAppModule
+}));
+
+app.set('view engine', 'html');
+app.set('views', 'src');
+
+app.use('/', express.static('dist', { index: false }));
+
+ROUTES.forEach(route => {
+  app.get(route, (req, res) => {
+    console.time(`GET: ${ req.originalUrl }`);
+    res.render('../dist/index', {
+      req: req,
+      res: res
+    });
+    console.timeEnd(`GET: ${ req.originalUrl }`);
+  });
+});
+
+app.get('/data', (req, res) => {
+  console.time(`GET: ${req.originalUrl}`);
+  res.json(api.getData());
+  console.timeEnd(`GET: ${req.originalUrl}`);
+});
+
+app.listen(8000, () => {
+  console.log(`Listening at ${baseUrl}`);
+});