I have an application in .NET MVC5 with angularJS. I started building it locally. When I publish it, I get the angular template error- the template must have exactly one root element. I checked the templates which are razor files. I tried flipping replace to false but that gives me a service unavailable error page in the place of each template. Has anybody faced this before? Any pointers on where I should start looking? If it is the project setup problem, what are the ways to resolve this?
P.S. I am a beginner in .NET.
Related
I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.
I am pretty new with spring Mvc and new to angular js too. I have been working with integrating an old Spring mvc project which is connected to webapp folder with jsp's in it. What we are doing is creating a war file out of it and deploying it into a tomcat server.
Now I would like to move a new webapp folder with angular js views in it and remove the old jsp views completely. The way I am running it right now is.. start the tomcat server with deployed application and start the angular js as a separate server using grunt.
Could anyone help me with the steps as to how I can combine these two. Please let me know if any information is missing and you need to know further on this.
Thank you.
Until the end of my Angular application development period, I worked with two seperate projects. WebApi and Angular SPA.
Now I am trying to deploy them to our production server and because of the need for seperate SSL certificates, we decided to combine them and run in the same Project. So far so good...
I managed to combine them together and the server side code compiles. Now when I run the app, the first call to the API results in a parse error with the homepage contents (full of html). I understand that this is due to the $urlRouterProvider 's otherwise attribute, routing all the non-routed paths to the root "/".
I need to fix it, excluding the paths which includes /api in them in order to bypass Angular's routing system out of API's way. Any ideas to help?
EDIT: New project is a combination of WebApi (v2 - Asp.Net) and Client App (Angular v1.3.15 on MVC5 views. And yes, html5Mode(true) but doesn't change a thing if turned off).
EDIT2: Forgot to mention, the error is raised from a jQuery ajax call, outside the angular scope. :$
As interesting it is, I realized some other abnormalities in the way WebApi worked. Did some research and found out that it's because of the latest EntityFramework (v6.1.3). During my merge, I updated EF from v6.1.1 so uninstalled and 6.1.3 and installed back 6.1.1 and the problem is solved! That is very odd. EF 6.1.3 should have been a solid release without any breaking changes. Very odd...
Thanks to all who commented and tried to help.
EDIT: After some time, what I realized is this. EF models should be in sync with the Database in order to make successful database calls from WebApi. When I make an ajax call and the db is not in sync with the models, the problems in the question occures. I hope that information helps someone.
Background
I am attempting to develop an AngularJS app that is to be hosted as 'offline html' as part of the Resco MobileCRM software. This software provides offline access to CRM data via its own javascript libraries and this is working fine. I am also able to get a very simple angularjs application working, in terms of retrieving and displaying the data.
The AngularJS application is uploaded to the CRM using the Resco interface and then is download to each client machine via the resco software. The actual files end up in the users AppData folder on each client machine.
Problem
When I introduced routing to the angular app, either using ngRoute or ui-router, I am getting Access Denied errors. The resco software uses the underlying browser, which in my case is IE11. I have narrowed down the error to when angular is attempting to load the partials for the routes.
The offending code is below (angular.js v1.3.15 line 9805)
xhr.open(method, url, true);
From my research, it seems like IE believes I am attempting a CORS request, however I am just attempting to load a file from disk.
Various posts suggest I add the site to 'Trusted Sites', however I am not actually accessing another site. I also cannot host this on a web server as the whole purpose is to have this angular application accessible offline within the Resco MobileCRM application
I also get the same error if I navigate to the AppData folder and run the angularjs application directly from there (i.e. not in the resco application).
Other posts have suggested that I need to replace the XMLHttpRequest created by Angular with XDomainRequest but I am reluctant to change the angular library, especially if I don't understand why.
Would appreciate it if anyone could shed some light on why this is happening and how to fix it.
I have confirmed that this is not possible on any of the browsers. You cannot make xhr requests to files served locally from disk.
I got around this problem for directives by loading my 'partials' in to script tags and referring to the id of these script tags in the directives.
I did not try that with ui.router or ngRoute and instead opted to redesign my application in to a number of smaller application as they did not need to share any context
I'm trying to host my first website. I've made it using angularjs, bootstrap and yeoman as a generator. However when I tried to upload it, I realized that the full size of everything in my folder (including the generated stuff by yeoman) was nearly 100mb.
What files do I actually need to host? Node is nearly 60mb and grunt isn't much smaller. Any advice would be greatly appreciated.
Assuming you have a web server like nginx or apache already on that server, you just need to upload the dist folder that is created when you run grunt build.
You don't need all that generator and node stuff just to host a simple test project.
What you actually need is a single HTML file, called index.html. Include Angular and bootstrap (you can omit this, too, if you can go without fancy styles) and create a file app.js which will hold your application logic.
http://angularjs.org shows this in a neat way on their landing page, just scroll down to 'The basics'
As static angularjs application will contain mainly HTML, CSS and JS files you can host your project on simple apache webserver. (Apache - http://httpd.apache.org/)
If you are making a dynamic angularjs application you will have webservices returning you JSON data. If you implement the restful webservices in Java (using Jersey) you can deploy you entire angularjs application with java webserivce implementation to tomcat web server. (Tomcat - http://tomcat.apache.org/)
Hope this helps!
Decided to answer this old question because its one of the few that show on google when searched.
You do not need to use Grunt anymore, I do not know if this was needed at the time of this question.
instead just do
ng build my-app
this would have saved me some hours.
link to current doc