ngReact can't find my react component

I've been trying to get this to work for ages, but no matter what I do the directive can't find my react component.

These are the files I'm including:

<script src="bower_components/react/JSXTransformer.js"></script>
<script src="bower_components/react/react-with-addons.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
<script src="node_modules/babel-core/browser.js"></script>
<script src="static/react-components.min.js" type="text/babel"></script>
<script src="static/main.min.js"></script>

Where my components are inside the react-components.min.js file, and all of my angular code is inside main.min.js.

It's stated that you (might(?)) need to use an in browser transformator for this directive to work, so I tried that using babel, but that also doesn't work.

This is my react component:

<react-component name="Chat" watch-depth="reference"></react-component>

And in the react-components.min.js file I got a component called 'Chat':

var Chat = React.createClass({
   render: function() {
    return <footer className="chat chat--dark">Hello John</footer>;
  }
});

core.value('Chat', Chat); // My application is bound to the core module

But it doesn't find it.. What could be wrong because no one else seems to have this issue?

Solution

JSX Compilation Issue

I believe it is a compilation error. I ran your code through an online compiler (https://babeljs.io/repl/) swap your current component code out with the block below and see if it works:

"use strict";

var Chat = React.createClass({
  displayName: "Chat",

  render: function render() {
    return React.createElement(
      "footer",
      { className: "chat chat--dark" },
      "Hello John"
    );
  }
});

core.value('Chat', Chat); // My application is bound to the core module

JSXTransformer is deprecated you should add in a build step that uses Babel. https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

Check out my blog post for the breakdown on adding JSX and ES6 support. http://blog.tylerbuchea.com/migrating-angular-project-to-react/