How to fix "Warning: Unknown prop `ng-app` on tag. Remove this prop from the element" error?

Question

I'm trying to render a webpage through React with the addition of some code the uses Angular. I packaged my page with Webpack. When I run my HTML, I get the following errors:

Warning: Unknown prop `ng-app` on <body> tag. Remove this prop from the element.

Warning: validateDOMNesting(...): <body> cannot appear as a child of <div>.

Warning: Unknown DOM property class. Did you mean className?

Warning: Unknown props `change-background`, `colorcode` on <div> tag. 

Warning: Unknown prop `ng-click` on <li> tag. Remove this prop from the element.

My HTML is:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="cssWEB.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

My JSX file is:

import angular from 'angular';


angular.module('App', [])
  .directive('changeBackground', ['$animate', function($animate) {
    return {
      restrict: 'EA',
      scope: {
        colorcode: '@?'
      },
      link: function($scope, element, attr) {
        element.on('mouseenter', function() {
          element.children().addClass('change-color');
          element.children().css('background-color', $scope.colorcode);
        });
        element.on('mouseleave', function() {
          element.children().removeClass('change-color');
          element.children().css('background-color', '@red');
        });
      }
    };
  }]).directive('myClick', () => {
    return {
      restrict: 'A',
      link: (scope) => {
        scope.clicked = () => {
          console.log('pppp');
          window.location.hash = "#snap1";
        }
      }
    };
  }).directive('click2', () => {
    return {
      restrict: 'A',
      link: (scope) => {
        scope.clicked2 = () => {
          console.log("aaaaaa");
        }
      }
    }
  })

//REACT//
import React from 'react';
import ReactDOM from 'react-dom';
import {Element, scroller} from 'react-scroll';


const Component = React.createClass({
    componentDidMount: function() {
        scroller.scrollTo('myScroller', {
            duration: 1500,
            delay: 500,
            smooth: true
        });
    },

    render: function() {
        return (
            <div>
              <link rel="stylesheet/less" href="style.less" type="text/css" />
              <script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
              <link type="text/javascript" href="jscode.js"></link>


              <header>
                My Page
              </header>

              <body ng-app="App">
                <div class="cube" change-background colorcode="#f45642" ref={(el) => { this.messagesEnd = el; }}>
                  <div class="front"><span>Resume</span></div>
                  <div class="back"></div>
                  <div class="top"></div>
                  <div class="bottom"></div>
                  <div class="left"></div>
                  <div class="right"></div>
                </div>

                <div class="wrap2">
                  <div class="cube" change-background>
                    <div class="front" colorcode="#f45642"><span>Work</span></div>
                    <div class="back"></div>
                    <div class="top"></div>
                    <div class="bottom"></div>
                    <div class="left"></div>
                    <div class="right"></div>
                  </div>
                </div>

                <div class="wrap3">
                  <div class="cube" change-background>
                    <div class="front" colorcode="#f45642"><span>Contact</span></div>
                    <div class="back"></div>
                    <div class="top"></div>
                    <div class="bottom"></div>
                    <div class="left"></div>
                    <div class="right"></div>
                  </div>
                </div>
              </body>

              <Element name="link1">
                <div class="bg2" id="linkhere"></div>
              </Element>

              <div class="slide1">
              </div>

              <div class="slidechild1">
              <div class="centerbox">
              <div class="center">
                <ul>
                  <li ng-click="clicked2()" id="B1">aa</li>
                  <li id="B2">cc.i</li>
                </ul>
              </div>
              </div>
              </div>
            </div>

        );
    }
});

ReactDOM.render(
  <Component />,
  document.getElementById("root")
);

What is raising these errors regarding props? Is this a problem caused by having my file to be .jsx? How can I fix them?

Update:

Using Mathew Cawley's answer I manged to fix some of the errors by using data-ng-app instead of ng-app in all of my ng directives. Now I get the following errors:

Warning: validateDOMNesting(...): <body> cannot appear as a child of <div>.

Warning: Unknown DOM property class. Did you mean className?

Warning: Unknown props `change-background`, `colorcode` on <div> tag. Remove these props from the element.

Just my opinion but I've had better luck including React (or Protractor components for that matter) inside an Angular app rather than the other way around. In then end I think mixing them has more negatives than positives especially considering Angular has directives. I'm a big fan of React but if you need Angular IMO it's better just to use Angular for components as well. — Ynot, Jan 29 '17 at 22:57
@Ynot That was my thought too. I've seen this a couple of times and it soon gets very messy. — Matthew Cawley, Jan 29 '17 at 23:48

score 2 · Accepted Answer · edited May 23 '17 at 12:33

Instead of ng-app try data-ng-app (and prefix data- to all ng-* directives for that matter), angular should still recognize those attributes as angular directives, and other scripts and validators should treat them as standard HTML data-* Attributes and so ignore them and not be offended by their presense.

There is already a post about this markup: ng-app vs. data-ng-app, what is the difference?

UPDATE: To fix other errors/warnings...

Warning: validateDOMNesting(...): <body> cannot appear as a child of <div>.

Declare data-ng-app="App" on the body tag in your index.html file, and remove the <body> tag in the react component's render function all together.

Warning: Unknown DOM property class. Did you mean className? In the react component's render function, change class to className

Updated my answer, apply those two changes and I wonder if the "Unknown props `change-background`, `colorcode` on
tag." warning will go away also. — Matthew Cawley, Jan 29 '17 at 22:33

How to fix "Warning: Unknown prop `ng-app` on tag. Remove this prop from the element" error?

1 Answers1