CODEWITHSUNDEEP
javascriptangularjsimportecmascript-6
Leon Gaban
Leon Gaban

Reputation: 39018

imported component file not working in AngularJS app using es6

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:

enter image description here

Upvotes: 0

Views: 746

Answers (1)

TimoStaudinger
TimoStaudinger

Reputation: 42460

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.

Upvotes: 2

Related Questions