wip

app/package.json

@@ -48,6 +48,7 @@
     "@types/node": "18.7.23",
     "atomically": "^1.7.0",
     "filesize": "^9",
+    "@ngx-translate/core": "^14.0.0",
     "ngx-filesize": "^3.0.1"
   },
   "peerDependencies": {

app/src/app.module.ts

@@ -9,13 +9,13 @@ import { ToastrModule } from 'ngx-toastr'
     standalone: true,
     imports: [CommonModule],
     selector: 'root',
-    template: '<div *ngIf="true">Hi</div>',
+    template: '',
 })
 export class RootComponent {
     static bootstrapComponent: any
     constructor (private viewContainerRef: ViewContainerRef) { }
     ngAfterViewInit () {
-        // this.viewContainerRef.createComponent(RootComponent.bootstrapComponent)
+        this.viewContainerRef.createComponent(RootComponent.bootstrapComponent)
     }
 }
 
@@ -24,7 +24,7 @@ export function getRootModule (plugins: any[]) {
         BrowserModule,
         // CommonModule,
         // ...plugins,
-        // NgbModule,
+        NgbModule,
         ToastrModule.forRoot({
             positionClass: 'toast-bottom-center',
             toastClass: 'toast',

app/src/entry.ts

@@ -8,9 +8,9 @@ import './toastr.scss'
 // Importing before @angular/*
 import { findPlugins, initModuleLookup, loadPlugins } from './plugins'
 
-import { enableProdMode, NgModuleRef, ApplicationRef, importProvidersFrom } from '@angular/core'
+import { enableProdMode, NgModuleRef, ApplicationRef, importProvidersFrom, CompilerFactory, COMPILER_OPTIONS } from '@angular/core'
 import { bootstrapApplication, enableDebugTools } from '@angular/platform-browser'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { JitCompilerFactory, platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 import { ipcRenderer } from 'electron'
 
 import { getRootModule, RootComponent } from './app.module'
@@ -41,8 +41,6 @@ async function bootstrap (bootstrapData: BootstrapData, plugins: PluginInfo[], s
         (document.querySelector('.progress .bar') as HTMLElement).style.width = `${100 * current / total}%` // eslint-disable-line
     })
 
-    pluginModules.splice(0, 999)
-
     window['pluginModules'] = pluginModules
 
     const providers = [

app/webpack.config.mjs

@@ -1,8 +1,19 @@
+import * as fs from 'fs'
 import * as path from 'path'
 import wp from 'webpack'
 const __dirname = path.dirname(new URL(import.meta.url).pathname)
 import { AngularWebpackPlugin } from '@ngtools/webpack'
-import linkerPlugin from '@angular/compiler-cli/linker/babel'
+import { createEs2015LinkerPlugin } from '@angular/compiler-cli/linker/babel'
+const linkerPlugin = createEs2015LinkerPlugin({
+    linkerJitMode: true,
+    fileSystem: {
+        resolve: path.resolve,
+        exists: fs.existsSync,
+        dirname: path.dirname,
+        relative: path.relative,
+        readFile: fs.readFileSync,
+    },
+})
 
 export default () => ({
     name: 'tabby',
@@ -75,7 +86,7 @@ export default () => ({
         new AngularWebpackPlugin({
             tsconfig: path.resolve(__dirname, 'tsconfig.json'),
             directTemplateLoading: false,
-            jitMode: false,
+            jitMode: true,
         })
     ],
 })

app/yarn.lock

@@ -16,6 +16,13 @@
     update-notifier "^2.2.0"
     yargs "^8.0.2"
 
+"@ngx-translate/core@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@ngx-translate/core/-/core-14.0.0.tgz#af421d0e1a28376843f0fed375cd2fae7630a5ff"
+  integrity sha512-UevdwNCXMRCdJv//0kC8h2eSfmi02r29xeE8E9gJ1Al4D4jEJ7eiLPdjslTMc21oJNGguqqWeEVjf64SFtvw2w==
+  dependencies:
+    tslib "^2.3.0"
+
 "@serialport/binding-abstract@^9.0.2":
   version "9.2.3"
   resolved "https://registry.yarnpkg.com/@serialport/binding-abstract/-/binding-abstract-9.2.3.tgz#e7dd273357b6a698af7ad58db6f57f62443a0acb"

tabby-core/package.json

@@ -17,7 +17,6 @@
   "author": "Eugene Pankov",
   "license": "MIT",
   "devDependencies": {
-    "@ngx-translate/core": "^14.0.0",
     "bootstrap": "^5.3.0-alpha.1",
     "deepmerge": "^4.1.1",
     "fuzzy-search": "^3.2.1",

tabby-core/src/components/1.pug

@@ -1,3 +0,0 @@
-div Hello
-div there
-div(*ngFor='let x of [1,2,3]') there

tabby-core/src/components/appRoot.component.ts

@@ -55,8 +55,8 @@ function makeTabAnimation (dimension: string, size: number) {
 /** @hidden */
 @Component({
     selector: 'app-root',
-    templateUrl: './1.pug',
-    styles: [require('./appRoot.component.scss')],
+    templateUrl: './appRoot.component.pug',
+    styleUrls: ['./appRoot.component.scss'],
     animations: [
         trigger('animateTab', makeTabAnimation('width', 200)),
     ],
@@ -90,6 +90,7 @@ export class AppRootComponent {
         ngbModal: NgbModal,
         _themes: ThemesService,
     ) {
+        document.querySelector('app-root')?.remove()
         this.logger = log.create('main')
         this.logger.info('v', platform.getAppVersion())
 

tabby-core/src/components/base.component.ts

@@ -1,3 +1,4 @@
+import { Component } from '@angular/core'
 import { Observable, Subscription, Subject } from 'rxjs'
 
 interface CancellableEvent {
@@ -41,6 +42,7 @@ export class SubscriptionContainer {
     }
 }
 
+@Component({ template: '' })
 export class BaseComponent {
     protected get destroyed$ (): Observable<void> { return this._destroyed }
     private _destroyed = new Subject<void>()

tabby-core/src/components/baseTab.component.ts

@@ -1,5 +1,5 @@
 import { Observable, Subject, distinctUntilChanged, filter, debounceTime } from 'rxjs'
-import { EmbeddedViewRef, Injector, ViewContainerRef, ViewRef } from '@angular/core'
+import { Component, EmbeddedViewRef, Injector, ViewContainerRef, ViewRef } from '@angular/core'
 import { RecoveryToken } from '../api/tabRecovery'
 import { BaseComponent } from './base.component'
 import { ConfigService } from '../services/config.service'
@@ -19,6 +19,7 @@ export interface GetRecoveryTokenOptions {
 /**
  * Abstract base class for custom tab components
  */
+// @Component({ template: '' })
 export abstract class BaseTabComponent extends BaseComponent {
     /**
      * Parent tab (usually a SplitTabComponent)

tabby-core/src/components/profileIcon.component.pug

@@ -5,5 +5,5 @@ i.icon(
 )
 .icon(
     [fastHtmlBind]='icon',
-    *ngIf='isHTML'
+    *ngIf='isHTML && icon'
 )

tabby-core/src/components/profileIcon.component.ts

@@ -5,8 +5,8 @@ import { BaseComponent } from './base.component'
 /** @hidden */
 @Component({
     selector: 'profile-icon',
-    template: require('./profileIcon.component.pug'),
-    styles: [require('./profileIcon.component.scss')],
+    templateUrl:'./profileIcon.component.pug',
+    styleUrls: ['./profileIcon.component.scss'],
 })
 export class ProfileIconComponent extends BaseComponent {
     @Input() icon?: string

tabby-core/src/components/promptModal.component.ts

@@ -3,10 +3,11 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 /** @hidden */
 @Component({
-    template: require('./promptModal.component.pug'),
+    templateUrl:'./promptModal.component.pug',
 })
 export class PromptModalComponent {
     @Input() value: string
+    @Input() prompt: string|undefined
     @Input() password: boolean
     @Input() remember: boolean
     @Input() showRememberCheckbox: boolean

tabby-core/src/components/renameTabModal.component.ts

@@ -5,7 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 /** @hidden */
 @Component({
     selector: 'rename-tab-modal',
-    template: require('./renameTabModal.component.pug'),
+    templateUrl:'./renameTabModal.component.pug',
 })
 export class RenameTabModalComponent {
     @Input() value: string

tabby-core/src/components/safeModeModal.component.ts

@@ -3,7 +3,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 /** @hidden */
 @Component({
-    template: require('./safeModeModal.component.pug'),
+    templateUrl:'./safeModeModal.component.pug',
 })
 export class SafeModeModalComponent {
     @Input() error: Error

tabby-core/src/components/selectorModal.component.ts

@@ -7,8 +7,8 @@ import { SelectorOption } from '../api/selector'
 /** @hidden */
 @Component({
     selector: 'selector-modal',
-    template: require('./selectorModal.component.pug'),
-    styles: [require('./selectorModal.component.scss')],
+    templateUrl:'./selectorModal.component.pug',
+    styleUrls: ['./selectorModal.component.scss'],
 })
 export class SelectorModalComponent<T> {
     @Input() options: SelectorOption<T>[]

tabby-core/src/components/selfPositioning.component.ts

@@ -1,6 +1,7 @@
-import { HostBinding, ElementRef } from '@angular/core'
+import { HostBinding, ElementRef, Component } from '@angular/core'
 import { BaseComponent } from './base.component'
 
+@Component({ template: '' })
 export abstract class SelfPositioningComponent extends BaseComponent {
     @HostBinding('style.left') cssLeft: string
     @HostBinding('style.top') cssTop: string

tabby-core/src/components/splitTab.component.ts

@@ -186,7 +186,7 @@ export type SplitDropZoneInfo = {
         >
         </split-tab-pane-label>
     `,
-    styles: [require('./splitTab.component.scss')],
+    styleUrls: ['./splitTab.component.scss'],
 })
 export class SplitTabComponent extends BaseTabComponent implements AfterViewInit, OnDestroy {
     static DIRECTIONS: SplitDirection[] = ['t', 'r', 'b', 'l']

tabby-core/src/components/splitTabDropZone.component.ts

@@ -18,7 +18,7 @@ import { SplitDropZoneInfo, SplitTabComponent } from './splitTab.component'
     >
     </div>
     `,
-    styles: [require('./splitTabDropZone.component.scss')],
+    styleUrls: ['./splitTabDropZone.component.scss'],
 })
 export class SplitTabDropZoneComponent extends SelfPositioningComponent {
     @Input() dropZone: SplitDropZoneInfo

tabby-core/src/components/splitTabPaneLabel.component.ts

@@ -19,7 +19,7 @@ import { SelfPositioningComponent } from './selfPositioning.component'
         <label>{{tab.title}}</label>
     </div>
     `,
-    styles: [require('./splitTabPaneLabel.component.scss')],
+    styleUrls: ['./splitTabPaneLabel.component.scss'],
 })
 export class SplitTabPaneLabelComponent extends SelfPositioningComponent {
     @Input() tab: BaseTabComponent

tabby-core/src/components/splitTabSpanner.component.ts

@@ -7,7 +7,7 @@ import { SplitContainer } from './splitTab.component'
 @Component({
     selector: 'split-tab-spanner',
     template: '',
-    styles: [require('./splitTabSpanner.component.scss')],
+    styleUrls: ['./splitTabSpanner.component.scss'],
 })
 export class SplitTabSpannerComponent extends SelfPositioningComponent {
     @Input() container: SplitContainer

tabby-core/src/components/startPage.component.ts

@@ -7,8 +7,8 @@ import { Command, CommandLocation } from '../api/commands'
 /** @hidden */
 @Component({
     selector: 'start-page',
-    template: require('./startPage.component.pug'),
-    styles: [require('./startPage.component.scss')],
+    templateUrl:'./startPage.component.pug',
+    styleUrls: ['./startPage.component.scss'],
 })
 export class StartPageComponent {
     version: string
@@ -28,7 +28,7 @@ export class StartPageComponent {
         return this.domSanitizer.bypassSecurityTrustHtml(icon ?? '')
     }
 
-    buttonsTrackBy (btn: Command): any {
+    buttonsTrackBy (_, btn: Command): any {
         return btn.label + btn.icon
     }
 }

tabby-core/src/components/tabBody.component.ts

@@ -8,9 +8,9 @@ import { BaseTabComponent } from '../components/baseTab.component'
     template: `
         <ng-template #placeholder></ng-template>
     `,
-    styles: [
-        require('./tabBody.component.scss'),
-        require('./tabBody.deep.component.css'),
+    styleUrls: [
+        './tabBody.component.scss',
+        './tabBody.deep.component.css',
     ],
 })
 export class TabBodyComponent implements OnChanges {

tabby-core/src/components/tabHeader.component.pug

@@ -8,7 +8,7 @@
 profile-icon(
     *ngIf='config.store.terminal.showTabProfileIcon && tab.icon',
     [icon]='tab.icon',
-    [color]='tab.color'
+    [color]='tab.color ?? undefined'
 )
 
 .name(

tabby-core/src/components/tabHeader.component.ts

@@ -15,8 +15,8 @@ import { PlatformService } from '../api/platform'
 /** @hidden */
 @Component({
     selector: 'tab-header',
-    template: require('./tabHeader.component.pug'),
-    styles: [require('./tabHeader.component.scss')],
+    templateUrl:'./tabHeader.component.pug',
+    styleUrls: ['./tabHeader.component.scss'],
 })
 export class TabHeaderComponent extends BaseComponent {
     @Input() index: number

tabby-core/src/components/titleBar.component.pug

@@ -1,2 +1,2 @@
-.title((dblclick)='hostApp.toggleMaximize()') Tabby
+.title((dblclick)='hostWindow.toggleMaximize()') Tabby
 window-controls

tabby-core/src/components/titleBar.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core'
+import { HostWindowService } from '../api'
 
 /** @hidden */
 @Component({
     selector: 'title-bar',
-    template: require('./titleBar.component.pug'),
-    styles: [require('./titleBar.component.scss')],
+    templateUrl:'./titleBar.component.pug',
+    styleUrls: ['./titleBar.component.scss'],
 })
-export class TitleBarComponent { } // eslint-disable-line @typescript-eslint/no-extraneous-class
+export class TitleBarComponent {
+    constructor (public hostWindow: HostWindowService) { }
+}

tabby-core/src/components/toggle.component.ts

@@ -11,7 +11,7 @@ import { CheckboxComponent } from './checkbox.component'
       <label class="cform-check-label"></label>
     </div>
     `,
-    styles: [require('./toggle.component.scss')],
+    styleUrls: ['./toggle.component.scss'],
     providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true },
     ],

tabby-core/src/components/transfersMenu.component.ts

@@ -5,8 +5,8 @@ import { FileDownload, FileTransfer, PlatformService } from '../api/platform'
 /** @hidden */
 @Component({
     selector: 'transfers-menu',
-    template: require('./transfersMenu.component.pug'),
-    styles: [require('./transfersMenu.component.scss')],
+    templateUrl:'./transfersMenu.component.pug',
+    styleUrls: ['./transfersMenu.component.scss'],
 })
 export class TransfersMenuComponent {
     @Input() transfers: FileTransfer[]

tabby-core/src/components/unlockVaultModal.component.ts

@@ -3,7 +3,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 /** @hidden */
 @Component({
-    template: require('./unlockVaultModal.component.pug'),
+    templateUrl:'./unlockVaultModal.component.pug',
 })
 export class UnlockVaultModalComponent {
     passphrase: string

tabby-core/src/components/welcomeTab.component.ts

@@ -8,8 +8,8 @@ import { LocaleService } from '../services/locale.service'
 /** @hidden */
 @Component({
     selector: 'welcome-page',
-    template: require('./welcomeTab.component.pug'),
-    styles: [require('./welcomeTab.component.scss')],
+    templateUrl:'./welcomeTab.component.pug',
+    styleUrls: ['./welcomeTab.component.scss'],
 })
 export class WelcomeTabComponent extends BaseTabComponent {
     enableGlobalHotkey = true

tabby-core/src/components/windowControls.component.ts

@@ -6,8 +6,8 @@ import { AppService } from '../services/app.service'
 /** @hidden */
 @Component({
     selector: 'window-controls',
-    template: require('./windowControls.component.pug'),
-    styles: [require('./windowControls.component.scss')],
+    templateUrl:'./windowControls.component.pug',
+    styleUrls: ['./windowControls.component.scss'],
 })
 export class WindowControlsComponent {
     constructor (public hostWindow: HostWindowService, public app: AppService) { }

tabby-core/src/services/commands.service.ts

@@ -12,7 +12,7 @@ export class CommandService {
         private app: AppService,
         private translate: TranslateService,
         @Optional() @Inject(TabContextMenuItemProvider) protected contextMenuProviders: TabContextMenuItemProvider[],
-        @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[],
+        @Optional() @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[],
         @Inject(CommandProvider) private commandProviders: CommandProvider[],
     ) {
         this.contextMenuProviders.sort((a, b) => a.weight - b.weight)

tabby-core/src/services/config.service.ts

@@ -236,7 +236,10 @@ export class ConfigService {
      *
      * @typeparam T Base provider type
      */
-    enabledServices<T extends object> (services: T[]): T[] { // eslint-disable-line @typescript-eslint/ban-types
+    enabledServices<T extends object> (services: T[]|undefined): T[] { // eslint-disable-line @typescript-eslint/ban-types
+        if (!services) {
+            return []
+        }
         if (!this.servicesCache) {
             this.servicesCache = {}
             for (const imp of window['pluginModules']) {

tabby-core/src/services/profiles.service.ts

@@ -156,21 +156,21 @@ export class ProfilesService {
                     callback: () => resolve(p),
                 }))]
 
-                try {
-                    const { SettingsTabComponent } = window['nodeRequire']('tabby-settings')
-                    options.push({
-                        name: this.translate.instant('Manage profiles'),
-                        icon: 'fas fa-window-restore',
-                        weight: 10,
-                        callback: () => {
-                            this.app.openNewTabRaw({
-                                type: SettingsTabComponent,
-                                inputs: { activeTab: 'profiles' },
-                            })
-                            resolve(null)
-                        },
-                    })
-                } catch { }
+                // TODO try {
+                //     const { SettingsTabComponent } = window['nodeRequire']('tabby-settings')
+                //     options.push({
+                //         name: this.translate.instant('Manage profiles'),
+                //         icon: 'fas fa-window-restore',
+                //         weight: 10,
+                //         callback: () => {
+                //             this.app.openNewTabRaw({
+                //                 type: SettingsTabComponent,
+                //                 inputs: { activeTab: 'profiles' },
+                //             })
+                //             resolve(null)
+                //         },
+                //     })
+                // } catch { }
 
                 if (this.getProviders().some(x => x.supportsQuickConnect)) {
                     options.push({

tabby-core/yarn.lock

@@ -2,13 +2,6 @@
 # yarn lockfile v1
 
 
-"@ngx-translate/core@^14.0.0":
-  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/@ngx-translate/core/-/core-14.0.0.tgz#af421d0e1a28376843f0fed375cd2fae7630a5ff"
-  integrity sha512-UevdwNCXMRCdJv//0kC8h2eSfmi02r29xeE8E9gJ1Al4D4jEJ7eiLPdjslTMc21oJNGguqqWeEVjf64SFtvw2w==
-  dependencies:
-    tslib "^2.3.0"
-
 abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
@@ -163,11 +156,6 @@ tslib@^1.10.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
-  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
-
 uuid@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"

tabby-local/src/components/commandLineEditor.component.ts

@@ -6,7 +6,7 @@ import { SessionOptions } from '../api'
 /** @hidden */
 @Component({
     selector: 'command-line-editor',
-    template: require('./commandLineEditor.component.pug'),
+    templateUrl:'./commandLineEditor.component.pug',
 })
 export class CommandLineEditorComponent {
     @Input() argvMode = false

tabby-local/src/components/environmentEditor.component.ts

@@ -5,8 +5,8 @@ import { Subject } from 'rxjs'
 /** @hidden */
 @Component({
     selector: 'environment-editor',
-    template: require('./environmentEditor.component.pug'),
-    styles: [require('./environmentEditor.component.scss')],
+    templateUrl:'./environmentEditor.component.pug',
+    styleUrls: ['./environmentEditor.component.scss'],
 })
 export class EnvironmentEditorComponent {
     @Output() modelChange = new Subject<any>()

tabby-local/src/components/localProfileSettings.component.ts

@@ -8,7 +8,7 @@ import { ProfileSettingsComponent } from 'tabby-core'
 
 /** @hidden */
 @Component({
-    template: require('./localProfileSettings.component.pug'),
+    templateUrl:'./localProfileSettings.component.pug',
 })
 export class LocalProfileSettingsComponent implements ProfileSettingsComponent<LocalProfile> {
     profile: LocalProfile

tabby-local/src/components/shellSettingsTab.component.ts

@@ -3,7 +3,7 @@ import { WIN_BUILD_CONPTY_SUPPORTED, WIN_BUILD_CONPTY_STABLE, isWindowsBuild, Co
 
 /** @hidden */
 @Component({
-    template: require('./shellSettingsTab.component.pug'),
+    templateUrl:'./shellSettingsTab.component.pug',
 })
 export class ShellSettingsTabComponent {
     isConPTYAvailable: boolean

tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts

@@ -15,8 +15,8 @@ _('Search plugins')
 
 /** @hidden */
 @Component({
-    template: require('./pluginsSettingsTab.component.pug'),
-    styles: [require('./pluginsSettingsTab.component.scss')],
+    templateUrl:'./pluginsSettingsTab.component.pug',
+    styleUrls: ['./pluginsSettingsTab.component.scss'],
 })
 export class PluginsSettingsTabComponent {
     BusyState = BusyState

tabby-serial/src/components/serialProfileSettings.component.ts

@@ -7,7 +7,7 @@ import { SerialService } from '../services/serial.service'
 
 /** @hidden */
 @Component({
-    template: require('./serialProfileSettings.component.pug'),
+    templateUrl:'./serialProfileSettings.component.pug',
 })
 export class SerialProfileSettingsComponent implements ProfileSettingsComponent<SerialProfile> {
     profile: SerialProfile

tabby-serial/src/components/serialTab.component.ts

@@ -11,7 +11,7 @@ import { SerialSession, BAUD_RATES, SerialProfile } from '../api'
 @Component({
     selector: 'serial-tab',
     template: `${BaseTerminalTabComponent.template} ${require('./serialTab.component.pug')}`,
-    styles: [require('./serialTab.component.scss'), ...BaseTerminalTabComponent.styles],
+    styleUrls: ['./serialTab.component.scss', ...BaseTerminalTabComponent.styles],
     animations: BaseTerminalTabComponent.animations,
 })
 export class SerialTabComponent extends BaseTerminalTabComponent<SerialProfile> {

tabby-settings/src/components/configSyncSettingsTab.component.ts

@@ -8,7 +8,7 @@ import { Config, ConfigSyncService } from '../services/configSync.service'
 /** @hidden */
 @Component({
     selector: 'config-sync-settings-tab',
-    template: require('./configSyncSettingsTab.component.pug'),
+    templateUrl:'./configSyncSettingsTab.component.pug',
 })
 export class ConfigSyncSettingsTabComponent extends BaseComponent {
     connectionSuccessful: boolean|null = null

tabby-settings/src/components/editProfileModal.component.ts

@@ -13,7 +13,7 @@ const iconsClassList = Object.keys(iconsData).map(
 
 /** @hidden */
 @Component({
-    template: require('./editProfileModal.component.pug'),
+    templateUrl:'./editProfileModal.component.pug',
 })
 export class EditProfileModalComponent<P extends Profile> {
     @Input() profile: P & ConfigProxy

tabby-settings/src/components/hotkeyInputModal.component.ts

@@ -8,8 +8,8 @@ const INPUT_TIMEOUT = 1000
 /** @hidden */
 @Component({
     selector: 'hotkey-input-modal',
-    template: require('./hotkeyInputModal.component.pug'),
-    styles: [require('./hotkeyInputModal.component.scss')],
+    templateUrl:'./hotkeyInputModal.component.pug',
+    styleUrls: ['./hotkeyInputModal.component.scss'],
     animations: [
         trigger('animateKey', [
             transition(':enter', [

tabby-settings/src/components/hotkeySettingsTab.component.ts

@@ -14,7 +14,7 @@ _('Search hotkeys')
 /** @hidden */
 @Component({
     selector: 'hotkey-settings-tab',
-    template: require('./hotkeySettingsTab.component.pug'),
+    templateUrl:'./hotkeySettingsTab.component.pug',
 })
 export class HotkeySettingsTabComponent {
     hotkeyFilter = ''

tabby-settings/src/components/multiHotkeyInput.component.pug

@@ -1,6 +1,6 @@
 .item(*ngFor='let hotkey of hotkeys')
     .body((click)='editItem(hotkey)')
-        .stroke(*ngFor='let stroke of hotkey.strokes')
+        .stroke(*ngFor='let stroke of castAny(hotkey.strokes)')
             span(*ngIf='!hotkey.isDuplicate') {{stroke}}
             span.duplicate(*ngIf='hotkey.isDuplicate') {{stroke}}
     .remove((click)='removeItem(hotkey)') ×

tabby-settings/src/components/multiHotkeyInput.component.ts

@@ -7,8 +7,8 @@ import deepEqual from 'deep-equal'
 /** @hidden */
 @Component({
     selector: 'multi-hotkey-input',
-    template: require('./multiHotkeyInput.component.pug'),
-    styles: [require('./multiHotkeyInput.component.scss')],
+    templateUrl:'./multiHotkeyInput.component.pug',
+    styleUrls: ['./multiHotkeyInput.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MultiHotkeyInputComponent {
@@ -45,4 +45,7 @@ export class MultiHotkeyInputComponent {
     private storeUpdatedHotkeys () {
         this.hotkeysChange.emit(this.hotkeys)
     }
+
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    protected castAny = (x: any): any => x
 }

tabby-settings/src/components/profilesSettingsTab.component.ts

@@ -19,8 +19,8 @@ _('Ungrouped')
 
 /** @hidden */
 @Component({
-    template: require('./profilesSettingsTab.component.pug'),
-    styles: [require('./profilesSettingsTab.component.scss')],
+    templateUrl:'./profilesSettingsTab.component.pug',
+    styleUrls: ['./profilesSettingsTab.component.scss'],
 })
 export class ProfilesSettingsTabComponent extends BaseComponent {
     profiles: PartialProfile<Profile>[] = []

tabby-settings/src/components/releaseNotesTab.component.ts

@@ -15,8 +15,8 @@ export interface Release {
 /** @hidden */
 @Component({
     selector: 'release-notes-tab',
-    template: require('./releaseNotesTab.component.pug'),
-    styles: [require('./releaseNotesTab.component.scss')],
+    templateUrl:'./releaseNotesTab.component.pug',
+    styleUrls: ['./releaseNotesTab.component.scss'],
 })
 export class ReleaseNotesComponent extends BaseTabComponent {
     releases: Release[] = []

tabby-settings/src/components/setVaultPassphraseModal.component.ts

@@ -3,10 +3,11 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 /** @hidden */
 @Component({
-    template: require('./setVaultPassphraseModal.component.pug'),
+    templateUrl:'./setVaultPassphraseModal.component.pug',
 })
 export class SetVaultPassphraseModalComponent {
     passphrase: string
+    showPassphrase = false
     @ViewChild('input') input: ElementRef
 
     constructor (

tabby-settings/src/components/settingsTab.component.ts

@@ -23,9 +23,9 @@ import { ReleaseNotesComponent } from './releaseNotesTab.component'
 /** @hidden */
 @Component({
     selector: 'settings-tab',
-    template: require('./settingsTab.component.pug'),
-    styles: [
-        require('./settingsTab.component.scss'),
+    templateUrl:'./settingsTab.component.pug',
+    styleUrls: [
+        './settingsTab.component.scss',
     ],
 })
 export class SettingsTabComponent extends BaseTabComponent {
@@ -48,7 +48,7 @@ export class SettingsTabComponent extends BaseTabComponent {
         public platform: PlatformService,
         public zone: NgZone,
         public locale: LocaleService,
-        private updater: UpdaterService,
+        public updater: UpdaterService,
         private app: AppService,
         @Inject(SettingsTabProvider) public settingsProviders: SettingsTabProvider[],
         translate: TranslateService,

tabby-settings/src/components/vaultSettingsTab.component.pug

@@ -35,21 +35,21 @@ div(*ngIf='vault.isEnabled()')
                         button(
                             ngbDropdownItem,
                             *ngIf='secret.type === VAULT_SECRET_TYPE_FILE',
-                            (click)='renameFile(secret)'
+                            (click)='renameFile(castAny(secret))'
                         )
                             i.fas.fa-fw.fa-pencil-alt
                             span(translate) Rename
                         button(
                             ngbDropdownItem,
                             *ngIf='secret.type === VAULT_SECRET_TYPE_FILE',
-                            (click)='replaceFileContent(secret)'
+                            (click)='replaceFileContent(castAny(secret))'
                         )
                             i.fas.fa-fw.fa-file-import
                             span(translate) Replace
                         button(
                             ngbDropdownItem,
                             *ngIf='secret.type === VAULT_SECRET_TYPE_FILE',
-                            (click)='exportFile(secret)'
+                            (click)='exportFile(castAny(secret))'
                         )
                             i.fas.fa-fw.fa-file-export
                             span(translate) Export

tabby-settings/src/components/vaultSettingsTab.component.ts

@@ -8,7 +8,7 @@ import { SetVaultPassphraseModalComponent } from './setVaultPassphraseModal.comp
 /** @hidden */
 @Component({
     selector: 'vault-settings-tab',
-    template: require('./vaultSettingsTab.component.pug'),
+    templateUrl:'./vaultSettingsTab.component.pug',
 })
 export class VaultSettingsTabComponent extends BaseComponent {
     vaultContents: Vault|null = null
@@ -148,4 +148,6 @@ export class VaultSettingsTabComponent extends BaseComponent {
             download.close()
         }
     }
+
+    castAny = (x: any) => x
 }

tabby-settings/src/components/windowSettingsTab.component.ts

@@ -18,7 +18,7 @@ import {
 /** @hidden */
 @Component({
     selector: 'window-settings-tab',
-    template: require('./windowSettingsTab.component.pug'),
+    templateUrl:'./windowSettingsTab.component.pug',
 })
 export class WindowSettingsTabComponent extends BaseComponent {
     screens: Screen[]

tabby-settings/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-// import { BrowserModule } from '@angular/platform-browser'
+import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { InfiniteScrollModule } from 'ngx-infinite-scroll'
@@ -30,7 +30,7 @@ import { HotkeySettingsTabProvider, WindowSettingsTabProvider, VaultSettingsTabP
 /** @hidden */
 @NgModule({
     imports: [
-        // BrowserModule,
+        CommonModule,
         FormsModule,
         NgbModule,
         TabbyCorePlugin,

tabby-ssh/src/components/hostKeyPromptModal.component.ts

@@ -5,7 +5,7 @@ import { KnownHost, KnownHostSelector, SSHKnownHostsService } from '../services/
 
 /** @hidden */
 @Component({
-    template: require('./hostKeyPromptModal.component.pug'),
+    templateUrl:'./hostKeyPromptModal.component.pug',
 })
 export class HostKeyPromptModalComponent {
     @Input() selector: KnownHostSelector

tabby-ssh/src/components/keyboardInteractiveAuthPanel.component.ts

@@ -4,8 +4,8 @@ import { KeyboardInteractivePrompt } from '../session/ssh'
 
 @Component({
     selector: 'keyboard-interactive-auth-panel',
-    template: require('./keyboardInteractiveAuthPanel.component.pug'),
-    styles: [require('./keyboardInteractiveAuthPanel.component.scss')],
+    templateUrl:'./keyboardInteractiveAuthPanel.component.pug',
+    styleUrls: ['./keyboardInteractiveAuthPanel.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class KeyboardInteractiveAuthComponent {

tabby-ssh/src/components/sftpCreateDirectoryModal.component.ts

@@ -4,7 +4,7 @@ import { BaseComponent } from 'tabby-core'
 
 /** @hidden */
 @Component({
-    template: require('./sftpCreateDirectoryModal.component.pug'),
+    templateUrl:'./sftpCreateDirectoryModal.component.pug',
 })
 export class SFTPCreateDirectoryModalComponent extends BaseComponent {
     directoryName: string

tabby-ssh/src/components/sftpDeleteModal.component.ts

@@ -5,7 +5,7 @@ import { SFTPFile, SFTPSession } from '../session/sftp'
 
 /** @hidden */
 @Component({
-    template: require('./sftpDeleteModal.component.pug'),
+    templateUrl:'./sftpDeleteModal.component.pug',
 })
 export class SFTPDeleteModalComponent extends BaseComponent {
     sftp: SFTPSession

tabby-ssh/src/components/sftpPanel.component.ts

@@ -15,8 +15,8 @@ interface PathSegment {
 
 @Component({
     selector: 'sftp-panel',
-    template: require('./sftpPanel.component.pug'),
-    styles: [require('./sftpPanel.component.scss')],
+    templateUrl:'./sftpPanel.component.pug',
+    styleUrls: ['./sftpPanel.component.scss'],
 })
 export class SFTPPanelComponent {
     @Input() session: SSHSession

tabby-ssh/src/components/sshPortForwardingConfig.component.ts

@@ -5,7 +5,7 @@ import { ForwardedPortConfig, PortForwardType } from '../api'
 /** @hidden */
 @Component({
     selector: 'ssh-port-forwarding-config',
-    template: require('./sshPortForwardingConfig.component.pug'),
+    templateUrl:'./sshPortForwardingConfig.component.pug',
 })
 export class SSHPortForwardingConfigComponent {
     @Input() model: ForwardedPortConfig[]

tabby-ssh/src/components/sshPortForwardingModal.component.ts

@@ -6,7 +6,7 @@ import { ForwardedPortConfig } from '../api'
 
 /** @hidden */
 @Component({
-    template: require('./sshPortForwardingModal.component.pug'),
+    templateUrl:'./sshPortForwardingModal.component.pug',
 })
 export class SSHPortForwardingModalComponent {
     @Input() session: SSHSession

tabby-ssh/src/components/sshProfileSettings.component.ts

@@ -11,7 +11,7 @@ import { supportedAlgorithms } from '../algorithms'
 
 /** @hidden */
 @Component({
-    template: require('./sshProfileSettings.component.pug'),
+    templateUrl:'./sshProfileSettings.component.pug',
 })
 export class SSHProfileSettingsComponent {
     Platform = Platform

tabby-ssh/src/components/sshSettingsTab.component.ts

@@ -4,7 +4,7 @@ import { ConfigService, HostAppService, Platform } from 'tabby-core'
 
 /** @hidden */
 @Component({
-    template: require('./sshSettingsTab.component.pug'),
+    templateUrl:'./sshSettingsTab.component.pug',
 })
 export class SSHSettingsTabComponent {
     Platform = Platform

tabby-ssh/src/components/sshTab.component.ts

@@ -16,7 +16,8 @@ import { SSHMultiplexerService } from '../services/sshMultiplexer.service'
 @Component({
     selector: 'ssh-tab',
     template: `${BaseTerminalTabComponent.template} ${require('./sshTab.component.pug')}`,
-    styles: [require('./sshTab.component.scss'), ...BaseTerminalTabComponent.styles],
+    styles: BaseTerminalTabComponent.styles,
+    styleUrls: ['./sshTab.component.scss'],
     animations: BaseTerminalTabComponent.animations,
 })
 export class SSHTabComponent extends BaseTerminalTabComponent<SSHProfile> {

tabby-telnet/src/components/telnetProfileSettings.component.ts

@@ -6,7 +6,7 @@ import { TelnetProfile } from '../session'
 
 /** @hidden */
 @Component({
-    template: require('./telnetProfileSettings.component.pug'),
+    templateUrl:'./telnetProfileSettings.component.pug',
 })
 export class TelnetProfileSettingsComponent implements ProfileSettingsComponent<TelnetProfile> {
     profile: TelnetProfile

tabby-telnet/src/components/telnetTab.component.ts

@@ -11,7 +11,7 @@ import { TelnetProfile, TelnetSession } from '../session'
 @Component({
     selector: 'telnet-tab',
     template: `${BaseTerminalTabComponent.template} ${require('./telnetTab.component.pug')}`,
-    styles: [require('./telnetTab.component.scss'), ...BaseTerminalTabComponent.styles],
+    styleUrls: ['./telnetTab.component.scss', ...BaseTerminalTabComponent.styles],
     animations: BaseTerminalTabComponent.animations,
 })
 export class TelnetTabComponent extends BaseTerminalTabComponent<TelnetProfile> {

tabby-terminal/src/api/baseTerminalTab.component.ts

@@ -1,7 +1,7 @@
 import { Observable, Subject, first, auditTime } from 'rxjs'
 import { Spinner } from 'cli-spinner'
 import colors from 'ansi-colors'
-import { NgZone, OnInit, OnDestroy, Injector, ViewChild, HostBinding, Input, ElementRef, InjectFlags } from '@angular/core'
+import { NgZone, OnInit, OnDestroy, Injector, ViewChild, HostBinding, Input, ElementRef, InjectFlags, Component } from '@angular/core'
 import { trigger, transition, style, animate, AnimationTriggerMetadata } from '@angular/animations'
 import { AppService, ConfigService, BaseTabComponent, HostAppService, HotkeysService, NotificationsService, Platform, LogService, Logger, TabContextMenuItemProvider, SplitTabComponent, SubscriptionContainer, MenuItemOptions, PlatformService, HostWindowService, ResettableTimeout, TranslateService } from 'tabby-core'
 
@@ -17,6 +17,7 @@ import { MultifocusService } from '../services/multifocus.service'
 /**
  * A class to base your custom terminal tabs on
  */
+@Component({ template: '' })
 export class BaseTerminalTabComponent<P extends BaseTerminalProfile> extends BaseTabComponent implements OnInit, OnDestroy {
     static template: string = require<string>('../components/baseTerminalTab.component.pug')
     static styles: string[] = [require<string>('../components/baseTerminalTab.component.scss')]

tabby-terminal/src/components/appearanceSettingsTab.component.ts

@@ -7,8 +7,8 @@ import { ConfigService, getCSSFontFamily, PlatformService } from 'tabby-core'
 
 /** @hidden */
 @Component({
-    template: require('./appearanceSettingsTab.component.pug'),
-    styles: [require('./appearanceSettingsTab.component.scss')],
+    templateUrl:'./appearanceSettingsTab.component.pug',
+    styleUrls: ['./appearanceSettingsTab.component.scss'],
 })
 export class AppearanceSettingsTabComponent {
     fonts: string[] = []

tabby-terminal/src/components/colorPicker.component.ts

@@ -3,8 +3,8 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'
 /** @hidden */
 @Component({
     selector: 'color-picker',
-    template: require('./colorPicker.component.pug'),
-    styles: [require('./colorPicker.component.scss')],
+    templateUrl:'./colorPicker.component.pug',
+    styleUrls: ['./colorPicker.component.scss'],
 })
 export class ColorPickerComponent {
     @Input() model: string

tabby-terminal/src/components/colorSchemePreview.component.ts

@@ -5,8 +5,8 @@ import { TerminalColorScheme } from '../api/interfaces'
 /** @hidden */
 @Component({
     selector: 'color-scheme-preview',
-    template: require('./colorSchemePreview.component.pug'),
-    styles: [require('./colorSchemePreview.component.scss')],
+    templateUrl:'./colorSchemePreview.component.pug',
+    styleUrls: ['./colorSchemePreview.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ColorSchemePreviewComponent extends BaseComponent {

tabby-terminal/src/components/colorSchemeSelector.component.pug

@@ -1,5 +1,5 @@
 .head
-    .bg-dark.p-3.mb-4(*ngIf='model')
+    .bg-dark.p-3.mb-4(*ngIf='model != null')
         .d-flex.align-items-center
             span {{model.name}}
             .me-auto
@@ -18,8 +18,7 @@
         ng-container(*ngFor='let scheme of allColorSchemes')
             .list-group-item.list-group-item-action(
                 [hidden]='filter && !scheme.name.toLowerCase().includes(filter.toLowerCase())',
-                (click)='selectScheme(scheme)',
-                [class.active]='(currentCustomScheme || currentStockScheme) === scheme'
+                (click)='selectScheme(scheme)'
             )
                 .d-flex.w-100.align-items-center
                     i.fas.fa-fw([class.fa-check]='model?.name === scheme.name')

tabby-terminal/src/components/colorSchemeSelector.component.ts

@@ -11,7 +11,7 @@ _('Search color schemes')
 /** @hidden */
 @Component({
     selector: 'color-scheme-selector',
-    template: require('./colorSchemeSelector.component.pug'),
+    templateUrl:'./colorSchemeSelector.component.pug',
     styles: [`
         :host {
             display: block;
@@ -45,7 +45,7 @@ export class ColorSchemeSelectorComponent {
         this.changeDetector.markForCheck()
     }
 
-    selectScheme (scheme: TerminalColorScheme) {
+    selectScheme (scheme: TerminalColorScheme|null) {
         this.model = scheme
         this.modelChange.emit(scheme)
         this.changeDetector.markForCheck()

tabby-terminal/src/components/colorSchemeSettingsTab.component.ts

@@ -11,8 +11,8 @@ _('Search color schemes')
 
 /** @hidden */
 @Component({
-    template: require('./colorSchemeSettingsTab.component.pug'),
-    styles: [require('./colorSchemeSettingsTab.component.scss')],
+    templateUrl:'./colorSchemeSettingsTab.component.pug',
+    styleUrls: ['./colorSchemeSettingsTab.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ColorSchemeSettingsTabComponent {

tabby-terminal/src/components/loginScriptsSettings.component.ts

@@ -7,7 +7,7 @@ import { LoginScript, LoginScriptsOptions } from '../middleware/loginScriptProce
 /** @hidden */
 @Component({
     selector: 'login-scripts-settings',
-    template: require('./loginScriptsSettings.component.pug'),
+    templateUrl:'./loginScriptsSettings.component.pug',
 })
 export class LoginScriptsSettingsComponent {
     @Input() options: LoginScriptsOptions

tabby-terminal/src/components/searchPanel.component.pug

@@ -10,7 +10,7 @@
         [placeholder]='"Search"|translate'
     )
     .input-group-append(*ngIf='state.resultCount > 0')
-        .input-group-text.result-counter {{state.resultIndex + 1}} / {{state.resultCount}}
+        .input-group-text.result-counter {{state.resultIndex ?? 0 + 1}} / {{state.resultCount}}
 
 ng-container(*ngIf='state.resultCount > 0')
     button.btn.btn-link(

tabby-terminal/src/components/searchPanel.component.ts

@@ -5,8 +5,8 @@ import { ConfigService, NotificationsService, TranslateService } from 'tabby-cor
 
 @Component({
     selector: 'search-panel',
-    template: require('./searchPanel.component.pug'),
-    styles: [require('./searchPanel.component.scss')],
+    templateUrl:'./searchPanel.component.pug',
+    styleUrls: ['./searchPanel.component.scss'],
 })
 export class SearchPanelComponent {
     @Input() query: string

tabby-terminal/src/components/streamProcessingSettings.component.ts

@@ -6,7 +6,7 @@ import { StreamProcessingOptions } from '../middleware/streamProcessing'
 /** @hidden */
 @Component({
     selector: 'stream-processing-settings',
-    template: require('./streamProcessingSettings.component.pug'),
+    templateUrl:'./streamProcessingSettings.component.pug',
 })
 export class StreamProcessingSettingsComponent {
     @Input() options: StreamProcessingOptions

tabby-terminal/src/components/terminalSettingsTab.component.ts

@@ -3,7 +3,7 @@ import { ConfigService, HostAppService, Platform, PlatformService, altKeyName, m
 
 /** @hidden */
 @Component({
-    template: require('./terminalSettingsTab.component.pug'),
+    templateUrl:'./terminalSettingsTab.component.pug',
 })
 export class TerminalSettingsTabComponent {
     Platform = Platform

tabby-terminal/src/components/terminalToolbar.component.ts

@@ -6,8 +6,8 @@ import { BaseTerminalTabComponent } from '../api/baseTerminalTab.component'
 /** @hidden */
 @Component({
     selector: 'terminal-toolbar',
-    template: require('./terminalToolbar.component.pug'),
-    styles: [require('./terminalToolbar.component.scss')],
+    templateUrl:'./terminalToolbar.component.pug',
+    styleUrls: ['./terminalToolbar.component.scss'],
 })
 export class TerminalToolbarComponent {
     @Input() tab: BaseTerminalTabComponent<any>

tabby-web/src/components/messageBoxModal.component.ts

@@ -4,7 +4,7 @@ import { BaseComponent, HotkeysService, MessageBoxOptions } from 'tabby-core'
 
 /** @hidden */
 @Component({
-    template: require('./messageBoxModal.component.pug'),
+    templateUrl:'./messageBoxModal.component.pug',
 })
 export class MessageBoxModalComponent extends BaseComponent {
     @Input() options: MessageBoxOptions

tsconfig.json

@@ -36,7 +36,7 @@
       "common*": [
         "../../tabby-terminal/node_modules/xterm/src/common*"
       ],
-      "tabby-*": ["../../tabby-*/src"]
+      "tabby-*": ["../../tabby-*/src"],
     }
   },
   "typeAcquisition": {

webpack.plugin.config.mjs

@@ -1,3 +1,4 @@
+import * as fs from 'fs'
 import * as path from 'path'
 import wp from 'webpack'
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
@@ -7,7 +8,17 @@ const bundleAnalyzer = new BundleAnalyzerPlugin({
     analyzerPort: 0,
 })
 
-import linkerPlugin from '@angular/compiler-cli/linker/babel'
+import { createEs2015LinkerPlugin } from '@angular/compiler-cli/linker/babel'
+const linkerPlugin = createEs2015LinkerPlugin({
+    linkerJitMode: true,
+    fileSystem: {
+        resolve: path.resolve,
+        exists: fs.existsSync,
+        dirname: path.dirname,
+        relative: path.relative,
+        readFile: fs.readFileSync,
+    },
+})
 
 export default options => {
     const sourceMapOptions = {
@@ -73,15 +84,7 @@ export default options => {
                     },
                 },
                 {
-                    test: /\.ts$/,
-                    use: [
-                        {
-                            loader: '@ngtools/webpack',
-                        },
-                    ],
-                },
-                {
-                    test: /\.mjs$/,
+                    test: /\.(m?)js$/,
                     loader: 'babel-loader',
                     options: {
                         plugins: [linkerPlugin],
@@ -92,7 +95,26 @@ export default options => {
                         fullySpecified: false,
                     },
                 },
-                { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] },
+                {
+                    test: /\.ts$/,
+                    use: [
+                        {
+                            loader: '@ngtools/webpack',
+                        },
+                    ],
+                },
+                {
+                    test: /\.pug$/,
+                    use: [
+                        'apply-loader',
+                        {
+                            loader: 'pug-loader',
+                            options: {
+                                pretty: true,
+                            },
+                        },
+                    ],
+                },
                 { test: /\.scss$/, use: ['@tabby-gang/to-string-loader', 'css-loader', 'sass-loader'], include: /(theme.*|component)\.scss/ },
                 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], exclude: /(theme.*|component)\.scss/ },
                 { test: /\.css$/, use: ['@tabby-gang/to-string-loader', 'css-loader'], include: /component\.css/ },
@@ -151,7 +173,7 @@ export default options => {
             new AngularWebpackPlugin({
                 tsconfig: path.resolve(options.dirname, 'tsconfig.json'),
                 directTemplateLoading: false,
-                jitMode: false,
+                jitMode: true,
             })
         ],
     }