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 ?

Vince
  • 1,279
  • 2
  • 20
  • 40
  • 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 })`. – Estus Flask Jan 29 '17 at 05:59
  • tried it and it didn't render my component, – Vince Jan 29 '17 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](http://stackoverflow.com/help/mcve) that can replicate a problem. – Estus Flask Jan 29 '17 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'. – Vince Jan 29 '17 at 15:21
  • i dont know how to provide a plunkr with typescript and angularjs – Vince Jan 29 '17 at 15:21
  • You're trying to assign a function to the place where an object is expected. You should instantiate it, **new** app.component.home.HomeComponent **()**, it's in the previous comment. – Estus Flask Jan 29 '17 at 15:52
  • still 0 error but it doesn't render my component – Vince Jan 29 '17 at 16:32
  • I don't think that anybody can help you with the question in its current state. Questions without MCVE are considered offtopic. You can google for 'plunker typescript' to find out how those two are used together. – Estus Flask Jan 29 '17 at 16:41
  • ohh i got it working!!! the error was pretty stupid and was in my route definition.... redirect to /home and my home url was /Home it's case sensitive! and the new component is the right thing to do! thx a lot :) – Vince Jan 29 '17 at 16:46

0 Answers0