Imports refactored

src/Squidex/app-config/auto-loader.js

@@ -1,91 +0,0 @@
-'use strict';
-
-   var path = require('path'),
-         fs = require('fs'),
-loaderUtils = require('loader-utils'),
-  SourceMap = require('source-map');
-
-function capitalize(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-};
-
-function applyPlaceholders(str, dirname, filename) {
-    if (!str.length) {
-        return str;
-    }
-
-    return str
-        .split('[file]').join(filename)
-        .split('[File]').join(capitalize(filename));
-};
-
-function loadBaggage(source, sourcemap) {
-    var query = loaderUtils.parseQuery(this.query);
-
-    var srcFilepath = this.resourcePath;
-    var srcFilename = path.basename(srcFilepath, path.extname(srcFilepath));
-    var srcDirpath = path.dirname(srcFilepath);
-    var srcDirname = srcDirpath.split(path.sep).pop();
-
-    this.cacheable();
-
-    if (!Object.keys(query).length) {
-        return source;
-    }
-
-    var componentOffset = source.indexOf('@Component');
-
-    if (componentOffset < 0) {
-        componentOffset = source.indexOf('@Ng2.Component');
-    }
-
-    if (componentOffset < 0) {
-        return source;
-    }
-
-    Object.keys(query).forEach(function (baggageFile) {
-        var baggageVar = query[baggageFile];
-
-        if ((typeof baggageVar === 'string' || baggageVar === true) && baggageFile !== 'noRequire') {
-            baggageFile = applyPlaceholders(baggageFile, srcDirname, srcFilename);
-
-            try {
-                var stats = fs.statSync(path.resolve(srcDirpath, baggageFile));
-
-                if (stats.isFile()) {                        
-                    let replacement = null;
-
-                    if (baggageVar === 'styles') {
-                        if (query.noRequire) {
-                            replacement = '[\'' + baggageFile + '\']';
-                        } else {
-                            replacement = '[require(\'./' + baggageFile + '\')]';
-                        }
-                    } else {
-                        if (query.noRequire) {
-                            replacement = '\'' + baggageFile + '\'';
-                        } else {
-                            replacement = 'require(\'./' + baggageFile + '\')';
-                        }
-                    }
-
-                    var isReplaced = false;
-
-                    source = source.replace(baggageVar, function (match, offset, full) {
-                        if (isReplaced || offset <= componentOffset) {
-                            return baggageVar;
-                        } else {
-                            isReplaced = true;
-
-                            return baggageVar + ': ' + replacement;
-                        }
-                    });
-                }
-            } catch (e) { }
-        }
-    });
-
-    return source;
-};
-
-module.exports = loadBaggage;

src/Squidex/app-config/webpack.config.js

