sstorie / experiments

A repository to capture simple code experiments

Experiments

This repository contains a bunch of stand alone experiments I'm using to evaluate different technologies.

Quick note about security vulnerabilities

The code in this repository uses versions of Angular from a few years ago, and I am not actively updating them to reflect the latest versions of things. As a result there are identified security vulnerabilities in this repository, so be aware should you choose to use this code.

Running these experiments

Most of these experiments require just a simple http server. I use the standard http-server available via npm:

npm install -g http-server

Then when inside one of the folders just run to start the server and disable all caching

> http-server -c-1

Starting up http-server, serving ./
Available on:
  http://10.210.116.141:8080
  http://192.168.56.1:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

You can also use live-server to get similar functionality but with automatic reloading when any of your served pages changes.

The list

Here's an overall list of what's in here:

• angular-window-focus-service - WORK IN PROGRESS - Experimenting with providing an Angular service that detects when the browser window/tab has focus
• reactiveui-simple-user-control - A simple app to help understand how to build user controls with ReactiveUI and WPF
• angular2-animated-notifications-panel - Playing with Angular 2 animations to build a sliding notification panel
• angular2-onpush-form-control - Exploring the effect of using OnPush change detection when subscribing to changes in Angular's FormControl class
• 0-60-with-angular2-and-visual-studio - An example I created to support an AngularMN meetup presentation I gave
• angular2-redux-autologout - An exploration in using redux and rxjs to automatically log a user out after a period of inactivity
• angular2-bootstrap-arguments - A demonstration of how external data can be provided to Angular during the bootstrap process
• angular2-multiple-applications - A simple POC that shows it's possible to bootstrap multiple Angular 2 applications on the same page
• topshelf-angular2-service-webpack - An example showing how to host an Angular2 and WebAPI website in a Windows service using Topshelf and webpack to self-host everything
• topshelf-angular2-service - An example showing how to host an Angular2 and WebAPI website in a Windows service using Topshelf
• angular2-signalr - A relatively simple SignalR server with an Angular 2 client (using a channel/event model)
• angular2-child-injectors - Exploring how angular 2 dependency injection works
• nadel-api-gateway-ts - An implementation of Ben Nadel's ApiGateway example using typescript
• angular2-template - A vanilla template used to create new Angular2 examples

experiments's Issues

Property 'asObservable' does n ot exist on type 'Store<IState>'.

how to solve this issue?

Async Issue

Hi, I've been trying to make the connectionState but it doesn't reflect on the Template

this.connectionState$ = this.channelService.connectionState$
.map((state: ConnectionState) => { return ConnectionState[state]; });

<div>
    <span>Connection state: {{connectionState$ | async}}</span>
</div>

I can check that the connectionState$ changed from console.log but in the template view it's not changing, but when I clicked on a Button that does nothing just a normal button the connectionState$ suddenly shows up.

<button (click)="sample()">Click Me</button>

inside my component
public sample() {
 //nothing in here
}

service register issue angular2 rc5 { provide: 'channel.config', useValue: channelConfig },

ERROR in Error encountered resolving symbol values statically. Calling function
'ChannelConfig', function calls are not supported. Consider replacing the functi
on or lambda with a reference to an exported function, resolving symbol AppModul
e in mypth/src/app/app.module.ts, resolving
symbol AppModule in mypth/app/app.modu
le.ts

Notification Panel throws errors under ng2 (official release)

