removed universal demo components

package.json

@@ -75,21 +75,23 @@
     "accepts": "^1.3.3",
     "angular2-template-loader": "^0.4.0",
     "awesome-typescript-loader": "^2.2.4",
-    "codelyzer": "^2.0.0-beta.1",
+    "codelyzer": "1.0.0-beta.3",
     "cookie-parser": "^1.4.3",
     "express-interceptor": "^1.2.0",
     "iltorb": "^1.0.13",
     "imports-loader": "^0.6.5",
     "json-loader": "^0.5.4",
     "memory-cache": "^0.1.6",
+    "node-sass": "^3.13.0",
     "nodemon": "^1.10.0",
     "raw-loader": "^0.5.1",
     "reflect-metadata": "0.1.8",
     "rimraf": "^2.5.4",
+    "sass-loader": "^4.0.2",
     "string-replace-loader": "^1.0.5",
     "ts-helpers": "^1.1.2",
     "ts-node": "^1.3.0",
-    "tslint": "^4.0.2",
+    "tslint": "3.13.0",
     "typescript": "2.0.2",
     "v8-lazy-parse-webpack-plugin": "^0.3.0",
     "webpack": "2.1.0-beta.27",

src/+app/+about/about-routing.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AboutComponent } from './about.component';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: 'about', component: AboutComponent }
-    ])
-  ]
-})
-export class AboutRoutingModule { }

src/+app/+about/about.component.ts

@@ -1,14 +0,0 @@
-import { Component, Inject, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.Default,
-  encapsulation: ViewEncapsulation.Emulated,
-  selector: 'about',
-  template: 'About component'
-})
-export class AboutComponent {
-  constructor(@Inject('req') req: any) {
-    // console.log('req',  req)
-
-  }
-}

src/+app/+about/about.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../shared/shared.module';
-import { AboutComponent } from './about.component';
-import { AboutRoutingModule } from './about-routing.module';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    AboutRoutingModule
-  ],
-  declarations: [
-    AboutComponent
-  ]
-})
-export class AboutModule { }

src/+app/+home/home.component.html

@@ -1,6 +0,0 @@
-<div class="home">
-  Home component
-  <strong>Async data call return value:</strong>
-  <pre>{{ data | json }}</pre>
-  <blockquote>{{ data.data }}</blockquote>
-</div>

src/+app/+lazy/lazy.component.ts

@@ -1,14 +0,0 @@
-import { Component, Inject, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.Default,
-  encapsulation: ViewEncapsulation.Emulated,
-  selector: 'lazy',
-  template: `
-    <p>
-      Lazy component
-    </p>
-  `
-})
-export class LazyComponent {
-}

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

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../shared/shared.module';
-import { LazyComponent } from './lazy.component';
-import { LazyRoutingModule } from './lazy-routing.module';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    LazyRoutingModule
-  ],
-  declarations: [
-    LazyComponent
-  ]
-})
-export class LazyModule { }

src/+app/+todo/todo-routing.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { TodoComponent } from './todo.component';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: 'todo', component: TodoComponent }
-    ])
-  ]
-})
-export class TodoRoutingModule { }

src/+app/+todo/todo.component.ts

@@ -1,43 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-
-import { ModelService } from '../shared/model/model.service';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.Default,
-  encapsulation: ViewEncapsulation.Emulated,
-  selector: 'todo',
-  styles: [`
-  `],
-  template: `
-    <div class="todo">
-      Todo component
-      <form #f="ngForm" (ngSubmit)="addTodo(newTodo)">
-        <input name="newTodo" [(ngModel)]="newTodo">
-        <button>Submit</button>
-      </form>
-      <ul>
-        <li *ngFor="let todo of todos">
-          {{ todo }}
-        </li>
-      </ul>
-    </div>
-  `
-})
-export class TodoComponent {
-  newTodo = '';
-  todos = [];
-  constructor(public model: ModelService) {
-    // we need the data synchronously for the client to set the server response
-    // we create another method so we have more control for testing
-    this.universalInit();
-  }
-
-  addTodo(newTodo) {
-    this.todos.push(newTodo);
-    this.newTodo = '';
-  }
-
-  universalInit() {
-  }
-
-}

src/+app/+todo/todo.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../shared/shared.module';
-import { TodoComponent } from './todo.component';
-import { TodoRoutingModule } from './todo-routing.module';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    TodoRoutingModule
-  ],
-  declarations: [
-    TodoComponent
-  ]
-})
-export class TodoModule { }

