0

i've tried to create a simple angular1 component with the ui-router but it seems I cannot get it to render and I have 0 error in console...

Here is the code:

Config.ts

module app {
    export class Config {
        constructor(
            $stateProvider: angular.ui.IStateProvider,
            $urlRouterProvider: angular.ui.IUrlRouterProvider,
            $locationProvider: angular.ILocationProvider) {

            $stateProvider.state('home', {
                url: '/Home',
                component: 'home'
            });

            $urlRouterProvider.otherwise('/home');
            $locationProvider.html5Mode(true);
        }
    }

    Config.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
}

app.ts

module app {
    var moduleDependencies = [
        'ui.router'
    ];

    angular.module('app', moduleDependencies)
        .config(app.Config)
        .component('home', app.component.home.HomeComponent); // is it required?
}

home.component.ts

module app.component.home {
    class HomeController {

    }

    export class HomeComponent implements angular.IComponentOptions {
        public controller: any;
        public templateUrl: string;

        constructor() {
            this.controller = HomeController;
            this.templateUrl = 'app/main/components/home/home.html';
        };
    }
}

home.html

<div>test</div>

So what am i doing wrong to use my homecomponent ?

9
  • It isn't Angular 2 where you have component classes. component should be a definition object, not a class. Probably .component('home', { controller: app.component.home.HomeComponent }). Commented Jan 29, 2017 at 5:59
  • tried it and it didn't render my component, Commented Jan 29, 2017 at 14:46
  • Ok, I see that HomeComponent is intended to construct a definition object (this doesn't make much sense, if you need a class for 1 object instance then just define an object). In this case it should be .component('home', new app.component.home.HomeComponent() ) . If this doesn't help, then please, provide MCVE that can replicate a problem. Commented Jan 29, 2017 at 14:59
  • tried already and it's saying: Argument of type '{ controller: HomeComponent; }' is not assignable to parameter of type 'IComponentOptions'. Types of property 'controller' are incompatible. Type 'HomeComponent' is not assignable to type 'string | (new (...args: any[]) => IController) | ((...args: any[]) => void | IController) | (stri...'. Type 'HomeComponent' is not assignable to type '(string | (new (...args: any[]) => IController) | ((...args: any[]) => void | IController))[]'. Property 'length' is missing in type 'HomeComponent'. Commented Jan 29, 2017 at 15:21
  • i dont know how to provide a plunkr with typescript and angularjs Commented Jan 29, 2017 at 15:21

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.