Was attempting to browserify compiled TypeScript. The rabbit hole has…

… seemed to get too deep (browserify is now complaining about something node_modules not being able to find something).
Nicholas-Westby · Nov 21, 2016 · 9fab365 · 9fab365
1 parent 2d579af
commit 9fab365
Show file tree

Hide file tree

Showing 23 changed files with 318 additions and 55 deletions.
diff --git a/AngularLab/Client/__2.1.1.workaround.ts b/AngularLab/Client/__2.1.1.workaround.ts
@@ -0,0 +1,31 @@
+
+/*
+ * THIS IS TEMPORARY TO PATCH 2.1.1+ Core bugs
+ */
+
+/* tslint:disable */
+let __compiler__ = require('@angular/compiler');
+import { __platform_browser_private__ } from '@angular/platform-browser';
+import { __core_private__ } from '@angular/core';
+let patch = false;
+if (!__core_private__['ViewUtils']) {
+    patch = true;
+    __core_private__['ViewUtils'] = __core_private__['view_utils'];
+}
+
+
+
+if (!__compiler__.__compiler_private__) {
+    patch = true;
+    (__compiler__).__compiler_private__ = {
+        SelectorMatcher: __compiler__.SelectorMatcher,
+        CssSelector: __compiler__.CssSelector
+    }
+}
+
+var __universal__ = require('angular2-platform-node/__private_imports__');
+if (patch) {
+    __universal__.ViewUtils = __core_private__['view_utils'];
+    __universal__.CssSelector = __compiler__.CssSelector
+    __universal__.SelectorMatcher = __compiler__.SelectorMatcher
+}
diff --git a/AngularLab/Client/app/platform-modules/app.common.module.ts b/AngularLab/Client/app/platform-modules/app.common.module.ts
@@ -15,10 +15,10 @@ import { EffectsModule } from '@ngrx/effects';
 import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
 
 // Main "APP" Root Component
-import { BaseSharedModule, AppComponent, ROUTES, appReducer } from 'app';
+import { BaseSharedModule, AppComponent, ROUTES, appReducer } from '../';
 
 // Component imports
-import { NavMenuComponent } from 'app-components';
+import { NavMenuComponent } from '../../components';
 
 // Container (aka: "pages") imports
 import {
@@ -27,20 +27,20 @@ import {
     BootstrapComponent,
     LoginComponent,
     ExamplesComponent
-} from 'app-containers';
+} from '../../containers';
 
 // Provider (aka: "shared" | "services") imports
 import {
     HttpCacheService, CacheService, // Universal : XHR Cache
     ApiGatewayService
-} from 'app-shared';
+} from '../../shared';
 
 //////////////////////////////////////////////////////////////////
 
 // This imports the variable that, in a hot loading situation, holds
 // a reference to the previous application's last state before
 // it was destroyed.
