NIFIREG-277 - Allow for consistent angular template/templateUrl inclusion between JS and TS.

This closes #195

Signed-off-by: Scott Aslan <scottyaslan@gmail.com>
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/angular-url-loader.js b/nifi-registry-core/nifi-registry-web-ui/src/main/angular-url-loader.js
new file mode 100644
index 0000000..222670e
--- /dev/null
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/angular-url-loader.js
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Removes inline templateUrl properties and replaces them with NodeJS `require` syntax
+ *
+ *   templateUrl: './some-module.html'  ->  template: require('./some-module.html')
+ */
+const templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
+module.exports = function (source) {
+    source = source
+        .replace(templateUrlRegex, function(match, quote, url){
+            return 'template: require(\'' + url + '\')';
+        });
+
+    return source;
+};
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/tsconfig.json b/nifi-registry-core/nifi-registry-web-ui/src/main/tsconfig.json
new file mode 100644
index 0000000..59201a5
--- /dev/null
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/tsconfig.json
@@ -0,0 +1,38 @@
+{
+    "//": "Licensed to the Apache Software Foundation (ASF) under one or more",
+    "//": "contributor license agreements.  See the NOTICE file distributed with",
+    "//": "this work for additional information regarding copyright ownership.",
+    "//": "The ASF licenses this file to You under the Apache License, Version 2.0",
+    "//": "(the \"License\"); you may not use this file except in compliance with",
+    "//": "the License.  You may obtain a copy of the License at",
+    "//": "",
+    "//": "http://www.apache.org/licenses/LICENSE-2.0",
+    "//": "",
+    "//": "Unless required by applicable law or agreed to in writing, software",
+    "//": "distributed under the License is distributed on an \"AS IS\" BASIS,",
+    "//": "WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.",
+    "//": "See the License for the specific language governing permissions and",
+    "//": "limitations under the License.",
+
+    "compilerOptions": {
+        "baseUrl": ".",
+        "sourceMap": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "paths": {
+            "services/*": ["webapp/services/*"],
+            "components/*": ["webapp/components/*"]
+        },
+        "lib": ["es2015"]
+    },
+    "typeRoots": ["webapp","./node_modules/@types"],
+    "moduleResolution": "node",
+    "exclude": [
+        "node_modules",
+        "dist",
+        "css",
+        "coverage",
+        ".cache-loader",
+        "assets"
+    ]
+}
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js
index 6b1c748..889c871 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js
@@ -18,7 +18,6 @@
 import NfRegistryService from 'services/nf-registry.service';
 import nfRegistryAnimations from 'nf-registry.animations';
 import { Router } from '@angular/router';
