imported component file not working in AngularJS app using es6

Question

Here is the component I'm trying to import ('./dashboard/dashboard_component'):

import template from './dashboard.html'

export default {
    templateUrl: template,
    controller: function($scope, $state) {
        console.log('DASHBOARD component');
    }
}

---

This is how I'm trying to use it

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import login from './login/login_config';
import container from './container/container_config';
import dashboard from './dashboard/dashboard_config';
import dashboard_component from './dashboard/dashboard_component';

console.log('dashboard_component', dashboard_component);

angular
    .module('tickertags', [uiRouter])
    .config(($stateProvider, $urlRouterProvider) => {

    $urlRouterProvider.otherwise('/login');

    $stateProvider
        .state(login)
        .state(container)
        .state(dashboard);
})
.component('dashboardModule', dashboard_component) // <-- Here

// .component('dashboardModule', {
//     templateUrl: 'dashboard/dashboard.html',
//     controller: function($scope, $state) {
//         console.log('DASHBOARD component');
//     }
// })

Why won't it work this way?

Note the commented out code will work, but I'm trying to keep my app clean.

This is what the console.log prints out, it is an object:

Answer 1

In your sub module, you don't set the templateUrl to an URL, but rather to the imported content of the file behind the URL:

import template from './dashboard.html'

You can see that in your screenshot as well.