Separating the AngularJS Controllers into Different Files in Qlik Sense Mashup

[Onur_Can_Ak]

I am working on a Qlik Sense Mashup project and I am having a lot of trouble managing AngularJS controllers in separate files. In my mashup, there is almost 30 controllers in a single JS file and it causes so much complexity. My file structure looks like this:

views
    |Home.html
    |FirstPage.html
    |SecondPage.html
MyMashup.css
MyMashup.html
MyMashup.js
MyMashup.qext
wbfolder.wbl
and here is an example of what my code looks like:

// Configurations for connecting to the Qlik Engine
var prefix = window.location.pathname.substr(0, window.location.pathname.toLowerCase().lastIndexOf("/extensions") + 1);
var config = {
host: window.location.hostname,
prefix: prefix,
port: window.location.port,
isSecure: window.location.protocol === "https:"
};
require.config({
baseUrl: (config.isSecure ? "https://" : "http://") + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
});

require(["js/qlik"], function (qlik) {

var appModule = angular.module('myAngularApp', ['ngRoute']);

// route configurations
appModule.config(function ($routeProvider, $locationProvider) {

$locationProvider.hashPrefix('');

$routeProvider

.when('/', {
templateUrl: 'views/Home.html',
controller: 'homeController'
})
.when('/firstPage', {
templateUrl: 'views/FirstPage.html',
controller: 'firstPageController'
})
.when('/secondPage', {
templateUrl: 'views/SecondPage.html',
controller: 'secondPageController'
})

/* and almost 27 controllers goes here */

.otherwise({
redirectTo: "/"
});

});

// home page controller
appModule.controller('homeController', function ($scope, $route) {
// some stuff
});

// first page controller
appModule.controller('firstPageController', function ($scope, $route) {
// some stuff
});

// second page controller
appModule.controller('secondPageController', function ($scope, $route) {
// some stuff
});

//#region qlik sense error message
qlik.setOnError(function (error) {
$('#modalAlertText').html(error.message + "<br>");
});
//#endregion

// bootstrap the angular app
angular.bootstrap(document, ["myAngularApp", "qlik-angular"]);

});
What I want to do is, separate these controllers into different files and import these controllers into my main JS file (which is MyMashup.js). I found a solution in this issue but it didn't work. When I try this, I couldn't be able to import this controller in MyMashup.js file. I am getting an error like 'Uncaught SyntaxError: Cannot use import statement outside a module'

Any ideas about this ? Thanks for your help.