@@ -45,7 +45,7 @@ module.exports = {
         loaders: [
             {
                 test: /\.ts$/,
-                loaders: ['awesome-typescript', 'angular2-router-loader', helpers.root('app-config', 'auto-loader') + '?[file].html=template&[file].scss=styles', 'tslint']
+                loaders: ['awesome-typescript', 'angular2-router-loader', 'angular2-template-loader', 'tslint']
             }, {
                 test: /\.html$/,
                 loader: 'html'

src/Squidex/app-libs/typings/global.d.ts

@@ -1,2 +0,0 @@
-declare var styles: string[];
-declare var template: string;

src/Squidex/app/app.component.ts

@@ -5,11 +5,12 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component } from '@angular/core';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-app',
-    template
+    styleUrls: ['./app.component.scss'],
+    templateUrl: './app.component.html'
 })
 export class AppComponent {
     public isLoaded = false;

src/Squidex/app/app.module.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
-import * as Ng2Browser from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 
@@ -56,9 +56,9 @@ export function configCurrency() {
     return new CurrencyConfig('EUR', '€', true);
 }
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
-        Ng2Browser.BrowserModule,
+        BrowserModule,
         SqxFrameworkModule,
         SqxSharedModule,
         SqxShellModule,

src/Squidex/app/app.routes.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { ModuleWithProviders } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import {
     AppAreaComponent,
@@ -24,7 +24,7 @@ import {
 
 import { SqxFeatureAppsModule } from './features/apps';
 
-export const routes: Ng2Router.Routes = [
+export const routes: Routes = [
     {
         path: '',
         component: HomePageComponent,
@@ -72,4 +72,4 @@ export const routes: Ng2Router.Routes = [
     }
 ];
 
-export const routing: Ng2.ModuleWithProviders = Ng2Router.RouterModule.forRoot(routes, { useHash: false });
+export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: false });

src/Squidex/app/features/apps/module.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { SqxFrameworkModule, SqxSharedModule } from 'shared';
 
@@ -14,18 +14,18 @@ import {
     AppsPageComponent
 } from './declarations';
 
-const routes: Ng2Router.Routes = [
+const routes: Routes = [
     {
         path: '',
         component: AppsPageComponent
     }
 ];
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
         SqxFrameworkModule,
         SqxSharedModule,
-        Ng2Router.RouterModule.forChild(routes)
+        RouterModule.forChild(routes)
     ],
     declarations: [
         AppsPageComponent

src/Squidex/app/features/apps/pages/apps-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import {
     AppsStoreService,
@@ -13,12 +13,12 @@ import {
     TitleService
 } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-apps-page',
-    styles,
+    styleUrls: ['./apps-page.component.scss'],
-    template
+    templateUrl: './apps-page.component.html'
 })
-export class AppsPageComponent implements Ng2.OnInit {
+export class AppsPageComponent implements OnInit {
     public modalDialog = new ModalView();
 
     constructor(

src/Squidex/app/features/content/module.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { SqxFrameworkModule, SqxSharedModule } from 'shared';
 
@@ -14,18 +14,18 @@ import {
     ContentPageComponent
 } from './declarations';
 
-const routes: Ng2Router.Routes = [
+const routes: Routes = [
     {
         path: '',
         component: ContentPageComponent
     }
 ];
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
         SqxFrameworkModule,
         SqxSharedModule,
-        Ng2Router.RouterModule.forChild(routes)
+        RouterModule.forChild(routes)
     ],
     declarations: [
         ContentPageComponent

src/Squidex/app/features/content/pages/content-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component } from '@angular/core';
 
 import {
     AppComponentBase,
@@ -14,10 +14,10 @@ import {
     UsersProviderService
  } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-content-page',
-    styles,
+    styleUrls: ['./content-page.component.scss'],
-    template
+    templateUrl: './content-page.component.html'
 })
 export class ContentPageComponent extends AppComponentBase {
     constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService) {

src/Squidex/app/features/dashboard/module.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { SqxFrameworkModule } from 'shared';
 
@@ -14,17 +14,17 @@ import {
     DashboardPageComponent
 } from './declarations';
 
-const routes: Ng2Router.Routes = [
+const routes: Routes = [
     {
         path: '',
         component: DashboardPageComponent
     }
 ];
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
         SqxFrameworkModule,
-        Ng2Router.RouterModule.forChild(routes)
+        RouterModule.forChild(routes)
     ],
     declarations: [
         DashboardPageComponent

src/Squidex/app/features/dashboard/pages/dashboard-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component } from '@angular/core';
 
 import {
     AppComponentBase,
@@ -14,10 +14,10 @@ import {
     UsersProviderService
  } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-dashboard-page',
-    styles,
+    styleUrls: ['./dashboard-page.component.scss'],
-    template
+    templateUrl: './dashboard-page.component.html'
 })
 export class DashboardPageComponent extends AppComponentBase {
     constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService) {

src/Squidex/app/features/media/module.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { SqxFrameworkModule, SqxSharedModule } from 'shared';
 
@@ -14,18 +14,18 @@ import {
     MediaPageComponent
 } from './declarations';
 
-const routes: Ng2Router.Routes = [
+const routes: Routes = [
     {
         path: '',
         component: MediaPageComponent
     }
 ];
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
         SqxFrameworkModule,
         SqxSharedModule,
-        Ng2Router.RouterModule.forChild(routes)
+        RouterModule.forChild(routes)
     ],
     declarations: [
         MediaPageComponent

src/Squidex/app/features/media/pages/media-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component } from '@angular/core';
 
 import {
     AppComponentBase,
@@ -14,10 +14,10 @@ import {
     UsersProviderService
  } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-media-page',
-    styles,
+    styleUrls: ['./media-page.component.scss'],
-    template
+    templateUrl: './media-page.component.html'
 })
 export class MediaPageComponent extends AppComponentBase {
     constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService) {

src/Squidex/app/features/schemas/module.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { SqxFrameworkModule, SqxSharedModule } from 'shared';
 
@@ -14,18 +14,18 @@ import {
     SchemasPageComponent
 } from './declarations';
 
-const routes: Ng2Router.Routes = [
+const routes: Routes = [
     {
         path: '',
         component: SchemasPageComponent
     }
 ];
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
         SqxFrameworkModule,
         SqxSharedModule,
-        Ng2Router.RouterModule.forChild(routes)
+        RouterModule.forChild(routes)
     ],
     declarations: [
         SchemasPageComponent

src/Squidex/app/features/schemas/pages/schemas-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component } from '@angular/core';
 
 import {
     AppComponentBase,
@@ -14,10 +14,10 @@ import {
     UsersProviderService
  } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-schemas-page',
-    styles,
+    styleUrls: ['./schemas-page.component.scss'],
-    template
+    templateUrl: './schemas-page.component.html'
 })
 export class SchemasPageComponent extends AppComponentBase {
     constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService) {

src/Squidex/app/features/settings/module.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { SqxFrameworkModule, SqxSharedModule } from 'shared';
 
@@ -18,7 +18,7 @@ import {
     SettingsAreaComponent
 } from './declarations';
 
-const routes: Ng2Router.Routes = [
+const routes: Routes = [
     {
         path: '',
         component: SettingsAreaComponent,
@@ -40,11 +40,11 @@ const routes: Ng2Router.Routes = [
     }
 ];
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
         SqxFrameworkModule,
         SqxSharedModule,
-        Ng2Router.RouterModule.forChild(routes)
+        RouterModule.forChild(routes)
     ],
     declarations: [
         ClientComponent,

src/Squidex/app/features/settings/pages/clients/client.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
-import * as Ng2Forms from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
 
 import {
     AccessTokenDto,
@@ -20,10 +20,10 @@ import {
 
 const ESCAPE_KEY = 27;
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-client',
-    styles,
+    styleUrls: ['./client.component.scss'],
-    template,
+    templateUrl: './client.component.html',
     animations: [
         fadeAnimation
     ]
@@ -33,13 +33,13 @@ export class ClientComponent {
 
     public appClientToken: AccessTokenDto;
 
-    @Ng2.Output()
+    @Output()
-    public renamed = new Ng2.EventEmitter<string>();
+    public renamed = new EventEmitter<string>();
 
-    @Ng2.Input()
+    @Input()
     public client: AppClientDto;
 
-    @Ng2.Input()
+    @Input()
     public appName: string;
 
     public modalDialog = new ModalView();
@@ -63,7 +63,7 @@ export class ClientComponent {
 
     constructor(
         private readonly appClientsService: AppClientsService,
-        private readonly formBuilder: Ng2Forms.FormBuilder,
+        private readonly formBuilder: FormBuilder,
         private readonly notifications: NotificationService
     ) {
     }

src/Squidex/app/features/settings/pages/clients/clients-page.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import * as Ng2Forms from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 import {
     AppClientDto,
@@ -24,27 +24,27 @@ function rename(client: AppClientDto, name: string) {
     return new AppClientDto(client.id, client.secret, name, client.expiresUtc);
 };
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-clients-page',
-    styles,
+    styleUrls: ['./clients-page.component.scss'],
-    template
+    templateUrl: './clients-page.component.html'
 })
-export class ClientsPageComponent extends AppComponentBase implements Ng2.OnInit {
+export class ClientsPageComponent extends AppComponentBase implements OnInit {
     public appClients: ImmutableArray<AppClientDto>;
 
     public createForm =
         this.formBuilder.group({
             name: ['',
                 [
-                    Ng2Forms.Validators.required,
+                    Validators.required,
-                    Ng2Forms.Validators.maxLength(40),
+                    Validators.maxLength(40),
-                    Ng2Forms.Validators.pattern('[a-z0-9]+(\-[a-z0-9]+)*')
+                    Validators.pattern('[a-z0-9]+(\-[a-z0-9]+)*')
                 ]]
         });
 
     constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService,
         private readonly appClientsService: AppClientsService,
-        private readonly formBuilder: Ng2Forms.FormBuilder
+        private readonly formBuilder: FormBuilder
     ) {
         super(apps, notifications, users);
     }

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import {
@@ -54,12 +54,12 @@ function changePermission(contributor: AppContributorDto, permission: string): A
     return new AppContributorDto(contributor.contributorId, permission);
 }
 
-@Ng2.Component({
+@Component({
-    selector: 'sqx-contributor-page',
+    selector: 'sqx-contributors-page',
-    styles,
+    styleUrls: ['./contributors-page.component.scss'],
-    template
+    templateUrl: './contributors-page.component.html'
 })
-export class ContributorsPageComponent extends AppComponentBase implements Ng2.OnInit {
+export class ContributorsPageComponent extends AppComponentBase implements OnInit {
     public appContributors = ImmutableArray.empty<AppContributorDto>();
 
     public currentUserId: string;

src/Squidex/app/features/settings/pages/languages/languages-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import {
     AddAppLanguageDto,
@@ -21,12 +21,12 @@ import {
     UsersProviderService
 } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-languages-page',
-    styles,
+    styleUrls: ['./languages-page.component.scss'],
-    template
+    templateUrl: './languages-page.component.html'
 })
-export class LanguagesPageComponent extends AppComponentBase implements Ng2.OnInit {
+export class LanguagesPageComponent extends AppComponentBase implements OnInit {
     public allLanguages: LanguageDto[] = [];
     public appLanguages = ImmutableArray.empty<AppLanguageDto>();
 

src/Squidex/app/features/settings/settings-area.component.ts

@@ -5,12 +5,12 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component } from '@angular/core';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-settings-area',
-    styles,
+    styleUrls: ['./settings-area.component.scss'],
-    template
+    templateUrl: './settings-area.component.html'
 })
 export class SettingsAreaComponent {
 

src/Squidex/app/framework/angular/animations.ts

@@ -5,50 +5,57 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import {
+    animate,
+    AnimationEntryMetadata,
+    state,
+    style,
+    transition,
+    trigger
+} from '@angular/core';
 
-export function buildFadeAnimation(name = 'fade', timing = '200ms'): Ng2.AnimationEntryMetadata {
+export function buildFadeAnimation(name = 'fade', timing = '200ms'): AnimationEntryMetadata {
-    return Ng2.trigger(
+    return trigger(
         name, [
-            Ng2.transition(':enter', [
+            transition(':enter', [
-                Ng2.style({ opacity: 0 }),
+                style({ opacity: 0 }),
-                Ng2.animate(timing, Ng2.style({ opacity: 1 }))
+                animate(timing, style({ opacity: 1 }))
             ]),
-            Ng2.transition(':leave', [
+            transition(':leave', [
-                Ng2.style({ opacity: 1 }),
+                style({ opacity: 1 }),
-                Ng2.animate(timing, Ng2.style({ opacity: 0 }))
+                animate(timing, style({ opacity: 0 }))
             ]),
-            Ng2.state('true',
+            state('true',
-                Ng2.style({ opacity: 1 })
+                style({ opacity: 1 })
             ),
-            Ng2.state('false',
+            state('false',
-                Ng2.style({ opacity: 0 })
+                style({ opacity: 0 })
             ),
-            Ng2.transition('1 => 0', Ng2.animate(timing)),
+            transition('1 => 0', animate(timing)),
-            Ng2.transition('0 => 1', Ng2.animate(timing))
+            transition('0 => 1', animate(timing))
         ]
     );
 };
 
-export function buildHeightAnimation(name = 'height', timing = '200ms'): Ng2.AnimationEntryMetadata {
+export function buildHeightAnimation(name = 'height', timing = '200ms'): AnimationEntryMetadata {
-    return Ng2.trigger(
+    return trigger(
         name, [
-            Ng2.transition(':enter', [
+            transition(':enter', [
-                Ng2.style({ height: '0px' }),
+                style({ height: '0px' }),
-                Ng2.animate(timing, Ng2.style({ height: '*' }))
+                animate(timing, style({ height: '*' }))
             ]),
-            Ng2.transition(':leave', [
+            transition(':leave', [
-                Ng2.style({ height: '*' }),
+                style({ height: '*' }),
-                Ng2.animate(timing, Ng2.style({ height: '0px' }))
+                animate(timing, style({ height: '0px' }))
             ]),
-            Ng2.state('true',
+            state('true',
-                Ng2.style({ height: '*' })
+                style({ height: '*' })
             ),
-            Ng2.state('false',
+            state('false',
-                Ng2.style({ height: '0px' })
+                style({ height: '0px' })
             ),
-            Ng2.transition('1 => 0', Ng2.animate(timing)),
+            transition('1 => 0', animate(timing)),
-            Ng2.transition('0 => 1', Ng2.animate(timing))
+            transition('0 => 1', animate(timing))
         ]
     );
 };

src/Squidex/app/framework/angular/autocomplete.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
-import * as Ng2Forms from '@angular/forms';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, Subscription } from 'rxjs';
 
 export interface AutocompleteSource {
@@ -32,35 +32,35 @@ const KEY_DOWN = 40;
 const NOOP = () => { };
 
 export const SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR: any = {
-    provide: Ng2Forms.NG_VALUE_ACCESSOR,
+    provide: NG_VALUE_ACCESSOR,
-    useExisting: Ng2.forwardRef(() => {
+    useExisting: forwardRef(() => {
         return AutocompleteComponent;
     }),
     multi: true
 };
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-autocomplete',
-    styles,
+    styleUrls: ['./autocomplete.component.scss'],
-    template,
+    templateUrl: './autocomplete.component.html',
     providers: [SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR]
 })
-export class AutocompleteComponent implements Ng2Forms.ControlValueAccessor, Ng2.OnDestroy {
+export class AutocompleteComponent implements ControlValueAccessor, OnDestroy {
     private subscription: Subscription | null = null;
     private lastQuery: string | null;
     private changeCallback: (value: any) => void = NOOP;
     private touchedCallback: () => void = NOOP;
 
-    @Ng2.Input()
+    @Input()
     public source: AutocompleteSource;
 
-    @Ng2.Input()
+    @Input()
     public inputName: string;
 
     public items: AutocompleteItem[] = [];
     public itemSelection = -1;
 
-    public queryInput = new Ng2Forms.FormControl();
+    public queryInput = new FormControl();
 
     constructor() {
         this.queryInput.valueChanges.delay(100).subscribe(query => this.loadItems(query));

src/Squidex/app/framework/angular/cloak.directive.ts

@@ -5,13 +5,13 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, ElementRef, OnInit } from '@angular/core';
 
-@Ng2.Directive({
+@Directive({
     selector: '.sqx-cloak'
 })
-export class CloakDirective implements Ng2.OnInit {
+export class CloakDirective implements OnInit {
-    constructor(private readonly element: Ng2.ElementRef) { }
+    constructor(private readonly element: ElementRef) { }
 
     public ngOnInit() {
         this.element.nativeElement.classList.remove('sqx-cloak');

src/Squidex/app/framework/angular/color-picker.component.ts

@@ -5,40 +5,40 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output } from '@angular/core';
 
 import { Color } from './../utils/color';
 import { ColorPalette } from './../utils/color-palette';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-color-picker',
-    styles,
+    styleUrls: ['./color-picker.component.scss'],
-    template
+    templateUrl: './color-picker.component.html'
 })
-export class ColorPickerComponent implements Ng2.OnChanges {
+export class ColorPickerComponent implements OnChanges {
     private selectedColorValue = new Color(0, 0, 0);
 
-    @Ng2.Output()
+    @Output()
-    public colorChange = new Ng2.EventEmitter();
+    public colorChange = new EventEmitter();
 
-    @Ng2.Input()
+    @Input()
     public color: string | number | Color;
 
-    @Ng2.Input()
+    @Input()
     public palette = ColorPalette.colors();
 
-    @Ng2.Input()
+    @Input()
     public isOpen = false;
 
     public get selectedColor(): Color {
         return this.selectedColorValue;
     }
 
-    constructor(private readonly element: Ng2.ElementRef) {
+    constructor(private readonly element: ElementRef) {
         this.updateColor();
     }
 
-    @Ng2.HostListener('document:click', ['$event.target'])
+    @HostListener('document:click', ['$event.target'])
     public onClick(targetElement: any) {
         const clickedInside = this.element.nativeElement.contains(targetElement);
 
@@ -47,7 +47,7 @@ export class ColorPickerComponent implements Ng2.OnChanges {
         }
     }
 
-    public ngOnChanges(changes: Ng2.SimpleChanges) {
+    public ngOnChanges() {
         this.updateColor();
     }
 

src/Squidex/app/framework/angular/copy.directive.ts

@@ -5,16 +5,16 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, HostListener, Input } from '@angular/core';
 
-@Ng2.Directive({
+@Directive({
     selector: '[sqxCopy]'
 })
 export class CopyDirective {
-    @Ng2.Input('sqxCopy')
+    @Input('sqxCopy')
     public inputElement: any;
 
-    @Ng2.HostListener('click')
+    @HostListener('click')
     public onClick() {
         if (this.inputElement) {
             this.copyToClipbord(this.inputElement);

src/Squidex/app/framework/angular/date-time.pipes.ts

@@ -5,12 +5,12 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Pipe } from '@angular/core';
 
 import { DateTime } from './../utils/date-time';
 import { Duration } from './../utils/duration';
 
-@Ng2.Pipe({
+@Pipe({
     name: 'shortDate'
 })
 export class ShortDatePipe {
@@ -19,7 +19,7 @@ export class ShortDatePipe {
     }
 }
 
-@Ng2.Pipe({
+@Pipe({
     name: 'month'
 })
 export class MonthPipe {
@@ -28,7 +28,7 @@ export class MonthPipe {
     }
 }
 
-@Ng2.Pipe({
+@Pipe({
     name: 'dayOfWeek'
 })
 export class DayOfWeekPipe {
@@ -37,7 +37,7 @@ export class DayOfWeekPipe {
     }
 }
 
-@Ng2.Pipe({
+@Pipe({
     name: 'day'
 })
 export class DayPipe {
@@ -46,7 +46,7 @@ export class DayPipe {
     }
 }
 
-@Ng2.Pipe({
+@Pipe({
     name: 'shortTime'
 })
 export class ShortTimePipe {
@@ -55,7 +55,7 @@ export class ShortTimePipe {
     }
 }
 
-@Ng2.Pipe({
+@Pipe({
     name: 'duration'
 })
 export class DurationPipe {

src/Squidex/app/framework/angular/drag-model.directive.ts

@@ -5,12 +5,12 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, Renderer }from '@angular/core';
 
 import { DragService } from './../services/drag.service';
 import { Vec2 } from './../utils/vec2';
 
-@Ng2.Directive({
+@Directive({
     selector: '[sqxDragModel]'
 })
 export class DragModelDirective {
@@ -20,17 +20,17 @@ export class DragModelDirective {
     private mouseUpSubscription: Function | null;
     private clonedElement: HTMLElement | null;
 
-    @Ng2.Input('sqxDragModel')
+    @Input('sqxDragModel')
     public model: any;
 
     constructor(
-        private readonly element: Ng2.ElementRef,
+        private readonly element: ElementRef,
-        private readonly renderer: Ng2.Renderer,
+        private readonly renderer: Renderer,
         private readonly dragService: DragService
     ) {
     }
 
-    @Ng2.HostListener('mousedown', ['$event'])
+    @HostListener('mousedown', ['$event'])
     public onMouseDown(event: MouseEvent) {
         this.startOffset = new Vec2(event.offsetX, event.offsetY);
         this.startPosition = new Vec2(event.clientX, event.clientY);

src/Squidex/app/framework/angular/focus-on-change.directive.spec.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { ElementRef, Renderer } from '@angular/core';
 
 import { FocusOnChangeDirective } from './focus-on-change.directive';
 
@@ -29,11 +29,11 @@ describe('FocusOnChangeDirective', () => {
             }
         };
 
-        const element: Ng2.ElementRef = {
+        const element: ElementRef = {
             nativeElement: {}
         };
 
-        new FocusOnChangeDirective(element, renderer as Ng2.Renderer).ngOnChanges({});
+        new FocusOnChangeDirective(element, renderer as Renderer).ngOnChanges({});
 
         expect(calledMethods).toEqual([]);
 

src/Squidex/app/framework/angular/focus-on-change.directive.ts

@@ -5,25 +5,25 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, ElementRef, Input, OnChanges, Renderer }from '@angular/core';
 
-@Ng2.Directive({
+@Directive({
     selector: '[sqxFocusOnChange]'
 })
-export class FocusOnChangeDirective implements Ng2.OnChanges {
+export class FocusOnChangeDirective implements OnChanges {
-    @Ng2.Input()
+    @Input()
     public sqxFocusOnChange: any;
 
-    @Ng2.Input()
+    @Input()
     public select: boolean;
 
     constructor(
-        private readonly elementRef: Ng2.ElementRef,
+        private readonly elementRef: ElementRef,
-        private readonly renderer: Ng2.Renderer
+        private readonly renderer: Renderer
     ) {
     }
 
-    public ngOnChanges(changes: { [key: string]: Ng2.SimpleChange }) {
+    public ngOnChanges() {
         setTimeout(() => {
             this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
 

src/Squidex/app/framework/angular/focus-on-init.directive.spec.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { ElementRef, Renderer } from '@angular/core';
 
 import { FocusOnInitDirective } from './focus-on-init.directive';
 
@@ -29,11 +29,11 @@ describe('FocusOnInitDirective', () => {
             }
         };
 
-        const element: Ng2.ElementRef = {
+        const element: ElementRef = {
             nativeElement: {}
         };
 
-        new FocusOnInitDirective(element, renderer as Ng2.Renderer).ngOnInit();
+        new FocusOnInitDirective(element, renderer as Renderer).ngOnInit();
 
         expect(calledMethods).toEqual([]);
 

src/Squidex/app/framework/angular/focus-on-init.directive.ts

@@ -5,18 +5,18 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, ElementRef, Input, OnInit, Renderer } from '@angular/core';
 
-@Ng2.Directive({
+@Directive({
     selector: '[sqxFocusOnInit]'
 })
-export class FocusOnInitDirective implements Ng2.OnInit {
+export class FocusOnInitDirective implements OnInit {
-    @Ng2.Input()
+    @Input()
     public select: boolean;
 
     constructor(
-        private readonly elementRef: Ng2.ElementRef,
+        private readonly elementRef: ElementRef,
-        private readonly renderer: Ng2.Renderer
+        private readonly renderer: Renderer
     ) {
     }
 

src/Squidex/app/framework/angular/http-utils.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Http from '@angular/http';
+import { Response } from '@angular/http';
 import { Observable } from 'rxjs';
 
 export class EntityCreatedDto {
@@ -49,10 +49,10 @@ export class ErrorDto {
     }
 }
 
-export function handleError(message: string, error: Ng2Http.Response | any) {
+export function handleError(message: string, error: Response | any) {
     let result = new ErrorDto(500, message);
 
-    if (error instanceof Ng2Http.Response && error.status !== 500) {
+    if (error instanceof Response && error.status !== 500) {
         const body = error.json();
 
         result = new ErrorDto(error.status, body.message, body.details);

src/Squidex/app/framework/angular/image-drop.directive.ts

@@ -5,33 +5,33 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, ElementRef, HostListener, Renderer } from '@angular/core';
 
 import { DragService } from './../services/drag.service';
 import { Vec2 } from './../utils/vec2';
 
-@Ng2.Directive({
+@Directive({
     selector: '.sqx-image-drop'
 })
 export class ImageDropDirective {
     constructor(
-        private readonly element: Ng2.ElementRef,
+        private readonly element: ElementRef,
-        private readonly renderer: Ng2.Renderer,
+        private readonly renderer: Renderer,
         private readonly dragService: DragService
     ) {
     }
 
-    @Ng2.HostListener('dragenter', ['$event'])
+    @HostListener('dragenter', ['$event'])
     public onDragEnter(event: DragDropEvent) {
         this.tryStopEvent(event);
     }
 
-    @Ng2.HostListener('dragover', ['$event'])
+    @HostListener('dragover', ['$event'])
     public onDragOver(event: DragDropEvent) {
         this.tryStopEvent(event);
     }
 
-    @Ng2.HostListener('drop', ['$event'])
+    @HostListener('drop', ['$event'])
     public onDrop(event: DragDropEvent) {
         const image = this.findImage(event);
 

src/Squidex/app/framework/angular/modal-view.directive.ts

@@ -5,26 +5,26 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, EmbeddedViewRef, Input, OnChanges, OnDestroy, OnInit, Renderer, TemplateRef, ViewContainerRef } from '@angular/core';
 
 import { ModalView } from './../utils/modal-view';
 
-@Ng2.Directive({
+@Directive({
     selector: '[sqxModalView]'
 })
-export class ModalViewDirective implements Ng2.OnChanges, Ng2.OnInit, Ng2.OnDestroy {
+export class ModalViewDirective implements OnChanges, OnInit, OnDestroy {
     private subscription: any | null;
     private isEnabled = true;
     private clickHandler: Function | null;
-    private renderedView: Ng2.EmbeddedViewRef<any> | null;
+    private renderedView: EmbeddedViewRef<any> | null;
 
-    @Ng2.Input('sqxModalView')
+    @Input('sqxModalView')
     public modalView: ModalView;
 
     constructor(
-        private readonly templateRef: Ng2.TemplateRef<any>,
+        private readonly templateRef: TemplateRef<any>,
-        private readonly renderer: Ng2.Renderer,
+        private readonly renderer: Renderer,
-        private readonly viewContainer: Ng2.ViewContainerRef
+        private readonly viewContainer: ViewContainerRef
     ) {
     }
 

src/Squidex/app/framework/angular/money.pipe.ts

@@ -5,11 +5,11 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Pipe } from '@angular/core';
 
 import { CurrencyConfig, DecimalSeparatorConfig } from './../configurations';
 
-@Ng2.Pipe({
+@Pipe({
     name: 'money'
 })
 export class MoneyPipe {

src/Squidex/app/framework/angular/panel-container.directive.ts

@@ -5,24 +5,24 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
 
 import { PanelService } from './../services/panel.service';
 
-@Ng2.Directive({
+@Directive({
     selector: '.panel-container'
 })
-export class PanelContainerDirective implements Ng2.OnInit, Ng2.OnDestroy {
+export class PanelContainerDirective implements OnInit, OnDestroy {
     private subscription: any;
     private panelsSize: number | null = null;
 
     constructor(
-        private readonly element: Ng2.ElementRef,
+        private readonly element: ElementRef,
         private readonly panels: PanelService
     ) {
     }
 
-    @Ng2.HostListener('window:resize')
+    @HostListener('window:resize')
     public onResize() {
         this.resize();
     }

src/Squidex/app/framework/angular/panel.directive.ts

@@ -5,17 +5,17 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, ElementRef, OnDestroy, OnInit, Renderer } from '@angular/core';
 
 import { PanelService } from './../services/panel.service';
 
-@Ng2.Directive({
+@Directive({
     selector: '.panel'
 })
-export class PanelDirective implements Ng2.OnInit, Ng2.OnDestroy {
+export class PanelDirective implements OnInit, OnDestroy {
     constructor(
-        private readonly element: Ng2.ElementRef,
+        private readonly element: ElementRef,
-        private readonly renderer: Ng2.Renderer,
+        private readonly renderer: Renderer,
         private readonly panels: PanelService
     ) {
     }

src/Squidex/app/framework/angular/scroll-active.directive.ts

@@ -5,20 +5,20 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
 
-@Ng2.Directive({
+@Directive({
     selector: '[sqxScrollActive]'
 })
-export class ScrollActiveDirective implements Ng2.OnChanges {
+export class ScrollActiveDirective implements OnChanges {
-    @Ng2.Input('sqxScrollActive')
+    @Input('sqxScrollActive')
     public isActive = false;
 
-    @Ng2.Input()
+    @Input()
     public container: HTMLElement;
 
     constructor(
-        private readonly element: Ng2.ElementRef
+        private readonly element: ElementRef
     ) {
     }
 

src/Squidex/app/framework/angular/shortcut.component.spec.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgZone } from '@angular/core';
 
 import { ShortcutService } from './../';
 import { ShortcutComponent } from './shortcut.component';
@@ -18,27 +18,27 @@ describe('ShortcutComponent', () => {
     });
 
     it('should instantiate', () => {
-        const shortcutComponent = new ShortcutComponent(shortcutService, new Ng2.NgZone({}));
+        const shortcutComponent = new ShortcutComponent(shortcutService, new NgZone({}));
 
         expect(shortcutComponent).toBeDefined();
     });
 
     it('should init without keys', () => {
-        const shortcutComponent = new ShortcutComponent(shortcutService, new Ng2.NgZone({}));
+        const shortcutComponent = new ShortcutComponent(shortcutService, new NgZone({}));
 
         shortcutComponent.keys = null!;
         shortcutComponent.ngOnInit();
     });
 
     it('should destroy without keys', () => {
-        const shortcutComponent = new ShortcutComponent(shortcutService, new Ng2.NgZone({}));
+        const shortcutComponent = new ShortcutComponent(shortcutService, new NgZone({}));
 
         shortcutComponent.keys = null!;
         shortcutComponent.ngOnDestroy();
     });
 
     it('should raise event when triggered', () => {
-        const shortcutComponent = new ShortcutComponent(shortcutService, new Ng2.NgZone({}));
+        const shortcutComponent = new ShortcutComponent(shortcutService, new NgZone({}));
 
         let isTriggered = false;
 
@@ -52,7 +52,7 @@ describe('ShortcutComponent', () => {
     });
 
     it('should not raise event when triggered but disabled', () => {
-        const shortcutComponent = new ShortcutComponent(shortcutService, new Ng2.NgZone({}));
+        const shortcutComponent = new ShortcutComponent(shortcutService, new NgZone({}));
 
         let isTriggered = false;
 
@@ -67,7 +67,7 @@ describe('ShortcutComponent', () => {
     });
 
     it('should not raise event when triggered but destroyed', () => {
-        const shortcutComponent = new ShortcutComponent(shortcutService, new Ng2.NgZone({}));
+        const shortcutComponent = new ShortcutComponent(shortcutService, new NgZone({}));
 
         let isTriggered = false;
 

src/Squidex/app/framework/angular/shortcut.component.ts

@@ -5,29 +5,29 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
 
 import { ShortcutService } from './../services/shortcut.service';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-shortcut',
     template: ''
 })
-export class ShortcutComponent implements Ng2.OnInit, Ng2.OnDestroy {
+export class ShortcutComponent implements OnInit, OnDestroy {
-    @Ng2.Input()
+    @Input()
     public keys: string;
 
-    @Ng2.Input()
+    @Input()
     public disabled: boolean;
 
-    @Ng2.Output()
+    @Output()
-    public trigger = new Ng2.EventEmitter();
+    public trigger = new EventEmitter();
 
     private lastKeys: string;
 
     constructor(
         private readonly shortcutService: ShortcutService,
-        private readonly zone: Ng2.NgZone
+        private readonly zone: NgZone
     ) {
     }
 

src/Squidex/app/framework/angular/slider.component.ts

@@ -5,40 +5,40 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, Renderer, ViewChild } from '@angular/core';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-slider',
-    styles,
+    styleUrls: ['./slider.component.scss'],
-    template
+    templateUrl: './slider.component.html'
 })
-export class SliderComponent implements Ng2.OnChanges {
+export class SliderComponent implements OnChanges {
     private mouseMoveSubscription: Function | null;
     private mouseUpSubscription: Function | null;
     private centerStartOffset = 0;
     private startValue: number;
 
-    @Ng2.ViewChild('bar')
+    @ViewChild('bar')
-    public bar: Ng2.ElementRef;
+    public bar: ElementRef;
 
-    @Ng2.ViewChild('thumb')
+    @ViewChild('thumb')
-    public thumb: Ng2.ElementRef;
+    public thumb: ElementRef;
 
-    @Ng2.Input()
+    @Input()
     public min = 0;
 
-    @Ng2.Input()
+    @Input()
     public max = 100;
 
-    @Ng2.Input()
+    @Input()
     public value: number;
 
-    @Ng2.Output()
+    @Output()
-    public valueChange = new Ng2.EventEmitter();
+    public valueChange = new EventEmitter();
 
-    constructor(private readonly renderer: Ng2.Renderer) { }
+    constructor(private readonly renderer: Renderer) { }
 
-    public ngOnChanges(changes: Ng2.SimpleChanges) {
+    public ngOnChanges() {
         const relativeValue = (this.value - this.min) / (this.max - this.min);
 
         this.setThumbPosition(relativeValue);

src/Squidex/app/framework/angular/spinner.component.ts

@@ -5,16 +5,16 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, ElementRef } from '@angular/core';
 
 declare var Spinner: any;
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-spinner',
     template: ''
 })
 export class SpinnerComponent {
-    constructor(element: Ng2.ElementRef) {
+    constructor(element: ElementRef) {
         const mediumOptions = {
             lines: 12,
             length: 5,

src/Squidex/app/framework/angular/title.component.ts

@@ -5,22 +5,22 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 
 import { TitleService } from './../services/title.service';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-title',
     template: ''
 })
-export class TitleComponent implements Ng2.OnChanges {
+export class TitleComponent implements OnChanges {
-    @Ng2.Input()
+    @Input()
     public message: any;
 
-    @Ng2.Input()
+    @Input()
     public parameter: string;
 
-    @Ng2.Input()
+    @Input()
     public value: any;
 
     constructor(

src/Squidex/app/framework/angular/user-report.component.ts

@@ -5,17 +5,17 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnInit, Renderer } from '@angular/core';
 
 import { UserReportConfig } from './../configurations';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-user-report',
     template: ''
 })
-export class UserReportComponent implements Ng2.OnInit {
+export class UserReportComponent implements OnInit {
     constructor(config: UserReportConfig,
-        private readonly renderer: Ng2.Renderer
+        private readonly renderer: Renderer
     ) {
         window['_urq'] = window['_urq'] || [];
         window['_urq'].push(['initSite', config.siteId]);

src/Squidex/app/framework/angular/validators.spec.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Forms from '@angular/forms';
+import { FormControl } from '@angular/forms';
 
 import { Validators } from './../';
 
@@ -17,7 +17,7 @@ describe('Validators', () => {
     });
 
     it('should return error when not a number', () => {
-        const input = new Ng2Forms.FormControl('text');
+        const input = new FormControl('text');
 
         const error = validateBetween(input);
 
@@ -25,7 +25,7 @@ describe('Validators', () => {
     });
 
     it('should return error if less than minimum setting', () => {
-        const input = new Ng2Forms.FormControl(5);
+        const input = new FormControl(5);
 
         const error = validateBetween(input);
 
@@ -33,7 +33,7 @@ describe('Validators', () => {
     });
 
     it('should return error if greater than maximum setting', () => {
-        const input = new Ng2Forms.FormControl(300);
+        const input = new FormControl(300);
 
         const error = validateBetween(input);
 
@@ -41,7 +41,7 @@ describe('Validators', () => {
     });
 
     it('should return empty value when value is valid', () => {
-        const input = new Ng2Forms.FormControl(50);
+        const input = new FormControl(50);
 
         const error = validateBetween(input);
 

src/Squidex/app/framework/angular/validators.ts

@@ -5,11 +5,11 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Forms from '@angular/forms';
+import { AbstractControl } from '@angular/forms';
 
 export class Validators {
     public static between(minValue: number, maxValue: number) {
-        return (control: Ng2Forms.AbstractControl): { [key: string]: any } => {
+        return (control: AbstractControl): { [key: string]: any } => {
             const n: number = control.value;
 
             if (typeof n !== 'number') {

src/Squidex/app/framework/configurations.ts

@@ -5,9 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 
-@Ng2.Injectable()
+@Injectable()
 export class ApiUrlConfig {
     public readonly value: string;
 
@@ -28,22 +28,22 @@ export class ApiUrlConfig {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class DecimalSeparatorConfig {
     constructor(public readonly value: string) { }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class ProductionModeConfig {
     constructor(public readonly isProductionMode: boolean) { }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class UserReportConfig {
     constructor(public readonly siteId: string) { }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class CurrencyConfig {
     constructor(
         public readonly code: string,

src/Squidex/app/framework/module.ts

@@ -5,11 +5,11 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Common from '@angular/common';
+import { CommonModule } from '@angular/common';
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
-import * as Ng2Forms from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as Ng2Http from '@angular/http';
+import { HttpModule } from '@angular/http';
-import * as Ng2Router from '@angular/router';
+import { RouterModule } from '@angular/router';
 
 import {
     AutocompleteComponent,
@@ -38,13 +38,13 @@ import {
     UserReportComponent
 } from './declarations';
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
-        Ng2Http.HttpModule,
+        HttpModule,
-        Ng2Forms.FormsModule,
+        FormsModule,
-        Ng2Forms.ReactiveFormsModule,
+        CommonModule,
-        Ng2Common.CommonModule,
+        ReactiveFormsModule,
-        Ng2Router.RouterModule
+        RouterModule
     ],
     declarations: [
         AutocompleteComponent,
@@ -97,11 +97,11 @@ import {
         SpinnerComponent,
         TitleComponent,
         UserReportComponent,
-        Ng2Http.HttpModule,
+        HttpModule,
-        Ng2Forms.FormsModule,
+        FormsModule,
-        Ng2Forms.ReactiveFormsModule,
+        CommonModule,
-        Ng2Common.CommonModule,
+        ReactiveFormsModule,
-        Ng2Router.RouterModule
+        RouterModule
     ]
 })
 export class SqxFrameworkModule { }

src/Squidex/app/framework/services/clipboard.service.ts

@@ -5,14 +5,14 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 export const ClipboardServiceFactory = () => {
     return new ClipboardService();
 };
 
-@Ng2.Injectable()
+@Injectable()
 export class ClipboardService {
     private readonly text$ = new BehaviorSubject<string>('');
 

src/Squidex/app/framework/services/drag.service.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 
 import { Vec2 } from './../utils/vec2';
@@ -16,7 +16,7 @@ export const DragServiceFactory = () => {
     return new DragService();
 };
 
-@Ng2.Injectable()
+@Injectable()
 export class DragService {
     private readonly dropEvent = new Subject<DropEvent>();
 

src/Squidex/app/framework/services/local-store.service.ts

@@ -5,13 +5,13 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 
 export const LocalStoreServiceFactory = () => {
     return new LocalStoreService();
 };
 
-@Ng2.Injectable()
+@Injectable()
 export class LocalStoreService {
     private readonly fallback = {};
     private store: any = localStorage;

src/Squidex/app/framework/services/notification.service.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 
 export const NotificationServiceFactory = () => {
@@ -29,7 +29,7 @@ export class Notification {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class NotificationService {
     private readonly notificationsStream$ = new Subject<Notification>();
 

src/Squidex/app/framework/services/panel.service.ts

@@ -5,14 +5,14 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable, Renderer } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 
 export const PanelServiceFactory = () => {
     return new PanelService();
 };
 
-@Ng2.Injectable()
+@Injectable()
 export class PanelService {
     private readonly elements: any[] = [];
     private readonly changed$ = new Subject<number>();
@@ -21,17 +21,17 @@ export class PanelService {
         return this.changed$;
     }
 
-    public push(element: any, renderer: Ng2.Renderer) {
+    public push(element: any, renderer: Renderer) {
         this.elements.push(element);
         this.update(renderer);
     }
 
-    public pop(element: any, renderer: Ng2.Renderer) {
+    public pop(element: any, renderer: Renderer) {
         this.elements.splice(-1, 1);
         this.update(renderer);
     }
 
-    private update(renderer: Ng2.Renderer) {
+    private update(renderer: Renderer) {
         let currentPosition = 0;
         let currentLayer = this.elements.length * 10;
 

src/Squidex/app/framework/services/shortcut.service.ts

@@ -5,13 +5,13 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 
 export const ShortcutServiceFactory = () => {
     return new ShortcutService();
 };
 
-@Ng2.Injectable()
+@Injectable()
 export class ShortcutService {
     public on(keys: string, callback: (e: KeyboardEvent, combo: string) => void) {
         return Mousetrap.bind(keys, (event, combo) => {

src/Squidex/app/framework/services/title.service.ts

@@ -5,9 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 
-@Ng2.Injectable()
+@Injectable()
 export class TitlesConfig {
     constructor(
         public readonly value: { [key: string]: string },
@@ -19,7 +19,7 @@ export const TitleServiceFactory = (titles: TitlesConfig) => {
     return new TitleService(titles);
 };
 
-@Ng2.Injectable()
+@Injectable()
 export class TitleService {
     constructor(private readonly titles: TitlesConfig) { }
 

src/Squidex/app/polyfills.ts

@@ -5,13 +5,20 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import 'core-js/es6';
+import 'core-js/es6/array';
-import 'core-js/es7/reflect';
+import 'core-js/es6/date';
-
+import 'core-js/es6/function';
-require('zone.js/dist/zone');
+import 'core-js/es6/map';
+import 'core-js/es6/math';
+import 'core-js/es6/number';
+import 'core-js/es6/object';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/reflect';
+import 'core-js/es6/regexp';
+import 'core-js/es6/set';
+import 'core-js/es6/string';
+import 'core-js/es6/symbol';
 
-if (process.env.ENV !== 'production') {
+import 'core-js/es7/reflect';
-    Error['stackTraceLimit'] = Infinity;
+import 'zone.js/dist/zone';
-
-    require('zone.js/dist/long-stack-trace-zone');
-}

src/Squidex/app/shared/components/app-form.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import * as Ng2Forms from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 
 import { fadeAnimation } from 'framework';
 
@@ -15,31 +15,32 @@ import { AppDto, CreateAppDto } from './../services/apps.service';
 
 const FALLBACK_NAME = 'my-app';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-app-form',
-    template,
+    styleUrls: ['./app-form.component.scss'],
+    templateUrl: './app-form.component.html',
     animations: [
         fadeAnimation
     ]
 })
-export class AppFormComponent implements Ng2.OnInit {
+export class AppFormComponent implements OnInit {
-    @Ng2.Input()
+    @Input()
     public showClose = false;
 
-    @Ng2.Output()
+    @Output()
-    public created = new Ng2.EventEmitter<AppDto>();
+    public created = new EventEmitter<AppDto>();
 
-    @Ng2.Output()
+    @Output()
-    public cancelled = new Ng2.EventEmitter();
+    public cancelled = new EventEmitter();
 
     public creationError = '';
     public createForm =
         this.formBuilder.group({
             name: ['',
                 [
-                    Ng2Forms.Validators.required,
+                    Validators.required,
-                    Ng2Forms.Validators.maxLength(40),
+                    Validators.maxLength(40),
-                    Ng2Forms.Validators.pattern('[a-z0-9]+(\-[a-z0-9]+)*')
+                    Validators.pattern('[a-z0-9]+(\-[a-z0-9]+)*')
                 ]]
         });
 
@@ -47,7 +48,7 @@ export class AppFormComponent implements Ng2.OnInit {
 
     constructor(
         private readonly appsStore: AppsStoreService,
-        private readonly formBuilder: Ng2Forms.FormBuilder
+        private readonly formBuilder: FormBuilder
     ) {
     }
 

src/Squidex/app/shared/components/dashboard-link.directive.ts

@@ -5,23 +5,23 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Directive, ElementRef, HostListener, OnDestroy, OnInit, Renderer } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { Router } from '@angular/router';
 
 import { AppsStoreService } from './../services/apps-store.service';
 
-@Ng2.Directive({
+@Directive({
     selector: '[dashboardLink]'
 })
-export class DashboardLinkDirective implements Ng2.OnInit, Ng2.OnDestroy {
+export class DashboardLinkDirective implements OnInit, OnDestroy {
     private appSubscription: any;
     private url: string;
 
     constructor(
         private readonly appsStore: AppsStoreService,
-        private readonly router: Ng2Router.Router,
+        private readonly router: Router,
-        private readonly element: Ng2.ElementRef,
+        private readonly element: ElementRef,
-        private readonly renderer: Ng2.Renderer
+        private readonly renderer: Renderer
     ) {
     }
 
@@ -38,7 +38,7 @@ export class DashboardLinkDirective implements Ng2.OnInit, Ng2.OnDestroy {
         this.appSubscription.unsubscribe();
     }
 
-    @Ng2.HostListener('click')
+    @HostListener('click')
     public onClick() {
         this.router.navigateByUrl(this.url);
 

src/Squidex/app/shared/guards/app-must-exist.guard.spec.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as TypeMoq from 'typemoq';
+import { Mock } from 'typemoq';
 
 import { AppsStoreService } from 'shared';
 
@@ -13,10 +13,10 @@ import { AppMustExistGuard } from './app-must-exist.guard';
 import { RouterMockup } from './router-mockup';
 
 describe('AppMustExistGuard', () => {
-    let appsStore: TypeMoq.Mock<AppsStoreService>;
+    let appsStore: Mock<AppsStoreService>;
 
     beforeEach(() => {
-        appsStore = TypeMoq.Mock.ofType(AppsStoreService);
+        appsStore = Mock.ofType(AppsStoreService);
     });
 
     it('should navigate to 404 page if app is not found', (done) => {

src/Squidex/app/shared/guards/app-must-exist.guard.ts

@@ -5,20 +5,20 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
 
 import { AppsStoreService } from './../services/apps-store.service';
 
-@Ng2.Injectable()
+@Injectable()
-export class AppMustExistGuard implements Ng2Router.CanActivate {
+export class AppMustExistGuard implements CanActivate {
     constructor(
         private readonly appsStore: AppsStoreService,
-        private readonly router: Ng2Router.Router
+        private readonly router: Router
     ) {
     }
 
-    public canActivate(route: Ng2Router.ActivatedRouteSnapshot, state: Ng2Router.RouterStateSnapshot): Promise<boolean> {
+    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
         const appName = route.params['appName'];
 
         const result =

src/Squidex/app/shared/guards/must-be-authenticated.guard.spec.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as TypeMoq from 'typemoq';
+import { Mock } from 'typemoq';
 
 import { AuthService } from 'shared';
 
@@ -13,10 +13,10 @@ import { MustBeAuthenticatedGuard } from './must-be-authenticated.guard';
 import { RouterMockup } from './router-mockup';
 
 describe('MustBeAuthenticatedGuard', () => {
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
 
     beforeEach(() => {
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
     });
 
     it('should navigate to default page if not authenticated', (done) => {

src/Squidex/app/shared/guards/must-be-authenticated.guard.ts

@@ -5,20 +5,20 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
 
 import { AuthService } from './../services/auth.service';
 
-@Ng2.Injectable()
+@Injectable()
-export class MustBeAuthenticatedGuard implements Ng2Router.CanActivate {
+export class MustBeAuthenticatedGuard implements CanActivate {
     constructor(
         private readonly auth: AuthService,
-        private readonly router: Ng2Router.Router
+        private readonly router: Router
     ) {
     }
 
-    public canActivate(route: Ng2Router.ActivatedRouteSnapshot, state: Ng2Router.RouterStateSnapshot): Promise<boolean> {
+    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
         return this.auth.checkLogin().then(isAuthenticated => {
             if (!isAuthenticated) {
                 this.router.navigate(['']);

src/Squidex/app/shared/guards/must-be-not-authenticated.guard.spec.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as TypeMoq from 'typemoq';
+import { Mock } from 'typemoq';
 
 import { AuthService } from 'shared';
 
@@ -13,10 +13,10 @@ import { MustBeNotAuthenticatedGuard } from './must-be-not-authenticated.guard';
 import { RouterMockup } from './router-mockup';
 
 describe('MustBeNotAuthenticatedGuard', () => {
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
 
     beforeEach(() => {
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
     });
 
     it('should navigate to app page if authenticated', (done) => {

src/Squidex/app/shared/guards/must-be-not-authenticated.guard.ts

@@ -5,20 +5,20 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
 
 import { AuthService } from './../services/auth.service';
 
-@Ng2.Injectable()
+@Injectable()
-export class MustBeNotAuthenticatedGuard implements Ng2Router.CanActivate {
+export class MustBeNotAuthenticatedGuard implements CanActivate {
     constructor(
         private readonly auth: AuthService,
-        private readonly router: Ng2Router.Router
+        private readonly router: Router
     ) {
     }
 
-    public canActivate(route: Ng2Router.ActivatedRouteSnapshot, state: Ng2Router.RouterStateSnapshot): Promise<boolean> {
+    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
         return this.auth.checkLogin().then(isAuthenticated => {
             if (isAuthenticated) {
                 this.router.navigate(['app']);

src/Squidex/app/shared/module.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
 
 import { SqxFrameworkModule } from 'shared';
 
@@ -14,7 +14,7 @@ import {
     DashboardLinkDirective
 } from './declarations';
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
         SqxFrameworkModule
     ],

src/Squidex/app/shared/services/app-clients.service.spec.ts

@@ -5,10 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Http from '@angular/http';
+import { Response, ResponseOptions } from '@angular/http';
-import * as TypeMoq from 'typemoq';
-
 import { Observable } from 'rxjs';
+import { It, Mock, Times } from 'typemoq';
 
 import {
     ApiUrlConfig,
@@ -21,19 +20,19 @@ import {
 } from './../';
 
 describe('AppClientsService', () => {
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
     let appClientsService: AppClientsService;
 
     beforeEach(() => {
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
         appClientsService = new AppClientsService(authService.object, new ApiUrlConfig('http://service/p/'), null);
     });
 
     it('should make get request to get app clients', () => {
         authService.setup(x => x.authGet('http://service/p/api/apps/my-app/clients'))
             .returns(() => Observable.of(
-                new Ng2Http.Response(
+                new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: [{
                             id: 'client1',
                             name: 'Client 1',
@@ -48,7 +47,7 @@ describe('AppClientsService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let clients: AppClientDto[] = null;
 
@@ -68,10 +67,10 @@ describe('AppClientsService', () => {
     it('should make post request to create client', () => {
         const dto = new CreateAppClientDto('client1');
 
-        authService.setup(x => x.authPost('http://service/p/api/apps/my-app/clients', TypeMoq.It.isValue(dto)))
+        authService.setup(x => x.authPost('http://service/p/api/apps/my-app/clients', It.isValue(dto)))
             .returns(() => Observable.of(
-               new Ng2Http.Response(
+               new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: {
                             id: 'client1',
                             name: 'Client 1',
@@ -81,7 +80,7 @@ describe('AppClientsService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let client: AppClientDto = null;
 
@@ -98,13 +97,13 @@ describe('AppClientsService', () => {
     it('should make put request to rename client', () => {
         const dto = new UpdateAppClientDto('Client 1 New');
 
-        authService.setup(x => x.authPut('http://service/p/api/apps/my-app/clients/client1', TypeMoq.It.isValue(dto)))
+        authService.setup(x => x.authPut('http://service/p/api/apps/my-app/clients/client1', It.isValue(dto)))
             .returns(() => Observable.of(
-               new Ng2Http.Response(
+               new Response(
-                    new Ng2Http.ResponseOptions()
+                    new ResponseOptions()
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appClientsService.updateClient('my-app', 'client1', dto);
 
@@ -114,11 +113,11 @@ describe('AppClientsService', () => {
     it('should make delete request to remove client', () => {
         authService.setup(x => x.authDelete('http://service/p/api/apps/my-app/clients/client1'))
             .returns(() => Observable.of(
-               new Ng2Http.Response(
+               new Response(
-                    new Ng2Http.ResponseOptions()
+                    new ResponseOptions()
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appClientsService.deleteClient('my-app', 'client1');
 

src/Squidex/app/shared/services/app-clients.service.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
-import * as Ng2Http from '@angular/http';
+import { Headers, Http, RequestOptions } from '@angular/http';
 import { Observable } from 'rxjs';
 
 import {
@@ -49,12 +49,12 @@ export class AccessTokenDto {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class AppClientsService {
     constructor(
         private readonly authService: AuthService,
         private readonly apiUrl: ApiUrlConfig,
-        private readonly http: Ng2Http.Http
+        private readonly http: Http
     ) {
     }
 
@@ -107,8 +107,8 @@ export class AppClientsService {
     }
 
     public createToken(appName: string, client: AppClientDto): Observable<AccessTokenDto> {
-        const options = new Ng2Http.RequestOptions({
+        const options = new RequestOptions({
-            headers: new Ng2Http.Headers({
+            headers: new Headers({
                 'Content-Type': 'application/x-www-form-urlencoded'
             })
         });

src/Squidex/app/shared/services/app-contributors.service.spec.ts

@@ -5,10 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Http from '@angular/http';
+import { Response, ResponseOptions } from '@angular/http';
-import * as TypeMoq from 'typemoq';
-
 import { Observable } from 'rxjs';
+import { It, Mock, Times } from 'typemoq';
 
 import {
     ApiUrlConfig,
@@ -18,19 +17,19 @@ import {
 } from './../';
 
 describe('AppContributorsService', () => {
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
     let appContributorsService: AppContributorsService;
 
     beforeEach(() => {
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
         appContributorsService = new AppContributorsService(authService.object, new ApiUrlConfig('http://service/p/'));
     });
 
     it('should make get request to get app contributors', () => {
         authService.setup(x => x.authGet('http://service/p/api/apps/my-app/contributors'))
             .returns(() => Observable.of(
-                new Ng2Http.Response(
+                new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: [{
                             contributorId: '123',
                             permission: 'Owner'
@@ -41,7 +40,7 @@ describe('AppContributorsService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let contributors: AppContributorDto[] = null;
 
@@ -61,13 +60,13 @@ describe('AppContributorsService', () => {
     it('should make post request to assign contributor', () => {
         const contributor = new AppContributorDto('123', 'Owner');
 
-        authService.setup(x => x.authPost('http://service/p/api/apps/my-app/contributors', TypeMoq.It.isValue(contributor)))
+        authService.setup(x => x.authPost('http://service/p/api/apps/my-app/contributors', It.isValue(contributor)))
             .returns(() => Observable.of(
-               new Ng2Http.Response(
+               new Response(
-                    new Ng2Http.ResponseOptions()
+                    new ResponseOptions()
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appContributorsService.postContributor('my-app', contributor);
 
@@ -77,11 +76,11 @@ describe('AppContributorsService', () => {
     it('should make delete request to remove contributor', () => {
         authService.setup(x => x.authDelete('http://service/p/api/apps/my-app/contributors/123'))
             .returns(() => Observable.of(
-               new Ng2Http.Response(
+               new Response(
-                    new Ng2Http.ResponseOptions()
+                    new ResponseOptions()
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appContributorsService.deleteContributor('my-app', '123');
 

src/Squidex/app/shared/services/app-contributors.service.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { ApiUrlConfig, handleError } from 'framework';
@@ -20,7 +20,7 @@ export class AppContributorDto {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class AppContributorsService {
     constructor(
         private readonly authService: AuthService,

src/Squidex/app/shared/services/app-languages.service.spec.ts

@@ -5,10 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Http from '@angular/http';
+import { Response, ResponseOptions } from '@angular/http';
-import * as TypeMoq from 'typemoq';
-
 import { Observable } from 'rxjs';
+import { It, Mock, Times } from 'typemoq';
 
 import {
     AddAppLanguageDto,
@@ -20,19 +19,19 @@ import {
 } from './../';
 
 describe('AppLanguagesService', () => {
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
     let appLanguagesService: AppLanguagesService;
 
     beforeEach(() => {
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
         appLanguagesService = new AppLanguagesService(authService.object, new ApiUrlConfig('http://service/p/'));
     });
 
     it('should make get request to get app languages', () => {
         authService.setup(x => x.authGet('http://service/p/api/apps/my-app/languages'))
             .returns(() => Observable.of(
-                new Ng2Http.Response(
+                new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: [{
                             iso2Code: 'de',
                             englishName: 'German',
@@ -44,7 +43,7 @@ describe('AppLanguagesService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let languages: AppLanguageDto[] = null;
 
@@ -64,10 +63,10 @@ describe('AppLanguagesService', () => {
     it('should make post request to add language', () => {
         const dto = new AddAppLanguageDto('de');
 
-        authService.setup(x => x.authPost('http://service/p/api/apps/my-app/languages', TypeMoq.It.isValue(dto)))
+        authService.setup(x => x.authPost('http://service/p/api/apps/my-app/languages', It.isValue(dto)))
             .returns(() => Observable.of(
-                new Ng2Http.Response(
+                new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: {
                             iso2Code: 'de',
                             englishName: 'German'
@@ -75,7 +74,7 @@ describe('AppLanguagesService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let language: AppLanguageDto;
 
@@ -92,13 +91,13 @@ describe('AppLanguagesService', () => {
     it('should make put request to make master language', () => {
         const dto = new UpdateAppLanguageDto(true);
 
-        authService.setup(x => x.authPut('http://service/p/api/apps/my-app/languages/de', TypeMoq.It.isValue(dto)))
+        authService.setup(x => x.authPut('http://service/p/api/apps/my-app/languages/de', It.isValue(dto)))
             .returns(() => Observable.of(
-               new Ng2Http.Response(
+               new Response(
-                    new Ng2Http.ResponseOptions()
+                    new ResponseOptions()
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appLanguagesService.updateLanguage('my-app', 'de', dto);
 
@@ -108,11 +107,11 @@ describe('AppLanguagesService', () => {
     it('should make delete request to remove language', () => {
         authService.setup(x => x.authDelete('http://service/p/api/apps/my-app/languages/de'))
             .returns(() => Observable.of(
-               new Ng2Http.Response(
+               new Response(
-                    new Ng2Http.ResponseOptions()
+                    new ResponseOptions()
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appLanguagesService.deleteLanguage('my-app', 'de');
 

src/Squidex/app/shared/services/app-languages.service.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { ApiUrlConfig, handleError } from 'framework';
@@ -35,7 +35,7 @@ export class UpdateAppLanguageDto {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class AppLanguagesService {
     constructor(
         private readonly authService: AuthService,

src/Squidex/app/shared/services/apps-store.service.spec.ts

@@ -5,9 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as TypeMoq from 'typemoq';
-
 import { Observable } from 'rxjs';
+import { It, Mock, Times } from 'typemoq';
 
 import {
     AppDto,
@@ -24,22 +23,22 @@ describe('AppsStoreService', () => {
     const oldApps = [new AppDto('id', 'old-name', now, now, 'Owner')];
     const newApp =   new AppDto('id', 'new-name', now, now, 'Owner');
 
-    let appsService: TypeMoq.Mock<AppsService>;
+    let appsService: Mock<AppsService>;
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
 
     beforeEach(() => {
-        appsService = TypeMoq.Mock.ofType(AppsService);
+        appsService = Mock.ofType(AppsService);
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
     });
 
     it('should load when authenticated once', () => {
         authService.setup(x => x.isAuthenticated)
             .returns(() => Observable.of(true))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appsService.setup(x => x.getApps())
             .returns(() => Observable.of(oldApps))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         const store = new AppsStoreService(authService.object, appsService.object);
 
@@ -63,11 +62,11 @@ describe('AppsStoreService', () => {
     it('should reload value from apps-service when called', () => {
          authService.setup(x => x.isAuthenticated)
             .returns(() => Observable.of(true))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appsService.setup(x => x.getApps())
             .returns(() => Observable.of(oldApps))
-            .verifiable(TypeMoq.Times.exactly(2));
+            .verifiable(Times.exactly(2));
 
         const store = new AppsStoreService(authService.object, appsService.object);
 
@@ -93,15 +92,15 @@ describe('AppsStoreService', () => {
     it('should add app to cache when created', () => {
         authService.setup(x => x.isAuthenticated)
             .returns(() => Observable.of(true))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appsService.setup(x => x.getApps())
             .returns(() => Observable.of(oldApps))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
-        appsService.setup(x => x.postApp(TypeMoq.It.isAny()))
+        appsService.setup(x => x.postApp(It.isAny()))
             .returns(() => Observable.of(newApp))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         const store = new AppsStoreService(authService.object, appsService.object);
 
@@ -127,11 +126,11 @@ describe('AppsStoreService', () => {
     it('should not add app to cache when cache is null', () => {
         authService.setup(x => x.isAuthenticated)
             .returns(() => Observable.of(false))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
-        appsService.setup(x => x.postApp(TypeMoq.It.isAny()))
+        appsService.setup(x => x.postApp(It.isAny()))
             .returns(() => Observable.of(newApp))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         const store = new AppsStoreService(authService.object, appsService.object);
 
@@ -151,11 +150,11 @@ describe('AppsStoreService', () => {
     it('should select app', (done) => {
         authService.setup(x => x.isAuthenticated)
             .returns(() => Observable.of(true))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         appsService.setup(x => x.getApps())
             .returns(() => Observable.of(oldApps))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         const store = new AppsStoreService(authService.object, appsService.object);
 

src/Squidex/app/shared/services/apps-store.service.ts

@@ -5,13 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
-
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import {
-    BehaviorSubject,
-    Observable,
-    Subject
-} from 'rxjs';
 
 import { DateTime } from 'framework';
 
@@ -23,7 +18,7 @@ import {
 
 import { AuthService } from './auth.service';
 
-@Ng2.Injectable()
+@Injectable()
 export class AppsStoreService {
     private readonly apps$ = new Subject<AppDto[]>();
     private readonly appName$ = new BehaviorSubject<string | null>(null);

src/Squidex/app/shared/services/apps.service.spec.ts

@@ -5,10 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Http from '@angular/http';
+import { Response, ResponseOptions } from '@angular/http';
-import * as TypeMoq from 'typemoq';
-
 import { Observable } from 'rxjs';
+import { It, Mock, Times } from 'typemoq';
 
 import {
     ApiUrlConfig,
@@ -21,19 +20,19 @@ import {
 } from './../';
 
 describe('AppsService', () => {
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
     let appsService: AppsService;
 
     beforeEach(() => {
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
         appsService = new AppsService(authService.object, new ApiUrlConfig('http://service/p/'));
     });
 
     it('should make get request to get apps', () => {
         authService.setup(x => x.authGet('http://service/p/api/apps'))
             .returns(() => Observable.of(
-                new Ng2Http.Response(
+                new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: [{
                             id: '123',
                             name: 'name1',
@@ -50,7 +49,7 @@ describe('AppsService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let apps: AppDto[] = null;
 
@@ -69,17 +68,17 @@ describe('AppsService', () => {
     it('should make post request to create app', () => {
         const createApp = new CreateAppDto('new-app');
 
-        authService.setup(x => x.authPost('http://service/p/api/apps', TypeMoq.It.isValue(createApp)))
+        authService.setup(x => x.authPost('http://service/p/api/apps', It.isValue(createApp)))
             .returns(() => Observable.of(
-               new Ng2Http.Response(
+               new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: {
                             id: '123'
                         }
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let newCreated: EntityCreatedDto = null;
 

src/Squidex/app/shared/services/apps.service.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import {
@@ -35,7 +35,7 @@ export class CreateAppDto {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class AppsService {
     constructor(
         private readonly authService: AuthService,

src/Squidex/app/shared/services/auth.service.ts

@@ -5,9 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
-import * as Ng2Http from '@angular/http';
+import { Headers, Http, RequestOptions, Response } from '@angular/http';
-import * as Ng2Router from '@angular/router';
+import { Router } from '@angular/router';
 import { Observable, Subject } from 'rxjs';
 
 import {
@@ -37,7 +37,7 @@ export class Profile {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class AuthService {
     private readonly userManager: UserManager;
     private readonly isAuthenticatedChanged$ = new Subject<boolean>();
@@ -59,8 +59,8 @@ export class AuthService {
     }
 
     constructor(apiUrl: ApiUrlConfig,
-        private readonly http: Ng2Http.Http,
+        private readonly http: Http,
-        private readonly router: Ng2Router.Router
+        private readonly router: Router
     ) {
         if (!apiUrl) {
             return;
@@ -161,32 +161,32 @@ export class AuthService {
         return resultPromise;
     }
 
-    public authGet(url: string, options?: Ng2Http.RequestOptions): Observable<Ng2Http.Response> {
+    public authGet(url: string, options?: RequestOptions): Observable<Response> {
         options = this.setRequestOptions(options);
 
         return this.checkResponse(this.http.get(url, options));
     }
 
-    public authPut(url: string, data: any, options?: Ng2Http.RequestOptions): Observable<Ng2Http.Response> {
+    public authPut(url: string, data: any, options?: RequestOptions): Observable<Response> {
         options = this.setRequestOptions(options);
 
         return this.checkResponse(this.http.put(url, data, options));
     }
 
-    public authDelete(url: string, options?: Ng2Http.RequestOptions): Observable<Ng2Http.Response> {
+    public authDelete(url: string, options?: RequestOptions): Observable<Response> {
         options = this.setRequestOptions(options);
 
         return this.checkResponse(this.http.delete(url, options));
     }
 
-    public authPost(url: string, data: any, options?: Ng2Http.RequestOptions): Observable<Ng2Http.Response> {
+    public authPost(url: string, data: any, options?: RequestOptions): Observable<Response> {
         options = this.setRequestOptions(options);
 
         return this.checkResponse(this.http.post(url, data, options));
     }
 
-    private checkResponse(response: Observable<Ng2Http.Response>) {
+    private checkResponse(response: Observable<Response>) {
-        return response.catch((error: Ng2Http.Response) => {
+        return response.catch((error: Response) => {
             if (error.status === 401 || error.status === 404) {
                 this.loginRedirect();
             } else if (error.status === 403) {
@@ -197,13 +197,13 @@ export class AuthService {
         });
     }
 
-    private setRequestOptions(options?: Ng2Http.RequestOptions) {
+    private setRequestOptions(options?: RequestOptions) {
         if (!options) {
-            options = new Ng2Http.RequestOptions();
+            options = new RequestOptions();
         }
 
         if (!options.headers) {
-            options.headers = new Ng2Http.Headers();
+            options.headers = new Headers();
             options.headers.append('Content-Type', 'application/json');
         }
 

src/Squidex/app/shared/services/languages.service.spec.ts

@@ -5,10 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Http from '@angular/http';
+import { Response, ResponseOptions } from '@angular/http';
-import * as TypeMoq from 'typemoq';
-
 import { Observable } from 'rxjs';
+import { Mock, Times } from 'typemoq';
 
 import {
     ApiUrlConfig,
@@ -18,19 +17,19 @@ import {
 } from './../';
 
 describe('LanguageService', () => {
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
     let languageService: LanguageService;
 
     beforeEach(() => {
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
         languageService = new LanguageService(authService.object, new ApiUrlConfig('http://service/p/'));
     });
 
     it('should make get request to get languages', () => {
         authService.setup(x => x.authGet('http://service/p/api/languages'))
             .returns(() => Observable.of(
-                new Ng2Http.Response(
+                new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: [{
                             iso2Code: 'de',
                             englishName: 'German'
@@ -41,7 +40,7 @@ describe('LanguageService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let languages: LanguageDto[] = null;
 

src/Squidex/app/shared/services/languages.service.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { ApiUrlConfig, handleError } from 'framework';
@@ -20,7 +20,7 @@ export class LanguageDto {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class LanguageService {
     constructor(
         private readonly authService: AuthService,

src/Squidex/app/shared/services/schemas.service.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import {
@@ -107,7 +107,7 @@ export class CreateSchemaDto {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class SchemasService {
     constructor(
         private readonly authService: AuthService,

src/Squidex/app/shared/services/users-provider.service.spec.ts

@@ -5,9 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as TypeMoq from 'typemoq';
-
 import { Observable } from 'rxjs';
+import { Mock, Times } from 'typemoq';
 
 import {
     AuthService,
@@ -18,13 +17,13 @@ import {
 } from './../';
 
 describe('UsersProviderService', () => {
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
-    let usersService: TypeMoq.Mock<UsersService>;
+    let usersService: Mock<UsersService>;
     let usersProviderService: UsersProviderService;
 
     beforeEach(() => {
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
-        usersService = TypeMoq.Mock.ofType(UsersService);
+        usersService = Mock.ofType(UsersService);
         usersProviderService = new UsersProviderService(usersService.object, authService.object);
     });
 
@@ -33,7 +32,7 @@ describe('UsersProviderService', () => {
 
         usersService.setup(x => x.getUser('123'))
             .returns(() => Observable.of(user))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let resultingUser: UserDto = null;
 
@@ -51,7 +50,7 @@ describe('UsersProviderService', () => {
 
         usersService.setup(x => x.getUser('123'))
             .returns(() => Observable.of(user))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         usersProviderService.getUser('123');
 
@@ -74,7 +73,7 @@ describe('UsersProviderService', () => {
 
         usersService.setup(x => x.getUser('123'))
             .returns(() => Observable.of(user))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let resultingUser: UserDto = null;
 

src/Squidex/app/shared/services/users-provider.service.ts

@@ -5,14 +5,14 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { UserDto, UsersService } from './users.service';
 
 import { AuthService } from './auth.service';
 
-@Ng2.Injectable()
+@Injectable()
 export class UsersProviderService {
     private readonly caches: { [id: string]: Observable<UserDto> } = {};
 

src/Squidex/app/shared/services/users.service.spec.ts

@@ -5,10 +5,9 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2Http from '@angular/http';
+import { Response, ResponseOptions } from '@angular/http';
-import * as TypeMoq from 'typemoq';
-
 import { Observable } from 'rxjs';
+import { Mock, Times } from 'typemoq';
 
 import {
     ApiUrlConfig,
@@ -18,19 +17,19 @@ import {
 } from './../';
 
 describe('UsersService', () => {
-    let authService: TypeMoq.Mock<AuthService>;
+    let authService: Mock<AuthService>;
     let usersService: UsersService;
 
     beforeEach(() => {
-        authService = TypeMoq.Mock.ofType(AuthService);
+        authService = Mock.ofType(AuthService);
         usersService = new UsersService(authService.object, new ApiUrlConfig('http://service/p/'));
     });
 
     it('should make get request to get many users', () => {
         authService.setup(x => x.authGet('http://service/p/api/users/?query='))
             .returns(() => Observable.of(
-                new Ng2Http.Response(
+                new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: [{
                             id: '123',
                             email: 'mail1@domain.com',
@@ -45,7 +44,7 @@ describe('UsersService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let user: UserDto[] = null;
 
@@ -65,8 +64,8 @@ describe('UsersService', () => {
     it('should make get request and query to get many users', () => {
         authService.setup(x => x.authGet('http://service/p/api/users/?query=my-query'))
             .returns(() => Observable.of(
-                new Ng2Http.Response(
+                new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: [{
                             id: '123',
                             email: 'mail1@domain.com',
@@ -81,7 +80,7 @@ describe('UsersService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let user: UserDto[] = null;
 
@@ -101,8 +100,8 @@ describe('UsersService', () => {
     it('should make get request to get single user', () => {
         authService.setup(x => x.authGet('http://service/p/api/users/123'))
             .returns(() => Observable.of(
-                new Ng2Http.Response(
+                new Response(
-                    new Ng2Http.ResponseOptions({
+                    new ResponseOptions({
                         body: {
                             id: '123',
                             email: 'mail1@domain.com',
@@ -112,7 +111,7 @@ describe('UsersService', () => {
                     })
                 )
             ))
-            .verifiable(TypeMoq.Times.once());
+            .verifiable(Times.once());
 
         let user: UserDto = null;
 

src/Squidex/app/shared/services/users.service.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { ApiUrlConfig } from 'framework';
@@ -22,7 +22,7 @@ export class UserDto {
     }
 }
 
-@Ng2.Injectable()
+@Injectable()
 export class UsersService {
     constructor(
         private readonly authService: AuthService,

src/Squidex/app/shell/module.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { NgModule } from '@angular/core';
 
 import { SqxFrameworkModule, SqxSharedModule } from 'shared';
 
@@ -21,7 +21,7 @@ import {
     SearchFormComponent
 } from './declarations';
 
-@Ng2.NgModule({
+@NgModule({
     imports: [
         SqxFrameworkModule,
         SqxSharedModule

src/Squidex/app/shell/pages/app/app-area.component.ts

@@ -5,10 +5,11 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component } from '@angular/core';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-app-area',
-    template
+    styleUrls: ['./app-area.component.scss'],
+    templateUrl: './app-area.component.html'
 })
 export class AppAreaComponent { }

src/Squidex/app/shell/pages/app/left-menu.component.ts

@@ -5,16 +5,16 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 
 import { AppsStoreService, LocalStoreService } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-left-menu',
-    styles,
+    styleUrls: ['./left-menu.component.scss'],
-    template
+    templateUrl: './left-menu.component.html'
 })
-export class LeftMenuComponent implements Ng2.OnInit, Ng2.OnDestroy {
+export class LeftMenuComponent implements OnInit, OnDestroy {
     private appSubscription: any | null = null;
 
     public get showSettingsMenu(): boolean {

src/Squidex/app/shell/pages/home/home-page.component.ts

@@ -5,23 +5,23 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { Router } from '@angular/router';
 
 import { AuthService, TitleService } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'home-page',
-    styles,
+    styleUrls: ['./home-page.component.scss'],
-    template
+    templateUrl: './home-page.component.html'
 })
-export class HomePageComponent implements Ng2.OnInit {
+export class HomePageComponent implements OnInit {
     public showLoginError = false;
 
     constructor(
         private readonly auth: AuthService,
         private readonly title: TitleService,
-        private readonly router: Ng2Router.Router
+        private readonly router: Router
     ) {
     }
 

src/Squidex/app/shell/pages/internal/apps-menu.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import {
     AppDto,
@@ -17,15 +17,15 @@ import {
 
 const FALLBACK_NAME = 'Apps Overview';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-apps-menu',
-    styles,
+    styleUrls: ['./apps-menu.component.scss'],
-    template,
+    templateUrl: './apps-menu.component.html',
     animations: [
         fadeAnimation
     ]
 })
-export class AppsMenuComponent implements Ng2.OnInit, Ng2.OnDestroy {
+export class AppsMenuComponent implements OnInit, OnDestroy {
     private appsSubscription: any | null = null;
     private appSubscription: any | null = null;
 
@@ -38,8 +38,8 @@ export class AppsMenuComponent implements Ng2.OnInit, Ng2.OnDestroy {
 
     constructor(
         private readonly appsStore: AppsStoreService,
-        private readonly router: Ng2Router.Router,
+        private readonly router: Router,
-        private readonly route: Ng2Router.ActivatedRoute
+        private readonly route: ActivatedRoute
     ) {
     }
 

src/Squidex/app/shell/pages/internal/internal-area.component.ts

@@ -5,19 +5,19 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 
 import {
     Notification,
     NotificationService
 } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-internal-area',
-    styles,
+    styleUrls: ['./internal-area.component.scss'],
-    template
+    templateUrl: './internal-area.component.html'
 })
-export class InternalAreaComponent implements Ng2.OnInit, Ng2.OnDestroy {
+export class InternalAreaComponent implements OnInit, OnDestroy {
     private notificationsSubscription: any;
 
     public notifications: Notification[] = [];

src/Squidex/app/shell/pages/internal/profile-menu.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 
 import {
     AuthService,
@@ -13,15 +13,15 @@ import {
     ModalView
 } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-profile-menu',
-    styles,
+    styleUrls: ['./profile-menu.component.scss'],
-    template,
+    templateUrl: './profile-menu.component.html',
     animations: [
         fadeAnimation
     ]
 })
-export class ProfileMenuComponent implements Ng2.OnInit, Ng2.OnDestroy {
+export class ProfileMenuComponent implements OnInit, OnDestroy {
     private authenticationSubscription: any | null = null;
 
     public modalMenu = new ModalView(false, true);

src/Squidex/app/shell/pages/internal/search-form.component.ts

@@ -5,11 +5,11 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component } from '@angular/core';
 
-@Ng2.Component({
+@Component({
     selector: 'sqx-search-form',
-    styles,
+    styleUrls: ['./search-form.component.scss'],
-    template
+    templateUrl: './search-form.component.html'
 })
 export class SearchFormComponent { }

src/Squidex/app/shell/pages/logout/logout-page.component.ts

@@ -5,19 +5,19 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import * as Ng2Router from '@angular/router';
+import { Router } from '@angular/router';
 
 import { AuthService } from 'shared';
 
-@Ng2.Component({
+@Component({
     selector: 'logout',
     template: ''
 })
-export class LogoutPageComponent implements Ng2.OnInit {
+export class LogoutPageComponent implements OnInit {
     constructor(
         private readonly auth: AuthService,
-        private readonly router: Ng2Router.Router
+        private readonly router: Router
     ) {
     }
 

src/Squidex/app/shell/pages/not-found/not-found-page.component.ts

@@ -5,15 +5,16 @@
  * Copyright (c) Sebastian Stehle. All rights reserved
  */
 
-import * as Ng2 from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { TitleService } from 'shared';
 
-@Ng2.Component({
+@Component({
-    selector: 'not-found',
+    selector: 'sqx-not-found-page',
-    template
+    styleUrls: ['./not-found-page.component.scss'],
+    templateUrl: './not-found-page.component.html'
 })
-export class NotFoundPageComponent implements Ng2.OnInit {
+export class NotFoundPageComponent implements OnInit {
     constructor(
         private readonly title: TitleService
     ) {

src/Squidex/app/theme/_lib-completer.scss

@@ -1,39 +0,0 @@
-@import '_mixins';
-@import '_vars';
-
-.completer-dropdown {
-    & {
-        margin-top: 2px !important;
-        width: 400px !important;
-    }
-
-    .completer {
-        &-image {
-            @include circle(2.2rem);
-        }
-
-        &-row {
-            & {
-                @include clearfix;
-                width: auto !important;
-                margin: 0;
-                margin-bottom: 0 !important;
-                display: block !important;
-            }
-        }
-
-        &-selected-row {
-            background: $color-theme-blue-dark !important;
-        }
-
-        &-description {
-            font-style: italic;
-        }
-
-        &-title,
-        &-description {
-            @include truncate;
-            padding-left: .3rem;
-        }
-    }
-}