perf(build): make AOT builds faster by loading templates with require

Closes fabric8-ui#2444

gulpfile.js

@@ -23,7 +23,6 @@ var gulp = require('gulp')
   , lesshint  = require('gulp-lesshint')
   , concat    = require('gulp-concat-css')
   , srcmaps   = require('gulp-sourcemaps')
-  , replace   = require('gulp-string-replace')
   ;
 
 // Requirements with special treatments
@@ -45,20 +44,7 @@ let mach = {};
 
 // Serialized typescript compile and post-compile steps
 mach.transpileTS = function () {
-  return (gulp.series(function () {
-    return ngc('tsconfig.json');
-  }, function () {
-    // FIXME: why do we need that?
-    // Replace templateURL/styleURL with require statements in js.
-    return gulp.src(['dist/app/**/*.js'])
-    .pipe(replace(/templateUrl:\s/g, "template: require("))
-    .pipe(replace(/\.html',/g, ".html'),"))
-    .pipe(replace(/styleUrls: \[/g, "styles: [require("))
-    .pipe(replace(/\.less']/g, ".css').toString()]"))
-    .pipe(gulp.dest(function (file) {
-      return file.base; // because of Angular 2's encapsulation, it's natural to save the css where the less-file was
-    }));
-  }))();
+  return ngc('tsconfig.json');
 }
 
 // Copy files to the distPath
@@ -77,12 +63,12 @@ mach.transpileLESS = function (src, debug) {
     // paths: [ path.join(__dirname, 'less', 'includes') ]
   }
   return gulp.src(src)
-    .pipe(less({
-      plugins: [autoprefix]
-    }))
     .pipe(lesshint({
       configPath: './.lesshintrc' // Options
     }))
+    .pipe(less({
+      plugins: [autoprefix]
+    }))
     .pipe(lesshint.reporter()) // Leave empty to use the default, "stylish"
     .pipe(lesshint.failOnError()) // Use this to fail the task on lint errors
     .pipe(srcmaps.init())

package.json

@@ -138,7 +138,6 @@
     "gulp-lesshint": "4.1.0",
     "gulp-ngc": "0.3.3",
     "gulp-sourcemaps": "2.6.4",
-    "gulp-string-replace": "1.0.0",
     "gulp-util": "3.0.8",
     "html-loader": "0.5.1",
     "html-webpack-plugin": "2.30.1",

runtime/src/app/app.component.ts

@@ -8,8 +8,8 @@ import { GlobalSettings } from './shared/globals';
 @Component({
   selector: 'alm-app',
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.less'],
+  template: require('./app.component.html'),
+  styles: [require('./app.component.css').toString()],
   providers: [GlobalSettings]
 })
 export class AppComponent implements OnInit {

runtime/src/app/components/header/header.component.ts

@@ -10,8 +10,8 @@ import { MenuItem, ContextLink, SystemStatus, HeaderService } from 'osio-ngx-fra
 
 @Component({
   selector: 'planner-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.less'],
+  template: require('./header.component.html'),
+  styles: [require('./header.component.css').toString()]
 })
 export class HeaderComponent implements OnInit {
 

runtime/src/app/components/login/login.component.ts

@@ -7,8 +7,8 @@ import { LoginService } from '../../services/login.service';
 
 @Component({
   selector: 'alm-login-form',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.less'],
+  template: require('./login.component.html'),
+  styles: [require('./login.component.css').toString()]
 })
 export class LoginComponent implements OnInit {
   showError: boolean = false;

src/app/components/assignee-selector/assignee-selector.component.ts

@@ -23,8 +23,8 @@ import { WorkItemService } from '../../services/work-item.service';
 
 @Component({
   selector: 'assignee-selector',
-  templateUrl: './assignee-selector.component.html',
-  styleUrls: ['./assignee-selector.component.less']
+  template: require('./assignee-selector.component.html'),
+  styles: [require('./assignee-selector.component.css').toString()]
 })
 export class AssigneeSelectorComponent {
 

src/app/components/assignee/assignee.component.ts

@@ -15,8 +15,8 @@ import { User } from 'ngx-login-client';
 
 @Component({
   selector: 'f8-assignee',
-  templateUrl: './assignee.component.html',
-  styleUrls: ['./assignee.component.less']
+  template: require('./assignee.component.html'),
+  styles: [require('./assignee.component.css').toString()]
 })
 
 export class AssigneesComponent implements OnInit {

src/app/components/card/card.component.ts

@@ -18,8 +18,8 @@ export class CardValue {
 
 @Component({
   selector: 'card',
-  templateUrl: './card.component.html',
-  styleUrls: ['./card.component.less']
+  template: require('./card.component.html'),
+  styles: [require('./card.component.css').toString()]
 })
 export class CardComponent implements OnInit, OnDestroy {
 

src/app/components/dynamic-field/dynamic-field.component.ts

@@ -31,8 +31,8 @@ export class DynamicUpdateEvent {
  */
 @Component({
   selector: 'alm-dynamic-field',
-  templateUrl: './dynamic-field.component.html',
-  styleUrls: ['./dynamic-field.component.less']
+  template: require('./dynamic-field.component.html'),
+  styles: [require('./dynamic-field.component.css').toString()]
 })
 export class DynamicFieldComponent implements OnInit {
 

src/app/components/group-types-panel/group-types-panel.component.ts

@@ -17,8 +17,8 @@ import { WorkItemType } from '../../models/work-item-type';
 
 @Component({
   selector: 'group-types',
-  templateUrl: './group-types-panel.component.html',
-  styleUrls: ['./group-types-panel.component.less']
+  template: require('./group-types-panel.component.html'),
+  styles: [require('./group-types-panel.component.css').toString()]
 })
 export class GroupTypesComponent implements OnInit, OnDestroy {
 

src/app/components/iteration-list-entry/iteration-list-entry.component.ts

@@ -32,8 +32,8 @@ import { IterationModel } from '../../models/iteration.model';
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'iteration-list-entry',
-  templateUrl: './iteration-list-entry.component.html',
-  styleUrls: ['./iteration-list-entry.component.less'],
+  template: require('./iteration-list-entry.component.html'),
+  styles: [require('./iteration-list-entry.component.css').toString()]
 })
 export class IterationListEntryComponent implements OnInit, OnDestroy {
   //@Input() listItem: TreeListItemComponent;

src/app/components/iteration-tree/iteration-tree.component.ts

@@ -11,7 +11,7 @@ import { IterationModel } from '../../models/iteration.model';
 
 @Component({
     selector: 'iteration-tree',
-    templateUrl: './iteration-tree.component.html',
+    template: require('./iteration-tree.component.html')
 })
 
 export class IterationTreeComponent {

src/app/components/iterations-modal/iterations-modal.component.ts

@@ -25,8 +25,8 @@ import { IterationModel } from '../../models/iteration.model';
 
 @Component({
   selector: 'fab-planner-iteration-modal',
-  templateUrl: './iterations-modal.component.html',
-  styleUrls: ['./iterations-modal.component.less']
+  template: require('./iterations-modal.component.html'),
+  styles: [require('./iterations-modal.component.css').toString()]
 })
 export class FabPlannerIterationModalComponent implements OnInit, OnDestroy, OnChanges {
 

src/app/components/iterations-panel/iterations-panel.component.ts

@@ -22,8 +22,8 @@ import { IterationTreeComponent } from '../iteration-tree/iteration-tree.compone
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'fab-planner-iteration',
-  templateUrl: './iterations-panel.component.html',
-  styleUrls: ['./iterations-panel.component.less']
+  template: require('./iterations-panel.component.html'),
+  styles: [require('./iterations-panel.component.css').toString()]
 })
 export class IterationComponent implements OnInit, OnDestroy, OnChanges {
 

src/app/components/label-selector/label-selector.component.ts

@@ -20,8 +20,8 @@ import {
 
 @Component({
   selector: 'label-selector',
-  templateUrl: './label-selector.component.html',
-  styleUrls: ['./label-selector.component.less']
+  template: require('./label-selector.component.html'),
+  styles: [require('./label-selector.component.css').toString()]
 })
 
 export class LabelSelectorComponent implements OnInit, OnChanges {

src/app/components/labels/labels.component.ts

@@ -15,8 +15,8 @@ import { LabelModel } from './../../models/label.model';
 
 @Component({
   selector: 'f8-label',
-  templateUrl: './labels.component.html',
-  styleUrls: ['./labels.component.less']
+  template: require('./labels.component.html'),
+  styles: [require('./labels.component.css').toString()]
 })
 
 export class LabelsComponent implements OnInit {

src/app/components/markdown-control/markdown-control.component.ts

@@ -22,8 +22,8 @@ import { WorkItemService } from '../../services/work-item.service';
  */
 @Component({
   selector: 'markdown-control',
-  templateUrl: './markdown-control.component.html',
-  styleUrls: ['./markdown-control.component.less']
+  template: require('./markdown-control.component.html'),
+  styles: [require('./markdown-control.component.css').toString()]
 })
 export class MarkdownControlComponent implements OnInit, OnChanges {
 

src/app/components/modal/modal.component.ts

@@ -9,8 +9,8 @@ import { ModalService } from '../../services/modal.service';
 
 @Component({
   selector: 'osio-modal',
-  templateUrl: './modal.component.html',
-  styleUrls: ['./modal.component.less']
+  template: require('./modal.component.html'),
+  styles: [require('./modal.component.css').toString()]
 })
 export class ModalComponent {
 

src/app/components/planner-board/planner-board.component.ts

@@ -49,8 +49,8 @@ import { GroupTypesModel } from '../../models/group-types.model';
 @Component({
   // tslint:disable-next-line:use-host-property-decorator
   selector: 'alm-board',
-  templateUrl: './planner-board.component.html',
-  styleUrls: ['./planner-board.component.less']
+  template: require('./planner-board.component.html'),
+  styles: [require('./planner-board.component.css').toString()]
 })
 
 export class PlannerBoardComponent implements OnInit, OnDestroy, AfterViewChecked {

src/app/components/planner-list/planner-list.component.ts

@@ -69,8 +69,8 @@ import { WorkItemDetailAddTypeSelectorComponent } from './../work-item-create/wo
     'class': ''
   },
   selector: 'alm-work-item-list',
-  templateUrl: './planner-list.component.html',
-  styleUrls: ['./planner-list.component.less']
+  template: require('./planner-list.component.html'),
+  styles: [require('./planner-list.component.css').toString()]
 })
 export class PlannerListComponent implements OnInit, AfterViewChecked, OnDestroy {
   @ViewChildren('activeFilters', { read: ElementRef }) activeFiltersRef: QueryList<ElementRef>;

src/app/components/side-panel/side-panel.component.ts

@@ -13,8 +13,8 @@ import { IterationService } from '../../services/iteration.service';
 
 @Component({
   selector: 'side-panel',
-  templateUrl: './side-panel.component.html',
-  styleUrls: ['./side-panel.component.less']
+  template: require('./side-panel.component.html'),
+  styles: [require('./side-panel.component.css').toString()]
 })
 export class SidepanelComponent implements OnInit, OnDestroy {
 

src/app/components/switch/switch.component.ts

@@ -12,8 +12,8 @@ import { User } from 'ngx-login-client';
 
 @Component({
   selector: 'switch',
-  templateUrl: './switch.component.html',
-  styleUrls: ['./switch.component.less']
+  template: require('./switch.component.html'),
+  styles: [require('./switch.component.css').toString()]
 })
 export class SwitchComponent {
   @Input() isChecked: Boolean;

src/app/components/toolbar-panel/toolbar-panel.component.ts

@@ -44,8 +44,8 @@ import { WorkItem } from '../../models/work-item';
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'toolbar-panel',
-  templateUrl: './toolbar-panel.component.html',
-  styleUrls: ['./toolbar-panel.component.less']
+  template: require('./toolbar-panel.component.html'),
+  styles: [require('./toolbar-panel.component.css').toString()]
 })
 export class ToolbarPanelComponent implements OnInit, AfterViewInit, OnDestroy {
 

src/app/components/typeahead-dropdown/typeahead-dropdown.component.ts

@@ -32,8 +32,8 @@ export class TypeaheadDropdownValue {
  */
 @Component({
   selector: 'typeahead-dropdown',
-  templateUrl: './typeahead-dropdown.component.html',
-  styleUrls: ['./typeahead-dropdown.component.less']
+  template: require('./typeahead-dropdown.component.html'),
+  styles: [require('./typeahead-dropdown.component.css').toString()]
 })
 export class TypeaheadDropdown implements OnInit, OnChanges, OnDestroy {
 

src/app/components/work-item-cell/work-item-cell.component.ts

@@ -9,8 +9,8 @@ import {
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'work-item-cell',
-  templateUrl: './work-item-cell.component.html',
-  styleUrls: ['./work-item-cell.component.less']
+  template: require('./work-item-cell.component.html'),
+  styles: [require('./work-item-cell.component.css').toString()]
 })
 
 export class WorkItemCellComponent {

src/app/components/work-item-comment/work-item-comment.component.ts

@@ -17,8 +17,8 @@ import { ModalService } from '../../services/modal.service';
 
 @Component({
     selector: 'alm-work-item-comment',
-    templateUrl: './work-item-comment.component.html',
-    styleUrls: ['./work-item-comment.component.less'],
+    template: require('./work-item-comment.component.html'),
+    styles: [require('./work-item-comment.component.css').toString()]
 })
 export class WorkItemCommentComponent implements OnInit {
     @Input() loadingComments: boolean = true;

src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.ts

@@ -28,8 +28,8 @@ import {
 
 @Component({
   selector: 'create-selector-widget',
-  templateUrl: './work-item-create-selector.component.html',
-  styleUrls: ['./work-item-create-selector.component.less']
+  template: require('./work-item-create-selector.component.html'),
+  styles: [require('./work-item-create-selector.component.css').toString()]
 })
 export class WorkItemDetailAddTypeSelectorWidgetComponent implements OnInit, AfterViewChecked{
 

src/app/components/work-item-create/work-item-create.component.ts

@@ -16,8 +16,8 @@ import { WorkItem } from '../../models/work-item';
 
 @Component({
   selector: 'detail-add-type-selector',
-  templateUrl: './work-item-create.component.html',
-  styleUrls: ['./work-item-create.component.less']
+  template: require('./work-item-create.component.html'),
+  styles: [require('./work-item-create.component.css').toString()]
 })
 export class WorkItemDetailAddTypeSelectorComponent implements OnInit, OnChanges {
 

src/app/components/work-item-detail/work-item-detail.component.ts

@@ -60,8 +60,8 @@ import {
 
 @Component({
   selector: 'work-item-preview',
-  templateUrl: './work-item-detail.component.html',
-  styleUrls: ['./work-item-detail.component.less'],
+  template: require('./work-item-detail.component.html'),
+  styles: [require('./work-item-detail.component.css').toString()],
   animations: [
     trigger('slideInOut', [
       state('in', style({

src/app/components/work-item-iteration-modal/work-item-iteration-modal.component.ts

@@ -22,8 +22,8 @@ import { IterationService }  from '../../services/iteration.service';
 
 @Component({
   selector: 'fab-planner-associate-iteration-modal',
-  templateUrl: './work-item-iteration-modal.component.html',
-  styleUrls: ['./work-item-iteration-modal.component.less']
+  template: require('./work-item-iteration-modal.component.html'),
+  styles: [require('./work-item-iteration-modal.component.css').toString()]
 })
 export class FabPlannerAssociateIterationModalComponent implements OnChanges {
 

src/app/components/work-item-link/work-item-link.component.ts

@@ -14,8 +14,8 @@ import { WorkItemService } from '../../services/work-item.service';
 
 @Component({
   selector: 'alm-work-item-link',
-  templateUrl: './work-item-link.component.html',
-  styleUrls: ['./work-item-link.component.less'],
+  template: require('./work-item-link.component.html'),
+  styles: [require('./work-item-link.component.css').toString()]
   // styles:['.completer-input {width:100%;float:left;};.completer-dropdown-holder {width:100%;float:left;}']
 })
 export class WorkItemLinkComponent implements OnInit, OnChanges, DoCheck, OnDestroy {

src/app/components/work-item-new-detail/work-item-new-detail.component.ts

@@ -53,8 +53,8 @@ import {
 
 @Component({
   selector: 'work-item-new-detail',
-  templateUrl: './work-item-new-detail.component.html',
-  styleUrls: [ './work-item-new-detail.component.less' ]
+  template: require('./work-item-new-detail.component.html'),
+  styles: [require('./work-item-new-detail.component.css').toString()]
 })
 
 export class WorkItemNewDetailComponent implements OnInit, OnDestroy, AfterViewChecked {

src/app/components/work-item-quick-add/work-item-quick-add.component.ts

@@ -31,8 +31,8 @@ import { WorkItemService } from '../../services/work-item.service';
 
 @Component({
   selector: 'alm-work-item-quick-add',
-  templateUrl: './work-item-quick-add.component.html',
-  styleUrls: ['./work-item-quick-add.component.less']
+  template: require('./work-item-quick-add.component.html'),
+  styles: [require('./work-item-quick-add.component.css').toString()]
 })
 export class WorkItemQuickAddComponent implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked {
   @ViewChild('quickAddTitle') qaTitle: any;