Angular Js Unexpected Token error Dynamic Routes - node.js

I'm getting getting several "unexpected token <" errors when I try to create a dynamic route.
Normal routes work fine. So if I set the following route:
.when('/user',{
templateUrl: 'views/user/new',
controller: "addUserCtrl"
})
The request goes to the server and gets caught by my express catch all route handler, then angular kicks in and requests express' api route, api/user, binds data, controller and template and I see a nice page. Everything works fine. No errors.
If I try to create a dynamic route or a route with more depth, I get the unexpected token error, when I try to request that route:
.when('/user/:id',{
templateUrl: 'views/user/new',
controller: "addUserCtrl"
})
For example, when I request /user/3, i get the error, and it the addUserCtrl is never called. Any ideas what could be causing this.
.when('/user/show,{
templateUrl: 'views/user/new',
controller: "addUserCtrl"
})
requesting /user/show will also throw the error. In the console the error shows up next to the request for all of angular files (angular.js, App.js, services.js, controllers.js, filters.js, directives.js) that I load in the body of my index.html.
I've noticed that this problem happens whenever I add more than one slash to the route. If I try /user/show, I can see the following requests:
/user/show
syntax errors for the below:
/user/js/App.js
/user/js/lib/angular/angular.js
/user/js/filters.js
/user/js/controllers.js'
/user/js/services.js
/user/js/directives.js
If I try /abc/def, I will get the following request:
/abc/def
syntax errors for the below:
/abc/js/App.js
/abc/js/lib/angular/angular.js
/abc/js/filters.js
/abc/js/controllers.js'
/abc/js/services.js
/abc/js/directives.js

I had the same issue and just as atentaten describes the problem was caused by relative paths to js-files. However, it has nothing to do with Express. It can just as well be caused by relative include paths from script tags in the head of a html file. So, to clarify, I changed my HTML from:
<script src="bower_components/angular/angular.js"></script>
to:
<script src="/bower_components/angular/angular.js"></script>

Apparently this is not really an angular issue, but an express issue.
The problem was that the beginning slashes were missing from my angular js includes in my index.jade:
script(src='js/lib/angular/angular.js')
script(src='js/App.js')
script(src='js/services.js')
script(src='js/controllers.js')
script(src='js/filters.js')
script(src='js/directives.js')
I changed them to this:
script(src='/js/lib/angular/angular.js')
script(src='/js/App.js')
script(src='/js/services.js')
script(src='/js/controllers.js')
script(src='/js/filters.js')
script(src='/js/directives.js')
And the errors went away. Although the js loaded without the starting slash, it was still causing a problem with express, creating the syntax error, which probably broke angular, but I'm not sure exactly why.

The templateUrl needs to be absolute else Express will choke if there is more than one slash/level of depth in the url:
.when('/user/show,{
templateUrl: '/views/user/new', /* add slash */
controller: "addUserCtrl"
})

This happens for ui-router dynamic route in angularJS application. I have the same error. solved by changing the path
<script src="app/components/services/campaign.services.js"></script>
to
<script src="/app/components/services/campaign.services.js"></script>
But in my case index.html file path is generated by gulp task gulp-inject so i changes the config of gulp-inject like
inject: { addRootSlash: true }
and it works for me :)

Related

Cannot execute any statement in express route except last

