导入的组件文件使用es6在AngularJS应用程序中不起作用

Question

以下是我要导入的组件（'./dashboard/dashboard_component'）：

import template from './dashboard.html'

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

这就是我尝试使用它的方式

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');
//     }
// })

为什么它不会这样工作？

请注意注释掉的代码可以使用，但我正在努力保持我的应用程序干净。

这是console.log打印出来的，它是一个对象：

Answer 1

在您的子模块中，您不必将templateUrl设置为网址，而是设置网址后面文件的导入内容：

import template from './dashboard.html'

您也可以在截图中看到。