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.)
Related
I would like to use nested routing for complex pages inside an ionic app. I leave the main ion-router-outlet in tact, and can navigate between top-level pages without any problems. Inside those top level pages, deep inside content, I would like to use child routes to show content, and deep linking should work, so the angular router is ideal for this using router-outlet. However, after navigating through the app to a different top-level page and returning to a previously displayed top-level page, the routing for that page stops working entirely. The URL is updated though.
I have already tried using ion-tabs, removing lazy loaded modules, and have enabled all error reporting and route tracing. No errors are reported, routes seemingly activate, but the routing just does not work.
I have tried using ion-tabs and nested ion-router-outlets, none of which work.
See https://github.com/johanvdb/ionic-4-router-issue
The expected outcome should be nested components rendering in the relevant router-outlets without any problems.
You must have several app.routing.module.ts, The parent routing module and as many children as you want; In the parent routing module you must refer to the children in the following way:
app.routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './auth/login/login.module#LoginPageModule' },
{ path: 'register', loadChildren: './auth/register/register.module#RegisterPageModule' },
{
path: 'members',
loadChildren: './members/member-routing.module#MemberRoutingModule'
}
];
In this example member.routing.module.ts is the child routing module and app.routing.module.tsis the main one (parent).
In member.routing.module.ts you should define the rutes /members/{somepage}
I've made this project with AdonisJS, this is PlaceController file content:
async create({
view
}) {
return view.render('places.new')
}
and this is view file path: views/places/new.edge which is a simple static HTML file.
and the routes.js file content:
Route.get('admin/places/new', 'PlaceController.create')
when I enter the URL in browser, the URL just disappears.the problem solves by removing admin from route. Is there a bug in this framework or am I doing something wrong?
So problem solved. another Route caused this problem.
it was
Route.get('admin/places/:id', 'PlaceController.edit').middleware(['admin'])
Route.get('admin/places/new/', 'PlaceController.create').middleware(['admin'])
changed the order to:
Route.get('admin/places/new/', 'PlaceController.create').middleware(['admin'])
Route.get('admin/places/:id', 'PlaceController.edit').middleware(['admin'])
now it works.
Generally:
Do these four systems have caches? And if so, what is the method for clearing each?
Specifically:
Having trouble with a react app we are developing. Seemingly sporadically we get the following error when developing locally:
"Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as `Relay.QL`."
Am yet to notice any particular reason why/when this starts happening.
I finally found a hack solution which involved me going into the referenced component file referenced (further in the error msg, unshown) and deleting the RelayQL fragment inside e.g.
export default Relay.createContainer(PinterestShare, {
fragments: {
resource: () => Relay.QL`
fragment on Resource {
id
title
files {
type
images {
medium { url width }
}
}
}
`
}
});
to
export default Relay.createContainer(PinterestShare, {
fragments: {
resource: () => Relay.QL`
`
}
});
I then save, and reboot the app. It crashes, obviously, as the fragment is malformed. So I undo the change back to the original, and reboot the app again. Now, the original error is fixed, despite no code actually changing.
So what happened? Somehow doing this process is flushing some cache? Is this in node, webpack, relay, or babel? I've tried rebooting my machine inbetween, as well as killall node, neither which work, which implies to me it is not RAM based...
The annoying part now is I am having to do this for all of my individual component files. Surely there must be a way to purge this mystery cache enmass for the whole app?
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 :)
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
});