Migrated to @ui-router from angular-ui-router, not able to route to React

[mrbenhowl]

Hi there,

I'm working on a Angular 1 project. Recently I migrated from angular-ui-router to @ui-router using the guide https://ui-router.github.io/guide/ng1/migrate-to-1_0

Rather than migrate fully to the new transitions hook model, I used the polyfill to keep the $stateChangeStart events. After following the guide and fixing a couple of breaking changes, the app is working as before.

I'm now trying to route directly to a React component and I'm not having any luck. The error I'm seeing is

Error: [$injector:unpr] Unknown provider: function TestComponent() {
    _classCallCheck(this, TestComponent); 
    
    return _possibleConstructorReturn(this, _getPrototypeOf(TestComponent).apply(this, arguments));
  }DirectiveProvider <- function TestComponent() {
    _classCallCheck(this, TestComponent);

    return _possibleConstructorReturn(this, _getPrototypeOf(TestComponent).apply(this, arguments));
}

The ui-router config for the part of the app where I'm trying to route to a React component is:

Import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
import TestComponent from './TestComponent'

const moduleName = module.exports = 'module.name.here'

angular
  .module(moduleName, [
    'ui.router',
    UI_ROUTER_REACT_HYBRID,
  ])
  .config(function($stateProvider) {
    
    $stateProvider
    .state('main.something', {
      url: '/something',
      abstract: true,
      views: {
        '': {
          template: '<ui-view></ui-view>',
        },
      }
    })
    .state('main.something.overview', {
      url: '',
      $type: "react", // tried this without it
      component: TestComponent
    })
  })

The React component is

import React, { Component } from 'react'

class TestComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello from react class component</h1>
      </div>
    )
  }
}

My package.json has the following dependencies:

"angular": "1.5.9",
"@uirouter/react-hybrid": "^1.0.2"

I believe this is definitely something I'm doing wrong. Any help is appreciated.

[mrbenhowl]

Figured this out with a fellow dev. Posting here in case anyone else has the same issue.

In our ui-router config as shown above we were using '' to represent the default view.

views: {
  '': {
     template: '<ui-view></ui-view>',
   },
}

Instead of '' add $default

views: {
  '$default': {
     template: '<ui-view></ui-view>',
   },
}