-import template from './nf-registry-administration.html';
 
 /**
  * NfRegistryAdministration constructor.
@@ -80,7 +79,7 @@
 
 NfRegistryAdministration.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-administration.html',
         animations: [nfRegistryAnimations.slideInLeftAnimation],
         host: {
             '[@routeAnimation]': 'routeAnimation'
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js
index f946401..5c56830 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js
@@ -23,8 +23,6 @@
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import $ from 'jquery';
 
-import template from './nf-registry-add-user-to-groups.html';
-
 /**
  * NfRegistryAddUserToGroups constructor.
  *
@@ -241,7 +239,7 @@
 
 NfRegistryAddUserToGroups.annotations = [
     new Component({
-        template: template
+        templateUrl: './nf-registry-add-user-to-groups.html'
     })
 ];
 
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.js
index 09154c3..9739798 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.js
@@ -20,7 +20,6 @@
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialogRef } from '@angular/material';
 import { FdsSnackBarService } from '@flow-design-system/snackbars';
-import template from './nf-registry-add-user.html';
 
 /**
  * NfRegistryAddUser constructor.
@@ -91,7 +90,7 @@
 
 NfRegistryAddUser.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-add-user.html',
         queries: {
             newUserInput: new ViewChild('newUserInput')
         }
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js
index e4efd8e..c6511fb 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js
@@ -22,7 +22,6 @@
 import NfRegistryService from 'services/nf-registry.service';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import $ from 'jquery';
-import template from './nf-registry-add-users-to-group.html';
 
 /**
  * NfRegistryAddUsersToGroup constructor.
@@ -233,7 +232,7 @@
 
 NfRegistryAddUsersToGroup.annotations = [
     new Component({
-        template: template
+        templateUrl: './nf-registry-add-users-to-group.html'
     })
 ];
 
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js
index 05f0e5b..e2239d0 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js
@@ -20,7 +20,6 @@
 import { FdsSnackBarService } from '@flow-design-system/snackbars';
 import NfRegistryService from 'services/nf-registry.service';
 import { MatDialogRef } from '@angular/material';
-import template from './nf-registry-create-new-group.html';
 
 /**
  * NfRegistryCreateNewGroup constructor.
@@ -92,7 +91,7 @@
 
 NfRegistryCreateNewGroup.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-create-new-group.html',
         queries: {
             createNewGroupInput: new ViewChild('createNewGroupInput')
         }
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
index 7103c84..eee0e30 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
@@ -26,7 +26,6 @@
 import NfStorage from 'services/nf-storage.service';
 import NfRegistryCreateNewGroup from 'components/administration/users/dialogs/create-new-group/nf-registry-create-new-group';
 import NfRegistryAddUser from 'components/administration/users/dialogs/add-user/nf-registry-add-user';
-import template from './nf-registry-users-administration.html';
 
 /**
  * NfRegistryUsersAdministration constructor.
@@ -133,7 +132,7 @@
 
 NfRegistryUsersAdministration.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-users-administration.html',
         animations: [nfRegistryAnimations.slideInLeftAnimation],
         host: {
             '[@routeAnimation]': 'routeAnimation'
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js
index 7efc657..d41f6e0 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js
@@ -24,7 +24,6 @@
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialog } from '@angular/material';
 import NfRegistryAddUsersToGroup from 'components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group';
-import template from './nf-registry-manage-group.html';
 
 /**
  * NfRegistryManageGroup constructor.
@@ -611,7 +610,7 @@
 
 NfRegistryManageGroup.annotations = [
     new Component({
-        template: template
+        templateUrl: './nf-registry-manage-group.html'
     })
 ];
 
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js
index aea8a42..0c74799 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js
@@ -24,7 +24,6 @@
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialog } from '@angular/material';
 import NfRegistryAddUserToGroups from 'components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups';
-import template from './nf-registry-manage-user.html';
 
 /**
  * NfRegistryManageUser constructor.
@@ -631,7 +630,7 @@
 
 NfRegistryManageUser.annotations = [
     new Component({
-        template: template
+        templateUrl: './nf-registry-manage-user.html'
     })
 ];
 
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js
index ae10865..09207db 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket.js
@@ -23,7 +23,6 @@
 import { ActivatedRoute } from '@angular/router';
 import { TdDataTableService } from '@covalent/core';
 import { FdsSnackBarService } from '@flow-design-system/snackbars';
-import template from './nf-registry-add-policy-to-bucket.html';
 
 /**
  * NfRegistryAddPolicyToBucket constructor.
@@ -399,7 +398,7 @@
 
 NfRegistryAddPolicyToBucket.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-add-policy-to-bucket.html',
         queries: {
             readCheckbox: new ViewChild('readCheckbox'),
             writeCheckbox: new ViewChild('writeCheckbox'),
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.js
index 70ff67f..abaaa59 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/create-bucket/nf-registry-create-bucket.js
@@ -20,7 +20,6 @@
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialogRef } from '@angular/material';
 import { FdsSnackBarService } from '@flow-design-system/snackbars';
-import template from './nf-registry-create-bucket.html';
 
 /**
  * NfRegistryCreateBucket constructor.
@@ -91,7 +90,7 @@
 
 NfRegistryCreateBucket.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-create-bucket.html',
         queries: {
             newBucketInput: new ViewChild('newBucketInput')
         }
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.js
index 83d5477..fb40da7 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy.js
@@ -21,7 +21,6 @@
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { ActivatedRoute } from '@angular/router';
-import template from './nf-registry-edit-bucket-policy.html';
 
 /**
  * NfRegistryEditBucketPolicy constructor.
@@ -339,7 +338,7 @@
 
 NfRegistryEditBucketPolicy.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-edit-bucket-policy.html',
         queries: {
             readCheckbox: new ViewChild('readCheckbox'),
             writeCheckbox: new ViewChild('writeCheckbox'),
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.js
index 00fdc92..c823c8c 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.js
@@ -22,7 +22,6 @@
 import nfRegistryAnimations from 'nf-registry.animations';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material';
-import template from './nf-registry-workflow-administration.html';
 
 /**
  * NfRegistryWorkflowAdministration constructor.
@@ -87,7 +86,7 @@
 
 NfRegistryWorkflowAdministration.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-workflow-administration.html',
         animations: [nfRegistryAnimations.slideInLeftAnimation],
         host: {
             '[@routeAnimation]': 'routeAnimation'
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.js
index 89c3622..1d6a71b 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/sidenav/manage-bucket/nf-registry-manage-bucket.js
@@ -26,7 +26,6 @@
 import { MatDialog } from '@angular/material';
 import NfRegistryAddPolicyToBucket from 'components/administration/workflow/dialogs/add-policy-to-bucket/nf-registry-add-policy-to-bucket';
 import NfRegistryEditBucketPolicy from 'components/administration/workflow/dialogs/edit-bucket-policy/nf-registry-edit-bucket-policy';
-import template from './nf-registry-manage-bucket.html';
 
 /**
  * NfRegistryManageBucket constructor.
@@ -490,7 +489,7 @@
 
 NfRegistryManageBucket.annotations = [
     new Component({
-        template: template
+        templateUrl: './nf-registry-manage-bucket.html'
     })
 ];
 
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js
index e8a312b..7ef7459 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js
@@ -21,7 +21,6 @@
 import NfStorage from 'services/nf-storage.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import nfRegistryAnimations from 'nf-registry.animations';
-import template from './nf-registry-grid-list-viewer.html';
 
 /**
  * NfRegistryBucketGridListViewer constructor.
@@ -107,7 +106,7 @@
 
 NfRegistryBucketGridListViewer.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-grid-list-viewer.html',
         animations: [nfRegistryAnimations.flyInOutAnimation]
     })
 ];
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js
index 33b5cdc..6dbe655 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js
@@ -22,7 +22,6 @@
 import NfStorage from 'services/nf-storage.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import nfRegistryAnimations from 'nf-registry.animations';
-import template from './nf-registry-grid-list-viewer.html';
 
 /**
  * NfRegistryDropletGridListViewer constructor.
@@ -109,7 +108,7 @@
 
 NfRegistryDropletGridListViewer.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-grid-list-viewer.html',
         animations: [nfRegistryAnimations.flyInOutAnimation]
     })
 ];
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js
index eda56d3..189961e 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js
@@ -22,7 +22,6 @@
 import NfStorage from 'services/nf-storage.service';
 import { ActivatedRoute } from '@angular/router';
 import nfRegistryAnimations from 'nf-registry.animations';
-import template from './nf-registry-grid-list-viewer.html';
 
 /**
  * NfRegistryGridListViewer constructor.
@@ -85,7 +84,7 @@
 
 NfRegistryGridListViewer.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-grid-list-viewer.html',
         animations: [nfRegistryAnimations.flyInOutAnimation]
     })
 ];
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/nf-registry-explorer.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/nf-registry-explorer.js
index 90fc2c3..3e21ca6 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/nf-registry-explorer.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/explorer/nf-registry-explorer.js
@@ -18,7 +18,6 @@
 import { Component } from '@angular/core';
 import NfRegistryService from 'services/nf-registry.service';
 import nfRegistryAnimations from 'nf-registry.animations';
-import template from './nf-registry-explorer.html';
 
 /**
  * NfRegistryExplorer constructor.
@@ -57,7 +56,7 @@
 
 NfRegistryExplorer.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-explorer.html',
         animations: [nfRegistryAnimations.slideInLeftAnimation],
         host: {
             '[@routeAnimation]': 'routeAnimation'
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.js
index 1648c0a..6412e65 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.js
@@ -20,7 +20,6 @@
 import NfRegistryApi from 'services/nf-registry.api';
 import { MatDialogRef } from '@angular/material';
 import { NfRegistryLoginAuthGuard } from 'services/nf-registry.auth-guard.service';
-import template from './nf-registry-user-login.html';
 
 /**
  * NfRegistryUserLogin constructor.
@@ -62,7 +61,7 @@
 
 NfRegistryUserLogin.annotations = [
     new Component({
-        template: template
+        templateUrl: './nf-registry-user-login.html'
     })
 ];
 
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.js
index 083fe91..eea633b 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.js
@@ -20,7 +20,6 @@
 import NfRegistryService from 'services/nf-registry.service';
 import nfRegistryAnimations from 'nf-registry.animations';
 import NfUserLoginComponent from 'components/login/dialogs/nf-registry-user-login';
-import template from './nf-registry-login.html';
 
 /**
  * NfLoginComponent constructor.
@@ -50,7 +49,7 @@
 
 NfLoginComponent.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-login.html',
         animations: [nfRegistryAnimations.slideInLeftAnimation],
         host: {
             '[@routeAnimation]': 'routeAnimation'
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js
index 0485812..b6fe5d4 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js
@@ -19,7 +19,6 @@
 import nfRegistryAnimations from 'nf-registry.animations';
 import { FdsDialogService } from '@flow-design-system/dialogs';
 import { Router } from '@angular/router';
-import template from './nf-registry-page-not-found.html';
 
 /**
  * NfLoginComponent constructor.
@@ -60,7 +59,7 @@
 
 NfPageNotFoundComponent.annotations = [
     new Component({
-        template,
+        templateUrl: './nf-registry-page-not-found.html',
         animations: [nfRegistryAnimations.slideInLeftAnimation],
         host: {
             '[@routeAnimation]': 'routeAnimation'
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.js
index 57ec92e..bea77d0 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webapp/nf-registry.js
@@ -22,7 +22,6 @@
 import nfRegistryAnimations from 'nf-registry.animations';
 import NfRegistryApi from 'services/nf-registry.api';
 import { Router } from '@angular/router';
-import template from './nf-registry.html';
 
 /**
  * NfRegistry constructor.
@@ -82,7 +81,7 @@
 NfRegistry.annotations = [
     new Component({
         selector: 'nf-registry-app',
-        template,
+        templateUrl: './nf-registry.html',
         queries: {
             sidenav: new ViewChild('sidenav')
         },
diff --git a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.loader.js b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.loader.js
index 25344d7..a432abb 100644
--- a/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.loader.js
+++ b/nifi-registry-core/nifi-registry-web-ui/src/main/webpack.loader.js
@@ -28,6 +28,9 @@
                 loader: 'cache-loader'
             },
             {
+                loader: path.resolve(__dirname, 'angular-url-loader')
+            },
+            {
                 loader: 'ts-loader'
             }
         ]
@@ -52,6 +55,9 @@
                 options: { esModules: true }
             },
             {
+                loader: path.resolve(__dirname, 'angular-url-loader')
+            },
+            {
                 loader: 'ts-loader'
             }
         ]
@@ -90,6 +96,9 @@
                 loader: 'cache-loader'
             },
             {
+                loader: path.resolve(__dirname, 'angular-url-loader')
+            },
+            {
                 loader: 'babel-loader',
                 options: {
                     presets: ['@babel/preset-env']
@@ -118,6 +127,9 @@
                 options: { esModules: true }
             },
             {
+                loader: path.resolve(__dirname, 'angular-url-loader')
+            },
+            {
                 loader: 'babel-loader',
                 options: {
                     presets: ['@babel/preset-env']