src/+app/app-routing.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-export function getLazyModule() {
-  return System.import('./+lazy/lazy.module' + (process.env.AOT ? '.ngfactory' : ''))
-    .then(mod => mod[(process.env.AOT ? 'LazyModuleNgFactory' : 'LazyModule')]);
-}
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: '', redirectTo: '/home', pathMatch: 'full' },
-      { path: 'lazy', loadChildren: getLazyModule }
-    ])
-  ],
-})
-export class AppRoutingModule { }

src/+app/app.component.ts

@@ -1,66 +0,0 @@
-import { Component, Directive, ElementRef, Renderer, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-
-//
-/////////////////////////
-// ** Example Directive
-// Notice we don't touch the Element directly
-
-@Directive({
-  selector: '[xLarge]'
-})
-export class XLargeDirective {
-  constructor(element: ElementRef, renderer: Renderer) {
-    // ** IMPORTANT **
-    // we must interact with the dom through -Renderer-
-    // for webworker/server to see the changes
-    renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
-    // ^^
-  }
-}
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.Default,
-  encapsulation: ViewEncapsulation.Emulated,
-  selector: 'app',
-  styles: [`
-    * { padding:0; margin:0; font-family: 'Droid Sans', sans-serif; }
-    #universal { text-align:center; font-weight:bold; padding:15px 0; }
-    nav { background:#158126; min-height:40px; border-bottom:5px #046923 solid; }
-    nav a { font-weight:bold; text-decoration:none; color:#fff; padding:20px; display:inline-block; }
-    nav a:hover { background:#00AF36; }
-    .hero-universal { min-height:500px; display:block; padding:20px; background: url('/assets/logo.png') no-repeat center center; }
-    .inner-hero { background: rgba(255, 255, 255, 0.75); border:5px #ccc solid; padding:25px; }
-    .router-link-active { background-color: #00AF36; }
-    main { padding:20px 0; }
-    pre { font-size:12px; }
-  `],
-  template: `
-  <h3 id="universal">Angular2 Universal</h3>
-  <nav>
-    <a routerLinkActive="router-link-active" routerLink="home">Home</a>
-    <a routerLinkActive="router-link-active" routerLink="about">About</a>
-    <a routerLinkActive="router-link-active" routerLink="todo">Todo</a>
-    <a routerLinkActive="router-link-active" routerLink="lazy">Lazy</a>
-  </nav>
-  <div class="hero-universal">
-    <div class="inner-hero">
-      <div>
-        <span xLarge>Universal JavaScript {{ title }}!</span>
-      </div>
-
-      Two-way binding: <input type="text" [value]="title" (input)="title = $event.target.value">
-
-      <br>
-      <br>
-
-      <strong>Router-outlet:</strong>
-      <main>
-        <router-outlet></router-outlet>
-      </main>
-    </div>
-  </div>
-  `
-})
-export class AppComponent {
-  title = 'ftw';
-}

src/+app/app.module.ts

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import { HomeModule } from './+home/home.module';
-import { AboutModule } from './+about/about.module';
-import { TodoModule } from './+todo/todo.module';
-
-import { SharedModule } from './shared/shared.module';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent, XLargeDirective } from './app.component';
-
-
-@NgModule({
-  declarations: [ AppComponent, XLargeDirective ],
-  imports: [
-    SharedModule,
-    HomeModule,
-    AboutModule,
-    TodoModule,
-    AppRoutingModule
-  ]
-})
-export class AppModule {
-}
-
-export { AppComponent } from './app.component';

src/app/app-routing.module.ts

@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { LazyComponent } from './lazy.component';
-
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', component: LazyComponent }
+      { path: '', redirectTo: '/home', pathMatch: 'full' }
     ])
-  ]
+  ],
 })
-export class LazyRoutingModule { }
+export class AppRoutingModule { }

src/app/app.component.html

@@ -0,0 +1,9 @@
+<h3>DSpace</h3>
+<nav>
+  <a routerLinkActive="router-link-active" routerLink="home">Home</a>
+</nav>
+<div class="container-fluid">
+  <main>
+    <router-outlet></router-outlet>
+  </main>
+</div>

src/app/app.component.scss

@@ -0,0 +1 @@
+

src/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
+  selector: 'ds-app',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.scss' ]
+})
+export class AppComponent {
+}

src/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { HomeModule } from './home/home.module';
+
+import { SharedModule } from './shared/shared.module';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+
+
+@NgModule({
+  declarations: [ AppComponent ],
+  imports: [
+    SharedModule,
+    HomeModule,
+    AppRoutingModule
+  ]
+})
+export class AppModule {
+}
+
+export { AppComponent } from './app.component';

src/app/home/home.component.html

@@ -0,0 +1,3 @@
+<div class="home">
+  Home component
+</div>