I have set up an express route, which is expected to serve an HTML file, which is this:
app.use('/',express.static("../first-app/dist"));
var filepath=path.join(__dirname,"..","first-app","dist","index.html");
app.get('/', (req, res) => {
console.log("hello");
console.log("hello");
res.sendFile(filepath);
});
When '/' route is hit, the file is served correctly but none of the statement above res.sendFile is being executed. This is little bit strange because the statements are expected to execute in sequence. No matter what I write above the last line, nothing will execute.
Please help me to find the problem in this.
Thanks in advance.
If the response/file is getting sent, if these are all your routes and if you don't see the output from console.log("hello");, then the only possible answer is that this route:
app.use('/',express.static("../first-app/dist"));
is what is sending the file. From your code, it looks like this will be the case because index.html is inside the ../first-app/dist and if express.static() gets a request for /, then it looks for index.html in the target directory. If it finds it, then it sends it and routing does not continue any further.
So, you have a couple possible solutions.
Move index.html somewhere else so express.static() doesn't find it and then change where you build filepath from to the new location of index.html.
Add an option to express.static("../first-app/dist", {index: false}) to tell it not to look forindex.htmlif the path is/`. You can see that option documented here.
Move the app.get('/', ...) route before the express.static() route so it gets the request first.

Not found route not found in Sailsjs

Based on Sailsjs documentation, it is possible to add on the routes file a response with a syntax like this:
module.exports.routes = {
'/foo': {response: 'notFound'}
};
This searches for the notFound.js file in the /response directory, which I've in there.
So in my routes.js file I've added this as the end of the other routes in order to catch the not found routes, it is something like this:
module.exports.routes = {
'get /myroute/:myPara/': 'MyController.getAll',
'get /myroute/:myPara/': 'MyController.getOne',
'post /myroute/:myPara/': 'MyController.create',
'/*' : {response: 'notFound'}
};
I've realized that never finds the last route, I've also tried removing the slash ( doing '*' ), but nothing works.
Am I missing something? Thanks!
Sails already take care of the 404 notFound : here
Sails call res.notFound() and you can override the default notFound():
res.notFound() (like other userland response methods) can be overridden or modified. It runs the response method defined in /responses/notFound.js, which is bundled automatically in newly generated Sails apps. If a notFound.js response method does not exist in your app, Sails will implicitly use the default behavior.

HTML5 mode - ui-router - Uncaught SyntaxError: Unexpected token <

Trying hard to get html5 mode to play nicely with ui-router but there just seems to be loads of problems
One I can't get around at the moment is very strange so any suggestions appreciated.
I have these states:
.state('app', {
url: '/app',
templateUrl: 'views/app/app.html',
resolve: {
loggedin: checkLoggedin
}
})
.state('app.docs', {
url: "/docs",
templateUrl: "views/app/app.docs.html",
controller: "DocsController"
})
.state('app.create-doc', {
url: "/docs/create",
templateUrl: "views/app/app.editor.html",
controller: "DocController"
})
.state('app.edit-doc', {
url: "/docs/:short",
templateUrl: "views/app/app.editor.html",
controller: "DocController"
})
.state('app.account', {
url: "/account",
templateUrl: "views/app/app.account.html",
controller: "AccountController"
})
When NOT in html5 mode (using the hashbang), and I navigate to /#/app/docs/create everything works fine with no errors in the console.
However, when IN html5 mode and I navigate to /app/docs/create I get a whole load of errors in the console stating Uncaught SyntaxError: Unexpected token < for each of my Controllers and Services.
I'm sorry I can't be more detailed on this but I simply haven't got a clue what's causing the issue???
One big thing to look at is your URLs. Try putting a '/' in front of both your templateUrls and your Javascript include URLs so they're absolute URLs. That error is very common when the browser tries to access a JS file and it gets HTML back (usually a 404 page) instead.
As soon as you start viewing a URL like "/docs/create" the browser is going to treat relative URLs as sub-paths under there, and can easily lead to this error if you aren't trapping for it. (Looking at the Network tab in your debugger above could help confirm this.)

Derbyjs TEMPLATE ERROR

I just started trying out Derbyjs, and I already ran into a problem. I can't find any support for this error, and most likely is some dumb mistake i'm making.
I'm trying to render a view, following the example from the www.derbyjs.com documentation.
My app is as simple as this:
var app = require('derby').createApp(module);
app.get('/', function (page, model) {
page.render('home');
});
My views are composed by two files.
"index.html"
<import: src="home">
<Body:>
Default page content
"home.html"
<Body:>
Welcome to the home page
I get the following error whenever the page is rendered:
TEMPLATE ERROR
Error: Template import of 'home'... ...can't contain content
As you can see, it is a very simple example. What am I missing?
I get that error even if I have the "home.html" file empty.
Well, I got the answer from one of the developers.
It seems like there was a subtle bug in the Template Parser that probably has already been fixed.
Having a whitespace or linebreak in front of
<import: src="home">
was causing the parser to raise the error. Writing
<import: src="home"><Body:>
solved the issue.

Railway.js + Jade crashes when a route to '/client' is defined

I get this weird error when I add a route '/client' in Railway.js:
500 ReferenceError: jade is not defined
I get this for any valid route in my app, not only '/client'. This line seems to be added to the top of my Jade compiled templates, and is what causes the exception:
var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;
It is not present in the compiled templates unless I define a route do '/client'.
'/client/:id?', '/clients', everything else works, only '/client'.
Anyone has a clue?
I had this exact same error when I was working on an ExpressJS app using jade templates. I figured out it was only happening on pages where I passed a local variable named client. E.g.
res.render('admin/project_new', {
title: 'Edit Project',
message: req.flash(),
client: someClient
});
I think client is a reserved word when rendering jade files (or maybe something else, I'm still kinda new to Node.js). I was able to fix it by changing it to this:
res.render('admin/project_new', {
title: 'Edit Project',
message: req.flash(),
theClient: someClient
});

Resources