pack with ngtools

package-lock.json

@@ -28,6 +28,26 @@
         "tslib": "1.9.0"
       }
     },
+    "@angular/compiler-cli": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.2.0.tgz",
+      "integrity": "sha512-+Kef4NjuHwLj2hRPdVo4yAtPmv+kn0Nu/ShmKfaEK4mt9aaQMFxKNt6beUuDK5iUPMB5nuTCZ4bqEFpqd+EtxQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": "1.7.0",
+        "minimist": "1.2.0",
+        "reflect-metadata": "0.1.12",
+        "tsickle": "0.26.0"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "dev": true
+        }
+      }
+    },
     "@angular/core": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.0.tgz",
@@ -191,6 +211,12 @@
       "integrity": "sha512-esk3CG25hRtHsVHm+LOjiSFYdw8be3uIY653WUwR43Bro914HSimPgPpqgajkhTJ0awK3RQfaIxP7zvbtCpcyg==",
       "dev": true
     },
+    "@types/node": {
+      "version": "8.0.19",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.19.tgz",
+      "integrity": "sha512-VRQB+Q0L3YZWs45uRdpN9oWr82meL/8TrJ6faoKT5tp0uub2l/aRMhtm5fo68h7kjYKH60f9/bay1nF7ZpTW5g==",
+      "dev": true
+    },
     "@types/node-forge": {
       "version": "0.6.10",
       "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-0.6.10.tgz",
@@ -11319,6 +11345,12 @@
         }
       }
     },
+    "reflect-metadata": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.12.tgz",
+      "integrity": "sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A==",
+      "dev": true
+    },
     "regenerate": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz",
@@ -13400,6 +13432,26 @@
         }
       }
     },
+    "tsickle": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.26.0.tgz",
+      "integrity": "sha512-eWJ2CUfttGK0LqF9iJ/Avnxbj4M+fCyJ50Zag3wm73Fut1hsasPRHKxKdrMWVj4BMHnQNx7TO+DdNmLmJTSuNw==",
+      "dev": true,
+      "requires": {
+        "minimist": "1.2.0",
+        "mkdirp": "0.5.1",
+        "source-map": "0.5.7",
+        "source-map-support": "0.4.15"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "dev": true
+        }
+      }
+    },
     "tslib": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",

package.json

