Алексей Зуев

NotificationModule
Вам нужно обязательно объявить NotificationBellComponent в declarations массиве

@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [NotificationComponent, NotificationBellComponent],
  exports: [NotificationComponent, NotificationBellComponent],  
  providers: [NotificationService]
})

You can export any declarable class — components, directives, and pipes — whether it is declared in this module or in an imported module.

Модули можно экспортировать даже если они не импортированы

You can re-export entire imported modules which effectively re-exports all of their exported classes. A module can even export a module that it doesn't import.

What should I export?

ToolbaModule
1) imports - только для модулей
2) зачем объявлять NotificationBellComponent, если вы его импортируете из модуля NotificationModule
итого ваш модуль

@NgModule({    
    imports: [CommonModule, SharedModule, NotificationModule],
    declarations: [ToolbarComponent],
    exports: [ToolbarComponent]
})

https://plnkr.co/edit/R9pGm6sd8vagd2OepHB4?p=preview

Думаю можно вот таким образом

@Pipe({
  name: 'someRand',
  pure: false
})
export class RandomPipe implements PipeTransform {
  constructor(private  cdRef:ChangeDetectorRef) {}

  pipe: AsyncPipe;
  obs: Observable<string>;

  transform(value:string):any {
    if (!this.pipe) {
      this.pipe = new AsyncPipe(this.cdRef);
      this.obs = new Observable<string>(observer=>{
        observer.next('rand1');
        setTimeout(()=>{
          observer.next('rand@2');
        }, 600)
      });
    }
  
    return this.pipe.transform(this.obs);
  }
}

600 добавил просто ради асинхронности)

Вы можете использовать специально созданный для этого токен APP_INITIALIZER
Благодаря нему приложение не будет стартовать пока не получите данные.
Делается это примерно следующим образом.
Регистрируете в провайдерах глобальный сервис и этот токен

providers: [
  GlobalService,
  {
    provide: APP_INITIALIZER,
    useFactory: (service: GlobalService) => () => service.init(),
    deps: [GlobalService], multi: true
  }
],

Сервис примерно такой

@Injectable()
export class GlobalService {
    data: any;
    constructor(private http: Http) { }
    init(): Promise<any> {
        var promise = this.http.get('src/data.json').map(res => res.json()).toPromise();
        promise.then(data => this.data = data);
        return promise;
    }
}

И потом получаете к примеру в корневом компоненте свои данные

export class AppComponent {
  constructor(private service: GlobalService) {
    console.log(service.data);
  }
}

Живой пример

А как вы пробовали? Там есть параметр цвета. Если хотите свои, то переопределяйте
Пример

Update
Обновленная версия здесь Angular 2 как задать template динамически?

Вы можете попробовать сделать директиву-обертку, которая будет динамически подгружать компонент с шаблоном из вашего html.
html-outlet.ts

import {
  Component,
  Directive,
  Input,
  ComponentFactory,
  ComponentMetadata,
  ComponentResolver,
  ReflectiveInjector,
  ViewContainerRef
} from '@angular/core';

function createComponentFactory(resolver: ComponentResolver, 
           metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
  const cmp = class DynamicComponent { };
  const decoratedCmp = Component(metadata)(cmp);
  
  return resolver.resolveComponent(decoratedCmp);
}

@Directive({
  selector: 'html-outlet'
})
export class HtmlOutlet {
  @Input() html: string;

  constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {}

  ngOnChanges() {
    if (!this.html) return;

    const metadata = new ComponentMetadata({
      selector: 'dynamic-html',
      template: this.html,
    });

    createComponentFactory(this.resolver, metadata)
      .then(factory => {
        const inj = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
        this.vcRef.createComponent(factory, 0, inj, []);
      });
  }
}

И потом в нужном месте используете эту директиву:

<html-outlet [html]="html"></html-outlet>

Полный пример можете посмотреть на plunkr

Как обычно - через event.target
ng-click="testClick($event)"
И в обработчике используем

function testClick(e) {
  console.log(e.target);
}

Angular2 http.get example

Не особо уверен в решении, но оно должно работать. Код асинхронного вызова с api контакта работает отдельно от angular zone. А именно zone уведомляет ангуляр об изменениях. Angular 2 Change Detection Explained. Т.е. придется принудительно вызвать change detection.
AuthView.ts

import {Component, Inject, NgZone} from 'angular2/core'; // import NgZone
...
constructor(@Inject(UsersService) private UsersService, private zone:NgZone) {
  UsersService.users.subscribe(newUsers => {
    this.zone.run(()=> {
      this.currentUsers = newUsers;
    });
  });
  UsersService.fetchUsers();
}

Вам же консоль ошибку показывает, разве всё в порядке?

EXCEPTION: Error during instantiation of LocationStrategy! (RouterLink -> Router -> Location -> LocationStrategy).

Попробуйте в main.ts добавить инициализацию LocationStrategy

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {provide} from 'angular2/core';

bootstrap(App, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy })])
  .catch(err => console.error(err));

Ну или PathLocationStrategy, если хотите без хешей

plnkr.co/edit/ZBJHd3CTFCNzTx6cu8c1

Делайте по-правильному, через /admin/... . Если есть трудности, то почитайте этот ответ с SO.
В самой документации ангуляра есть пример

require('es6-promise!./about/about')('About')

что же это за чудо такое?

Попробуем разобраться. Заходим на документацию к вебпаку тык.

Т.е. эта конструкция require('es6-promise!./about/about') является вызовом загрузки модуля с помощью переопределенного лоадера, а не просто лоадера, который прописан в webpack.config.js этой сборки

loaders: [
  // See: https://github.com/s-panferov/awesome-typescript-loader
  {test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/]},

Идем в исходники es6-promise-loader, который как раз у нас является одной из devDependencies сборки. Там можно маленько посмеяться над комментариями).
Смотрим, что тут, ага - это pitch лоадер, который делает обертку es6-promise. А внутри метод из вебпака ensure, который позволяет отделять chunk и загружать его динамически. В итоге получается примерно такой модуль (пути я порезал маленько)



Т.е. require('es6-promise!./about/about') грубо говоря превращается в функцию с параметром namespace. И вобщем когда придет время сдерживать своё обещание и возвращать модуль, то сработает следующее выражение
require("......app\\about\\about.ts")[namespace]
Require вернет нам как раз наш exports объект, который мы возвращаем в about.ts
export class About {
Смотрим на практике

А к свойству объекта мы уж по namespace сможем легко обратиться. Именно поэтому там 'About'.

Если напишете about, то не видать вам

ngOnInit() {
  console.log('hello `About` component');
}

из компонента

А в опциях boxClass задать не вариант?

Пример карты

Для сохранения порядка можно воспользоваться gulp-order.
Минимизированные файлы можно обрабатывать, но если вдруг захотите исключить их из минимизации, то можно воспользоваться модулем gulp-if. К примеру

var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');

var notMinified = function (file) { 
    return !/\.min\.js/.test(file.path); 
};

gulp.task('task', function() {
  gulp.src('./src/*.js')
    .pipe(gulpif(notMinified , uglify()))
    .pipe(gulp.dest('./dist/'));
});