使用 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 设置为 URL，而是设置为 URL 后面文件的导入内容：

import template from './dashboard.html'

您也可以在屏幕截图中看到这一点。