-import { appState } from 'app';
+import { appState } from '../';
 
 const MODULES = [
     // Do NOT include UniversalModule, HttpModule, or JsonpModule here

diff --git a/AngularLab/Client/app/platform-modules/app.server.module.ts b/AngularLab/Client/app/platform-modules/app.server.module.ts
@@ -7,9 +7,9 @@ import { Store, StoreModule } from '@ngrx/store';
 import { UniversalModule, isBrowser, isNode } from 'angular2-universal/node';
 
 import { AppCommonModule } from './app.common.module';
-import { AppComponent } from 'app';
+import { AppComponent } from '../';
 // Universal : XHR Cache
-import { CacheService } from 'app-shared';
+import { CacheService } from '../../shared';
 
 export function getRequest() {
     return Zone.current.get('req') || {};

diff --git a/AngularLab/Client/bootstrap-server.ts b/AngularLab/Client/bootstrap-server.ts
@@ -1,4 +1,4 @@
-import './__2.1.1.workaround.ts';
+import './__2.1.1.workaround';
 import 'angular2-universal-polyfills/node';
 
 import { enableProdMode } from '@angular/core';

diff --git a/AngularLab/Client/components/navmenu/navmenu.component.ts b/AngularLab/Client/components/navmenu/navmenu.component.ts
@@ -2,12 +2,51 @@ import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 
-import { AppState, LOGOUT_USER } from 'app';
+import { AppState, LOGOUT_USER } from '../../app';
 
 @Component({
     selector: 'app-nav-menu',
-    template: require('./navmenu.component.html'),
-    styles: [require('./navmenu.component.css')]
+    template: `
+
+<ul class="nav">
+    <li [routerLinkActive]="['link-active']">
+        <a [routerLink]="['/home']">
+            <span class="glyphicon glyphicon-home"></span> Home
+        </a>
+    </li>
+    <li [routerLinkActive]="['link-active']">
+        <a [routerLink]="['/examples']">
+            <span class="glyphicon glyphicon-education"></span> Platform Examples
+        </a>
+    </li>
+    <li [routerLinkActive]="['link-active']">
+        <a [routerLink]="['/bootstrap']">
+            <span class="glyphicon glyphicon-education"></span> Bootstrap Demo
+        </a>
+    </li>
+    <li [routerLinkActive]="['link-active']">
+        <a [routerLink]="['/rest-test']">
+            <span class="glyphicon glyphicon-education"></span> RestAPI Demo
+        </a>
+    </li>
+    <li [routerLinkActive]="['link-active']">
+        <a [routerLink]="['/faq']">
+            <span class="glyphicon glyphicon-education"></span> FAQ
+        </a>
+    </li>
+    <li *ngIf="!loggedIn$" [routerLinkActive]="['link-active']">
+        <a [routerLink]="['/login']">
+            <span class="glyphicon glyphicon-user"></span> Login
+        </a>
+    </li>
+    <li *ngIf="loggedIn$" (click)="logout()">
+        <a [routerLink]="['/']">
+            <span class="glyphicon glyphicon-user"></span> Welcome, {{ user$.username }} - Logout
+        </a>
+    </li>
+</ul>
+
+`
 })
 export class NavMenuComponent implements OnInit {
 

diff --git a/AngularLab/Client/containers/bootstrap/bootstrap.component.ts b/AngularLab/Client/containers/bootstrap/bootstrap.component.ts
@@ -2,7 +2,61 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-bootstrap',
-    template: require('./bootstrap.component.html')
+    template: `
+<h1>Ng2-bootstrap Demo:</h1>
+
+<blockquote>
+    <strong>Here we're using Bootstrap via <a href="https://github.com/valor-software/ng2-bootstrap">ng2-bootstrap</a>, which can even be rendered on the server!</strong>
+    <br>
+</blockquote>
+
+<hr>
+<br><br>
+
+<h3>Bootstrap Accordion demo:</h3>
+
+<p>
+    <button type="button" class="btn btn-primary btn-sm"
+            (click)="group.isOpen = !group.isOpen">
+        Toggle last panel
+    </button>
+    <button type="button" class="btn btn-primary btn-sm"
+            (click)="status.isFirstDisabled = ! status.isFirstDisabled">
+        Enable / Disable first panel
+    </button>
+</p>
+
+<div class="checkbox">
+    <label>
+        <input type="checkbox" [(ngModel)]="oneAtATime">
+        Open only one at a time
+    </label>
+</div>
+
+
+<accordion [closeOthers]="oneAtATime">
+    <accordion-group heading="Static Header, initially expanded"
+                     [isOpen]="status.isFirstOpen"
+                     [isDisabled]="status.isFirstDisabled">
+        This content is straight in the template.
+    </accordion-group>
+    <accordion-group *ngFor="let group of groups" [heading]="group.title">
+        {{ group?.content }}
+    </accordion-group>
+    <accordion-group heading="Dynamic Body Content">
+        <p>The body of the accordion group grows to fit the contents</p>
+        <button type="button" class="btn btn-primary btn-sm" (click)="addItem()">Add Item</button>
+        <div *ngFor="let item of items">{{item}}</div>
+    </accordion-group>
+    <accordion-group #group [isOpen]="status.open">
+        <div accordion-heading>
+            I can have markup, too!
+            <i class="pull-right glyphicon"
+               [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
+        </div>
+        This is just some content to illustrate fancy headings.
+    </accordion-group>
+</accordion>`
 })
 export class BootstrapComponent {
 

diff --git a/AngularLab/Client/containers/home/home.component.ts b/AngularLab/Client/containers/home/home.component.ts
@@ -3,7 +3,67 @@ import { isBrowser } from 'angular2-universal';
 
 @Component({
     selector: 'app-home',
-    template: require('./home.component.html')
+    template: `
+
+<h1>Angular2 Universal & ASP.NET Core starter-kit</h1>
+
+<blockquote>
+    <strong>Enjoy the latest features from .NET Core & Angular2!</strong>
+    <br>
+    For more info check the repo here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a>
+
+    <br><br>
+</blockquote>
+
+
+<div class="row">
+    <div class="col-lg-6">
+        <h2>What does this Starter offer? </h2>
+        <ul>
+            <li>ASP.NET Core 1.0.1</li>
+            <li>
+                Angular 2.* front-end UI framework
+                <ul>
+                    <li><a href="https://github.com/angular/universal">Universal</a> - server-side rendering for SEO, deep-linking, and incredible performance.</li>
+                    <li>NgRx - Redux architecture</li>
+                    <li>HMR State Management - Don't lose your applications state during HMR!</li>
+                    <li>AoT (Ahead-of-time) production compilation for even faster prod builds. (UPCOMING)</li>
+                </ul>
+            </li>
+            <li>
+                The latest TypeScript 2.* features
+                <ul>
+                    <li>
+                        "Path" support example - create your own custom directory paths to avoid ............. directory diving.<br />
+                        Check the <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/tsconfig.json">tsconfig</a> to see how they are setup.
+                    </li>
+                </ul>
+            </li>
+            <li>
+                Webpack 2 (current in Beta)
+                <ul>
+                    <li>TS2 aware path support</li>
+                    <li>Hot Module Reloading/Replacement for an amazing dev experience.</li>
+                    <li>Tree-shaking (UPCOMING)</li>
+                </ul>
+            </li>
+            <li>Bootstrap (ng2-bootstrap) : Bootstrap capable of being rendered even on the server.</li>
+            <li>Unit testing via karma & jasmine.</li>
+            <li>e2e testing via protractor.</li>
+        </ul>
+    </div>
+
+    <div class="col-lg-6">
+        <h2>Having issues?</h2>
+
+        <ul>
+            <li><strong>Issues with this Starter?</strong> <br>Please post an issue here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a><br><br></li>
+            <li><strong>Issues with <u>Universal</u> itself?</strong> <br>Please post an issue here: <a href="https://github.com/angular/universal">Angular Universal repo</a></li>
+        </ul>
+    </div>
+
+</div>
+`
 })
 export class HomeComponent implements OnInit {
 

diff --git a/AngularLab/Client/containers/login/login.component.ts b/AngularLab/Client/containers/login/login.component.ts
@@ -2,7 +2,7 @@ import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Component, OnInit } from '@angular/core';
 
-import { AppState, LOGIN_USER } from 'app';
+import { AppState, LOGIN_USER } from '../../app';
 
 // Demo model
 export class UserModel {

diff --git a/AngularLab/Client/containers/rest-test/rest-test.component.ts b/AngularLab/Client/containers/rest-test/rest-test.component.ts
@@ -4,11 +4,33 @@ import {
     trigger, state, style, transition, animate } from '@angular/core';
 
 import { Http } from '@angular/http';
-import { HttpCacheService } from 'app-shared';
+import { HttpCacheService } from '../../shared';
 
 @Component({
     selector: 'app-rest-test',
-    template: require('./rest-test.component.html'),
+    template: `
+<h1>This is a RestAPI Example (hitting WebAPI in our case)</h1>
+
+<p>Let's get some fake users from Rest:</p>
+
+<p *ngIf="!users"><em>Loading...</em></p>
+
+<table class="table" *ngIf="users">
+    <thead>
+        <tr>
+            <th>User ID</th>
+            <th>Name</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let user of users" [@flyInOut]>
+            <td>{{ user.id }}</td>
+            <td>{{ user.name }}</td>
+        </tr>
+    </tbody>
+</table>
+
+`,
     animations: [
         // Animation example
         // Triggered in the ngFor with [@flyInOut]

diff --git a/AngularLab/scripts/browserify.compiled.js b/AngularLab/scripts/browserify.compiled.js
@@ -204,6 +204,15 @@ function calculateSomething(num1, num2) {
     return num1 + num2;
 }
 exports.calculateSomething = calculateSomething;
-//TODO: Call bootstrap-server to render some markup... 
+//TODO: Call bootstrap-server to render some markup...
+/*
+import Renderer from "../Client/bootstrap-server";
+
+Renderer({
+    origin: "",
+    url: "",
+    absoluteUrl: "",
+    data: {}
+});*/ 
 
 },{}]},{},[3]);
diff --git a/AngularLab/scripts/main.compiled.js b/AngularLab/scripts/main.compiled.js
@@ -206,7 +206,16 @@ function calculateSomething(num1, num2) {
     return num1 + num2;
 }
 exports.calculateSomething = calculateSomething;
-//TODO: Call bootstrap-server to render some markup... 
+//TODO: Call bootstrap-server to render some markup...
+/*
+import Renderer from "../Client/bootstrap-server";
+
+Renderer({
+    origin: "",
+    url: "",
+    absoluteUrl: "",
+    data: {}
+});*/ 
 
 },{}]},{},[3]);
 