@@ -22,12 +22,14 @@
     "test:watch": "karma start"
   },
   "devDependencies": {
+    "@angular/compiler-cli": "5.2.0",
     "@ngtools/webpack": "1.10.2",
     "@types/angular": "^1.6.34",
     "@types/chrome": "0.0.51",
     "@types/jasmine": "^2.8.2",
     "@types/jquery": "^3.2.16",
     "@types/lunr": "2.1.5",
+    "@types/node": "8.0.19",
     "@types/node-forge": "0.6.10",
     "@types/papaparse": "4.1.31",
     "@types/safari-extension": "^0.0.27",

src/background/main.background.ts

@@ -109,7 +109,7 @@ export default class MainBackground {
     private sidebarAction: any;
     private buildingContextMenu: boolean;
     private menuOptionsLoaded: any[] = [];
-    private syncTimeout: number;
+    private syncTimeout: any;
     private isSafari: boolean;
 
     constructor() {

src/background/runtime.background.ts

@@ -23,7 +23,7 @@ import { AutofillService } from '../services/abstractions/autofill.service';
 
 export default class RuntimeBackground {
     private runtime: any;
-    private autofillTimeout: number;
+    private autofillTimeout: any;
     private pageDetailsToAutoFill: any[] = [];
     private isSafari: boolean;
     private onInstalledReason: string = null;

src/globals.d.ts

@@ -1,4 +1,3 @@
-declare function require(s: string): any;
 declare function escape(s: string): string;
 declare function unescape(s: string): string;
 declare var opr: any;

src/manifest.json

@@ -78,7 +78,6 @@
     "webRequest",
     "webRequestBlocking"
   ],
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "commands": {
     "autofill_login": {
       "suggested_key": {

src/popup2/accounts/environment.component.ts

@@ -1,5 +1,3 @@
-import * as template from './environment.component.html';
-
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -13,7 +11,7 @@ import { EnvironmentComponent as BaseEnvironmentComponent } from 'jslib/angular/
 
 @Component({
     selector: 'app-environment',
-    template: template,
+    templateUrl: 'environment.component.html',
 })
 export class EnvironmentComponent extends BaseEnvironmentComponent {
     constructor(analytics: Angulartics2, toasterService: ToasterService,

src/popup2/accounts/hint.component.ts

@@ -1,5 +1,3 @@
-import * as template from './hint.component.html';
-
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -13,7 +11,7 @@ import { HintComponent as BaseHintComponent } from 'jslib/angular/components/hin
 
 @Component({
     selector: 'app-hint',
-    template: template,
+    templateUrl: 'hint.component.html',
 })
 export class HintComponent extends BaseHintComponent {
     constructor(router: Router, analytics: Angulartics2,

src/popup2/accounts/home.component.ts

@@ -1,5 +1,3 @@
-import * as template from './home.component.html';
-
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -10,7 +8,7 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
 
 @Component({
     selector: 'app-home',
-    template: template,
+    templateUrl: 'home.component.html',
 })
 export class HomeComponent {
     constructor(private router: Router, i18nService: I18nService,

src/popup2/accounts/lock.component.ts

@@ -1,5 +1,3 @@
-import * as template from './lock.component.html';
-
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -16,7 +14,7 @@ import { LockComponent as BaseLockComponent } from 'jslib/angular/components/loc
 
 @Component({
     selector: 'app-lock',
-    template: template,
+    templateUrl: 'lock.component.html',
 })
 export class LockComponent extends BaseLockComponent {
     constructor(router: Router, analytics: Angulartics2,

src/popup2/accounts/login.component.ts

@@ -1,5 +1,3 @@
-import * as template from './login.component.html';
-
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -14,7 +12,7 @@ import { LoginComponent as BaseLoginComponent } from 'jslib/angular/components/l
 
 @Component({
     selector: 'app-login',
-    template: template,
+    templateUrl: 'login.component.html',
 })
 export class LoginComponent extends BaseLoginComponent {
     constructor(authService: AuthService, router: Router,

src/popup2/accounts/register.component.ts

@@ -1,5 +1,3 @@
-import * as template from './register.component.html';
-
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -15,7 +13,7 @@ import { RegisterComponent as BaseRegisterComponent } from 'jslib/angular/compon
 
 @Component({
     selector: 'app-register',
-    template: template,
+    templateUrl: 'register.component.html',
 })
 export class RegisterComponent extends BaseRegisterComponent {
     constructor(authService: AuthService, router: Router,

src/popup2/accounts/two-factor-options.component.ts

@@ -1,5 +1,3 @@
-import * as template from './two-factor-options.component.html';
-
 import { Component, } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -16,7 +14,7 @@ import {
 
 @Component({
     selector: 'app-two-factor-options',
-    template: template,
+    templateUrl: 'two-factor-options.component.html',
 })
 export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
     constructor(authService: AuthService, router: Router,

src/popup2/accounts/two-factor.component.ts

@@ -1,5 +1,3 @@
-import * as template from './two-factor.component.html';
-
 import { Component } from '@angular/core';
 
 import { Router } from '@angular/router';
@@ -22,7 +20,7 @@ import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/comp
 
 @Component({
     selector: 'app-two-factor',
-    template: template,
+    templateUrl: 'two-factor.component.html',
 })
 export class TwoFactorComponent extends BaseTwoFactorComponent {
     showNewWindowMessage = false;

src/popup2/app.d.ts

@@ -1 +0,0 @@
-declare module '*.html';

src/popup2/components/action-buttons.component.ts

@@ -1,4 +1,3 @@
-import * as template from './action-buttons.component.html';
 import {
     Component,
     EventEmitter,
@@ -22,7 +21,7 @@ import { PopupUtilsService } from '../services/popup-utils.service';
 
 @Component({
     selector: 'app-action-buttons',
-    template: template,
+    templateUrl: 'action-buttons.component.html',
 })
 export class ActionButtonsComponent {
     @Output() onView = new EventEmitter<CipherView>();

src/popup2/components/ciphers-list.component.ts

@@ -1,4 +1,3 @@
-import * as template from './ciphers-list.component.html';
 import {
     Component,
     EventEmitter,
@@ -22,7 +21,7 @@ import { PopupUtilsService } from '../services/popup-utils.service';
 
 @Component({
     selector: 'app-ciphers-list',
-    template: template,
+    templateUrl: 'ciphers-list.component.html',
 })
 export class CiphersListComponent {
     @Output() onSelected = new EventEmitter<CipherView>();

src/popup2/components/pop-out.component.ts

@@ -1,5 +1,3 @@
-import * as template from './pop-out.component.html';
-
 import { Component } from '@angular/core';
 
 import { Angulartics2 } from 'angulartics2';
@@ -12,7 +10,7 @@ import { PopupUtilsService } from '../services/popup-utils.service';
 
 @Component({
     selector: 'app-pop-out',
-    template: template,
+    templateUrl: 'pop-out.component.html',
 })
 export class PopOutComponent {
     constructor(private analytics: Angulartics2, private platformUtilsService: PlatformUtilsService,

src/popup2/services/services.module.ts

@@ -49,15 +49,15 @@ function getBgService<T>(service: string) {
     };
 }
 
-const stateService = new StateService();
+export const stateService = new StateService();
-const messagingService = new BrowserMessagingService(getBgService<PlatformUtilsService>('platformUtilsService')());
+export const messagingService = new BrowserMessagingService(getBgService<PlatformUtilsService>('platformUtilsService')());
-const authService = new AuthService(getBgService<CryptoService>('cryptoService')(),
+export const authService = new AuthService(getBgService<CryptoService>('cryptoService')(),
     getBgService<ApiService>('apiService')(), getBgService<UserService>('userService')(),
     getBgService<TokenService>('tokenService')(), getBgService<AppIdService>('appIdService')(),
     getBgService<I18nService>('i18n2Service')(), getBgService<PlatformUtilsService>('platformUtilsService')(),
     getBgService<ConstantsService>('constantsService')(), messagingService);
 
-function initFactory(i18nService: I18nService, storageService: StorageService): Function {
+export function initFactory(i18nService: I18nService, storageService: StorageService): Function {
     return async () => {
         const htmlEl = window.document.documentElement;
         if (i18nService != null) {

src/popup2/tabs.component.html

@@ -0,0 +1,27 @@
+<div class="tab-page">
+    <router-outlet></router-outlet>
+    <nav class="tabs">
+        <ul>
+            <li routerLinkActive="active">
+                <a routerLink="current" title="{{'currentTab' | i18n}}">
+                    <i class="fa fa-folder fa-2x"></i>{{'tab' | i18n}}
+                </a>
+            </li>
+            <li routerLinkActive="active">
+                <a routerLink="vault" title="{{'myVault' | i18n}}">
+                    <i class="fa fa-lock fa-2x"></i>{{'myVault' | i18n}}
+                </a>
+            </li>
+            <li routerLinkActive="active">
+                <a routerLink="tools" title="{{'tools' | i18n}}">
+                    <i class="fa fa-wrench fa-2x"></i>{{'tools' | i18n}}
+                </a>
+            </li>
+            <li routerLinkActive="active">
+                <a routerLink="settings" title="{{'settings' | i18n}}">
+                    <i class="fa fa-cogs fa-2x"></i>{{'settings' | i18n}}
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>

src/popup2/tabs.component.ts

@@ -12,33 +12,6 @@ import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-tabs',
-    template: `
+    templateUrl: 'tabs.component.html',
-    <div class="tab-page">
-        <router-outlet></router-outlet>
-        <nav class="tabs">
-            <ul>
-                <li routerLinkActive="active">
-                    <a routerLink="current" title="{{'currentTab' | i18n}}">
-                        <i class="fa fa-folder fa-2x"></i>{{'tab' | i18n}}
-                    </a>
-                </li>
-                <li routerLinkActive="active">
-                    <a routerLink="vault" title="{{'myVault' | i18n}}">
-                        <i class="fa fa-lock fa-2x"></i>{{'myVault' | i18n}}
-                    </a>
-                </li>
-                <li routerLinkActive="active">
-                    <a routerLink="tools" title="{{'tools' | i18n}}">
-                        <i class="fa fa-wrench fa-2x"></i>{{'tools' | i18n}}
-                    </a>
-                </li>
-                <li routerLinkActive="active">
-                    <a routerLink="settings" title="{{'settings' | i18n}}">
-                        <i class="fa fa-cogs fa-2x"></i>{{'settings' | i18n}}
-                    </a>
-                </li>
-            </ul>
-        </nav>
-    </div>`,
 })
 export class TabsComponent { }

src/popup2/vault/add-edit.component.ts

@@ -1,5 +1,3 @@
-import * as template from './add-edit.component.html';
-
 import { Location } from '@angular/common';
 import {
     Component,
@@ -23,7 +21,7 @@ import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/componen
 
 @Component({
     selector: 'app-vault-add-edit',
-    template: template,
+    templateUrl: 'add-edit.component.html',
 })
 export class AddEditComponent extends BaseAddEditComponent implements OnInit {
     constructor(cipherService: CipherService, folderService: FolderService,

src/popup2/vault/ciphers.component.ts

@@ -1,5 +1,3 @@
-import * as template from './ciphers.component.html';
-
 import { Location } from '@angular/common';
 import {
     Component,
@@ -18,7 +16,7 @@ import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/componen
 
 @Component({
     selector: 'app-vault-ciphers',
-    template: template,
+    templateUrl: 'ciphers.component.html',
 })
 export class CiphersComponent extends BaseCiphersComponent implements OnInit {
     constructor(cipherService: CipherService, private route: ActivatedRoute,

src/popup2/vault/groupings.component.ts

@@ -1,5 +1,3 @@
-import * as template from './groupings.component.html';
-
 import {
     Component,
     OnInit,
@@ -20,7 +18,7 @@ import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/comp
 
 @Component({
     selector: 'app-vault-groupings',
-    template: template,
+    templateUrl: 'groupings.component.html',
 })
 export class GroupingsComponent extends BaseGroupingsComponent implements OnInit {
     ciphers: CipherView[];

src/popup2/vault/view.component.ts

@@ -1,5 +1,3 @@
-import * as template from './view.component.html';
-
 import { Location } from '@angular/common';
 import {
     Component,
@@ -25,7 +23,7 @@ import { ViewComponent as BaseViewComponent } from 'jslib/angular/components/vie
 
 @Component({
     selector: 'app-vault-view',
-    template: template,
+    templateUrl: 'view.component.html',
 })
 export class ViewComponent extends BaseViewComponent implements OnInit {
     constructor(cipherService: CipherService, totpService: TotpService,

webpack2.js

@@ -4,6 +4,7 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
 
 const isVendorModule = (module) => {
     if (!module.context) {
@@ -40,9 +41,8 @@ module.exports = {
                 loader: 'tslint-loader'
             },
             {
-                test: /\.tsx?$/,
+                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
-                use: 'ts-loader',
+                loader: '@ngtools/webpack'
-                exclude: /node_modules\/(?!(@bitwarden)\/).*/
             },
             {
                 test: /\.(html)$/,
@@ -92,6 +92,11 @@ module.exports = {
         new CleanWebpackPlugin([
             path.resolve(__dirname, 'build2/*')
         ]),
+        new AngularCompilerPlugin({
+            tsConfigPath: 'tsconfig.json',
+            entryModule: 'src/popup2/app.module#AppModule',
+            sourceMap: true
+        }),
         // ref: https://github.com/angular/angular/issues/20357
         new webpack.ContextReplacementPlugin(
             /\@angular(\\|\/)core(\\|\/)esm5/,
@@ -110,7 +115,7 @@ module.exports = {
         new HtmlWebpackPlugin({
             template: './src/popup2/index.html',
             filename: 'popup/index.html',
-            chunks: ['popup/vendor', 'popup/main', 'fonts']
+            chunks: ['popup/vendor', 'popup/main']
         }),
         new HtmlWebpackPlugin({
             template: './src/background.html',
@@ -135,10 +140,10 @@ module.exports = {
             { from: './src/images', to: 'images' },
             { from: './src/content/autofill.css', to: 'content' }
         ]),
-        new webpack.SourceMapDevToolPlugin({
+        //new webpack.SourceMapDevToolPlugin({
-            filename: '[name].js.map',
+        //    filename: '[name].js.map',
-            include: ['popup/main.js', 'background.js']
+        //    include: ['popup/main.js', 'background.js']
-        }),
+        //}),
         extractCss
     ],
     resolve: {