src/app/home/home.component.ts

@@ -1,27 +1,19 @@
 import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
 
-import { ModelService } from '../shared/model/model.service';
-
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
-  selector: 'home',
+  selector: 'ds-home',
   styleUrls: [ './home.component.css' ],
   templateUrl: './home.component.html'
 })
 export class HomeComponent {
   data: any = {};
-  constructor(public model: ModelService) {
+  constructor() {
-
-    // we need the data synchronously for the client to set the server response
-    // we create another method so we have more control for testing
     this.universalInit();
   }
 
   universalInit() {
-    this.model.get('/data.json').subscribe(data => {
-      this.data = data;
-    });
   }
 
 }

src/app/home/home.module.ts

@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 
-import { SharedModule } from '../shared/shared.module';
 import { HomeComponent } from './home.component';
 import { HomeRoutingModule } from './home-routing.module';
 
 @NgModule({
   imports: [
-    SharedModule,
     HomeRoutingModule
   ],
   declarations: [

src/app/shared/api.service.ts

@@ -5,9 +5,6 @@ import 'rxjs/add/observable/throw';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 
-import { CacheService  } from './cache.service';
-
-
 @Injectable()
 export class ApiService {
   constructor(public _http: Http) {

src/app/shared/shared.module.ts

@@ -24,7 +24,7 @@ const COMPONENTS = [
 const PROVIDERS = [
   ModelService,
   ApiService
-]
+];
 
 @NgModule({
   imports: [

src/browser.module.ts

@@ -4,9 +4,9 @@ import { RouterModule } from '@angular/router';
 import { UniversalModule, isBrowser, isNode, AUTO_PREBOOT } from 'angular2-universal/browser'; // for AoT we need to manually split universal packages
 import { IdlePreload, IdlePreloadModule } from '@angularclass/idle-preload';
 
-import { AppModule, AppComponent } from './+app/app.module';
+import { AppModule, AppComponent } from './app/app.module';
-import { SharedModule } from './+app/shared/shared.module';
+import { SharedModule } from './app/shared/shared.module';
-import { CacheService } from './+app/shared/cache.service';
+import { CacheService } from './app/shared/cache.service';
 
 // Will be merged into @angular/platform-browser in a later release
 // see https://github.com/angular/angular/pull/12322

src/index.html

@@ -7,16 +7,14 @@
 
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 
-  <link rel="prerender" href="http://localhost:3000/lazy">
-  <link rel="preload" href="/assets/logo.svg">
   <base href="/">
 
 </head>
 <body>
 
-  <app>
+  <ds-app>
     Loading DSpace ...
-  </app>
+  </ds-app>
 
   <script async src="/main.bundle.js"></script>
 </body>

src/node.module.ts

@@ -3,9 +3,9 @@ import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { UniversalModule, isBrowser, isNode } from 'angular2-universal/node'; // for AoT we need to manually split universal packages
 
-import { AppModule, AppComponent } from './+app/app.module';
+import { AppModule, AppComponent } from './app/app.module';
-import { SharedModule } from './+app/shared/shared.module';
+import { SharedModule } from './app/shared/shared.module';
-import { CacheService } from './+app/shared/cache.service';
+import { CacheService } from './app/shared/cache.service';
 
 // Will be merged into @angular/platform-browser in a later release
 // see https://github.com/angular/angular/pull/12322

src/server.routes.ts

@@ -10,8 +10,5 @@
  * ];
  **/
 export const routes: string[] = [
-  'about',
+  'home'
-  'home',
-  'todo',
-  'lazy',
 ];

tslint.json

@@ -92,8 +92,12 @@
       "check-separator",
       "check-type"
     ],
-    "directive-selector": [true, "attribute", "ds", "camelCase"],
+    "directive-selector-prefix": [true, "ds"],
-    "component-selector": [true, "element", "ds", "kebab-case"],
+    "component-selector-prefix": [true, "ds"],
+    "directive-selector-name": [true, "camelCase"],
+    "component-selector-name": [true, "kebab-case"],
+    "directive-selector-type": [true, "attribute"],
+    "component-selector-type": [true, "element"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,

webpack.config.ts

@@ -37,6 +37,7 @@ export var commonConfig = {
       { test: /\.ts$/,   use: ['awesome-typescript-loader', 'angular2-template-loader'] },
       { test: /\.html$/, use: 'raw-loader' },
       { test: /\.css$/,  use: 'raw-loader' },
+      { test: /\.scss$/,  use: ['raw-loader', 'sass-loader'] },
       { test: /\.json$/, use: 'json-loader' }
     ],
   },