I created a solution a while ago that contains a Web API 2 project (provides JSON data to mobile devices) and a Class Library (includes my data access services).
The Web
This 2 projects are independent from each other like 2 different applications even if they are in the same solution.
To succeed what you try to achieve you have to:
1) Deploy your MVC project to www.example.com (main virtual application).
2) Deploy your WebAPI project to www.example.com/api (api folder is a virtual application). Don't forget to remove api from your WebAPI routes (other wise you have to use this route www.example.com/api/api/controller).
Doing this you can acces independently both projects in the same url.
For NInject part, you can register again the services in the MVC project. Another solution will (which i recommend) be to make a class library project and register there the services after that you reference this class library in both projects.
What I like to do, is to have the MVC and WebAPI project in two separate projects (separation of concerns) but let them share the same business logic.
I like to utilize the Command and Query pattern. So all commands and queries is located in another solution project, which both the MVC and WebAPI project has access to.
I deploy the MVC project on the www.domain.com path, the WebAPI project on the api.domain.com and enable CORS on WebAPI for the www origin.