Assigning animation triggers via @prop="exp" attributes with an expression is invalid. Use property bindings (e.g. [@prop]="exp") or use an attribute without a value (e.g. @prop) instead. ("<div class="container" [ERROR ->]@panelWidthTrigger="expandedState">

Upgrade to angular 4

TypeError: state is undefined

GET http://localhost:4200/app/main.ts 404 (Not Found)

I am using angular CLI and ATOM editor for coding.

I followed your tutorial. My main.ts code is ad follow

import { platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
import {ApiConfig} from './app/api.service';
import {AppComponent} from './app/app.component';


if (environment.production) {
  enableProdMode();
}


export function initApp(apiUrl: string, apiToken:string, apiSession:string){
// make the config ref to start the new running program
  let apiConfig = new ApiConfig();
  apiConfig.apiUrl = apiUrl;
  apiConfig.apiToken = apiToken;
  apiConfig.apiSession = apiSession;

  console.log("Inside the function  api_url :"+apiUrl+" api_token : "+apiToken+"--- sessiontoken : "+apiSession);
}


bootstrap(AppComponent, [
      provide("api.config", {useValue: apiConfig})
  ]); 

 platformBrowserDynamic().bootstrapModule(AppModule);

But i am not able to import

bootstrap(AppComponent, [
      provide("api.config", {useValue: apiConfig})
 ]);

Its not in my @angular package.

---

My Issue is:
I want to pass accesstoken and sessiontoken to angular app. In the first component (App Component) i want to check (by server api) if user is authorised to access the app.

Angular Multiple apps

How to build 2 apps. There is no way to build those

JQuery dependency no in packages or system config?

I don't see JQuery setup as a dependency in the config or packages,json. Also, I do not see how signalr is supposed to be registered in the systemjs.config.js. Am I missing something?

Property 'asObservable' does not exist on type 'Store<IState>'.

ERROR in /..../..../auto-logout.service.ts (19,28): Property 'asObservable' does not exist on type 'Store<IState>'.
webpack: Failed to compile.

messages never update, only displays at end of call in a batch

I've implemented this in Angular 5 but the Task component is never updated but I can see it updating in the console.

private appendStatusUpdate(ev: ChannelEvent): void {
        // Just prepend this to the messages string shown in the textarea
        //
        let date = new Date();
        switch (ev.Data.State) {
            case "starting": {
                this.messages = `${date.toLocaleTimeString()} : starting\n` + this.messages;
                break;
            }

            case "complete": {
                this.messages = `${date.toLocaleTimeString()} : complete\n` + this.messages;
                break;
            }

            default: {

                console.log(ev.Data.PercentComplete);  <--This updates

                /****NOTE : THIS IS NOT UPDATING ******/
                this.messages = `${date.toLocaleTimeString()} : ${ev.Data.State} : ${ev.Data.PercentComplete} % complete\n` + this.messages;    
            }
        }
    }

angular2-child-injectors: another way to write individualChild

Hi SStorie. I appreciate your demos. Thanks for providing them.

This is probably not what you are trying to demonstrate with the angular2-child-injectors project, but another way to solve the problem of the ChildComponent sharing scope:

import {Component} from "angular2/core";

import {IdService} from "./id.service";

@Component( {
    selector: 'child',
    template: `
        <div class="child">
            <span><a href="#" (click)="regenerate()">Regenerate</a></span>
            <span>{{guid}}</span>
        </div>
    `
})
export class ChildComponent {

    guid:string;

    constructor(
        private idService: IdService
    )
    {
        this.regenerate(); 
    }

    regenerate() {
        this.idService.regenerate();
        this.guid = this.idService.id;
    }
}

I was glad I was able to do this without having to perform a deep copy with something strange like this.guid = JSON.parse(JSON.stringify(this.idService.id));

I think this is really interesting too, that you wrote from IndividualChildComponent:

    providers: [
        provide(IdService, { useFactory: () => {
            return () => {
                return new IdService();
            }
        }})
    ]

But there is still something bothering me about them having the individual instances of the same service. Do you think there is a better way?

Good job, thanks again for making things!

How about prefetching data from one of the services ?

Hi.,

What changes would it need to call one of the application services method and bootstrap the same service with the response data on successful response ?

Uncaught Error: The variable '$' or the .hubConnection() function are not defined...please check the SignalR scripts have been loaded properly

How can I resolve this error?

angular2-animated-notifications-panel doesn't work in Firefox

Getting the exception:

EXCEPTION: Error in http://localhost:3000/app/notification/notification.component.html:0:18"platform-browser.umd.js:1900:17
ORIGINAL EXCEPTION: TypeError: Invalid easing 'null'.

in Firefox. Chrome works fine.

Next thing:
If I click the "toggle-button" in firefox, the action is executed in Chrome

Missing package.json

Any chance you could add the package.json file to your signalr example (client)?

Property 'asObservable' does not exist on type 'Store<IState>'

app/auto-logout.service.ts(19,28): error TS2339: Property 'asObservable' does not exist on type 'Store'.

Integrating Autofac

Hi there,

Don't know if you have used Autofac (or use some other IoC container) but I am having trouble using your example and getting DI working.

I have created a repo and a stack overflow question but I thought I'd come to you as your tutorial was great and its all working except for this last peice.

SO:

http://stackoverflow.com/questions/37912330/autofac-injection-of-ihubcontext-signalr-mvc

Repo:

https://github.com/justsayno/signalr-autofac