diff --git a/AngularLab/tsconfig.json b/AngularLab/tsconfig.json
@@ -17,6 +17,5 @@
     "types": [
       "node"
     ]
-  },
-  "exclude": ["node_modules"]
+  }
 }
diff --git a/AngularLab/type-scripts.compiled/Client/__2.1.1.workaround.js b/AngularLab/type-scripts.compiled/Client/__2.1.1.workaround.js
@@ -0,0 +1,25 @@
+/*
+ * THIS IS TEMPORARY TO PATCH 2.1.1+ Core bugs
+ */
+"use strict";
+/* tslint:disable */
+var __compiler__ = require('@angular/compiler');
+var core_1 = require('@angular/core');
+var patch = false;
+if (!core_1.__core_private__['ViewUtils']) {
+    patch = true;
+    core_1.__core_private__['ViewUtils'] = core_1.__core_private__['view_utils'];
+}
+if (!__compiler__.__compiler_private__) {
+    patch = true;
+    (__compiler__).__compiler_private__ = {
+        SelectorMatcher: __compiler__.SelectorMatcher,
+        CssSelector: __compiler__.CssSelector
+    };
+}
+var __universal__ = require('angular2-platform-node/__private_imports__');
+if (patch) {
+    __universal__.ViewUtils = core_1.__core_private__['view_utils'];
+    __universal__.CssSelector = __compiler__.CssSelector;
+    __universal__.SelectorMatcher = __compiler__.SelectorMatcher;
+}