This is what i have i a child routing( from work --> index.js)
.map(acceptedTypes).buildNavigationModel().mapUnknownRoutes('code404', 'code404');
how can i redirect it to the parent code404 ?
my folder looks like this.
App |
viewmodels |
shell.js
code404.js
home.js
work |
index.js
office.js
views |
error:
View Not Found. Searched for "views/work/code404
this will work but will breack the page
.mapUnknownRoutes(function () { return router.navigate('#code404'); }, 'code404');
This is how i do it. 'Users' matches my route.
childRouter.mapUnknownRoutes('Users', '#membership/Users');
Related
I'm trying to create a nested route inside my nextjs project, but i'm receiving a 404 page not found when trying to request the page.
I have a route named /dashboard/repository/blender where blender is a dynamic name that the user can input and that works fine.
But the next step is then to create a subpage for that dynamic route which is named tags, and that's where I receive the 404. (/dashboard/repository/blender/tags)
Here's a screenshot of what i've tried to achieve the tags nested routing
Secondly I have also tried doing the following
What can I do to achieve this ?
Try that structure please
dashboard (folder)
-repository (folder)
--[blender] (folder)
----tags.tsx (file)
example urls
/dashboard/repository/blender/tags
/dashboard/repository/surrender/tags
...
In your component, you can get it like below
tags.tsx
import { useRouter } from 'next/router'
const C = () => {
const router = useRouter()
const { blender } = router.query;
console.log(blender)
}
Solved it with
- /dashboard/repository/[repository]/index.js
- /dashboard/repository/[repository]/tags.js
I have a html file, being generated by a third party library that I need to serve on a route in a node server.
The html file and the related css files are generated in a folder called public having the following structure.
src -|
| - public -|
| | - css -|
| | | - css-file.css
| | - index.html
| - server.js
The html file refers to the css file as
<link rel="stylesheet" href="css/css-file.css" />
I cannot change this, as the index.html and the related css file is being generated by a third party library.
In the server.js file, I have the following code
app.use(express.static(path.join(__dirname, './public')));
app.get('/path/one',(req, res) => {
res.set({'Content-Type': 'text/html'});
res.sendFile(path.join(__dirname, './public/index.html'))
}
app.get('/pathTwo', (req, res) => {
res.set({'Content-Type': 'text/html'});
res.sendFile(path.join(__dirname, './public/index.html'))
}
The css file gets picked up on /pathTwo, but does not get picked up on /path/one. I am not able to figure out why.
Edit
One thing that I notice from the logs
For /path/one, node is looking for the file at the location /path/css/css-file.css and not at /css/css-file.css
From express docs for express.static
The function determines the file to serve by combining req.url with the provided root directory.
Thanks in advance for your help
WORKAROUND
Found a workaround for this.
Looking at the logs and the network calls, for the css, the following call is being made for fetching the css file
GET /path/css/css-file.css
This call fails with a 404, resulting in the css not being used for the html.
I added a new route in the server, as below
app.get(`path/css/:fileName`, (req, res) => {
const fileName = req.params.fileName;
const filePath = path.join(__dirname, `./public/css/${fileName}`);
res.set({'Content-Type', 'test/css'})
res.sendFile(filePath);
}
This returns the CSS file from the desired path, and ultimately being used by the HTML file.
This seems to be just a workaround, and not a solution from within express.static.
Hope that someone would provide a solution here.
Thanks in advance!!
Problem
I am trying to write a Single Page Application (SPA) where initially the app shows module "A". When the user clicks an element in "A", module "B" is displayed and is passed an ID from A. (For example A displays a list of Employee IDs, clicking on one employee means B will display details of that employee)
Initially my URL is :
http://localhost:8000/
Clicking on an item in A with an id of 123, the URL changes to following which is correct:
http://localhost:8000/A/123
However, I get the following error
GET http://localhost:8000/b/js/viewModels/B.js net::ERR_ABORTED 404 (Not Found)
ojModule failed to load viewModels/B
ojlogger.js:257 Error: Script error for "viewModels/B"
I do not know why it has changed the path and added an extra "/b/" to get the B.js/B.html file. Of course it can not find this file as there is no such folder "b" in my project structure.
Oracle Jet Cookbook Sample
https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=router&demo=stateParams
I am using the sample in the OracleJet Cookbook for a Router with State Parameters. If you open this example in full screen you see that the URL for the first screen (A) is
https://www.oracle.com/webfolder/technetwork/jet/content/router-stateParams/demo.html
Clicking on a person in the list changes the URL to the following, which is the same as mine.
https://www.oracle.com/webfolder/technetwork/jet/content/router-stateParams/demo.html/detail/7566
This cookbook sample does not error like mine.
My Code
project structure
src
|- index.html
|- js
|- main.js
|- viewModels
|- A.js
|- B.js
|- views
|- A.html
|- B.html
index.html
....
<body>
<div id="routing-container">
<div data-bind="ojModule:router.moduleConfig"></div>
</div>
</body>
....
main.js
requirejs.config(
{
baseUrl: 'js',
....
}
require(['ojs/ojbootstrap', 'ojs/ojrouter', 'knockout', 'ojs/ojmodule-element-utils', 'ojs/ojknockout', 'ojs/ojmodule'],
function (Bootstrap, Router, ko) {
// Retrieve the router static instance and configure the states
var router = Router.rootInstance;
router.configure({
'a': {label: 'a', value: 'A', isDefault: true},
'b/{id}': {label: 'b', value: 'B' }
});
var viewModel = {
router: router
};
Bootstrap.whenDocumentReady().then(
function(){
ko.applyBindings(viewModel, document.getElementById('routing-container'));
Router.sync();
}
);
});
A.html
....
<div on-click="[[onClicked]]" >
....
</div>
...
A.js
define(['ojs/ojcore', 'ojs/ojrouter', 'knockout', '],
function (oj, Router, ko) {
function AViewModel(params) {
....
router = Router.rootInstance;
....
this.onClicked= function(event) {
router.go('b/'+ 123);
}
....
};
}
return AViewModel;
}
Attempts
I have tried adding one of the following in "main.js" and it doesn't make a difference.
Router.defaults['baseUrl'] = '';
Router.defaults['baseUrl'] = 'js';
Router.defaults['baseUrl'] = '/js';
Router.defaults['baseUrl'] = '/js/';
Updated answer after gleeming more information
I have finally resolved this with some advice from a colleague.
Make sure the "baseUrl" specified in your requireJS is absolute when you are using the urlPathAdapter router.
main.js
requirejs.config(
{
baseUrl: '/js',
RequireJS's baseUrl is used as the starting location for RequireJS to download its relative content. Most of the time its set to "js" but that will not work nicely with the UrlPathAdapter router. This is because the router will change the URL which RequireJS tries to add its path to when its not absolute. The result is that the path requireJS is trying to use to get its content is invalid.
For example:
you accessed your app with the URL "protocol://server:port/my/app"
RequireJS will try and access content by appending "js", for example "protocol://server:port/my/app/js/viewModel/..." which works when you are at the root of your application
you use the router to navigate to a different url, the url is now "protocol://server:port/my/app/newPath"
now RequireJS will try and use the URL "protocol://server:port/my/app/newPath/js/viewModel" which is wrong
When the RequireJS baseURL is absolute, it will always be added to the apps URL, for example "protocol://server:port/my/app/js/viewModel" where the content will be found
NOTE: I also ensured the baseUrl in "path-mapping" was absolute as well
path_mapping.json
{
"baseUrl": "/js",
Another solution was to change my router adapter from the default urlPathAdapter to urlParamAdapter.
Router.defaults.urlAdapter = new Router.urlParamAdapter();
var router = Router.rootInstance;
I have a ASP.NET 4 Web Forms project written in C#. I would like to add Angular 2. I've seen a lot of examples on the web using ASP.NET 5 but I can't figure out how to do it in my project.
Have faced similar requirement and did some POC on this and definitely moving forward with it . I worked on with each .aspx page as stand alone angular 2 SPA app. This means each aspx page will have its own App.Component.ts and main.ts file(file name based on Angular 2 documentation). main.ts file contains the code to bootstrap the application (sample code below) so there will be a main.ts file for each .aspx page.
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_BINDINGS} from 'angular2/http';
import {HomeComponent} from './home.component';
bootstrap(HomeComponent, [HTTP_BINDINGS])
.catch(err => console.error(err));
There will be one app.component.ts(named it home.component.ts for my home.aspx) file for each aspx page.
Now in the config file which contains Sytem.config details i defined new map and package entry for my home.aspx as shown below:
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true,
experimentalDecorators: true
},
map: {
app: '../../Javascript/angular/app',
home: '../../Javascript/angular/home'
},
packages: {
app: { main: './main.ts', defaultExtension: 'ts'},
home: { defaultExtension: 'ts' }
}
});
And finally I moved the System.import code part to .aspx page(code below). Each page will import its own package defined in sytem.config.
<script>
System
.import('home/main-home')
.catch(console.error.bind(console));
</script>
here i have named my main.ts as main-home.ts.
Hopefully this helps you and others. Also i am open for suggestion and review/alternate solution of this approach.
For reference please see: bootstrapping-multiple-angular-2-applications-on-the-same-page
I totally agree with #pawan's answer but yes #pawan i found a nice solution of this. This solution definitely helped me and hope it will help all of you too.
We don't need to create main.ts and AppComponent.ts for each and every page.
We need to make our main component which we are bootstrapping dynamic. In our case, in app.component.ts, i am bootstrapping our component dynamically based on url of current page.
Let's say if your page is home.aspx then boostrap HomeComponent or about.aspx then boostrap AboutComponent
I am doing it by implementing ngDoBootstrap method as following.
export class AppModule {
url : string;
constructor(#Inject(DOCUMENT) private document: any){
this.url = this.document.location.href.toLowerCase();
}
ngDoBootstrap(app:ApplicationRef){
if(this.url.indexOf("home.aspx") > 0){
app.bootstrap(HomeComponent);
}
else if(this.url.indexOf("about.aspx") > 0){
app.bootstrap(AboutComponent);
}
}
}
This is how based on page url, we can dynamically bootstrap our Component and save a lot files of main.ts and app.component.ts for each page.
For this, you need to add entry for each component into entryComponents array of NgModule as below:
#NgModule({
entryComponents : [
HomeComponent,
AboutComponent,
]
})
Hope this helps.
change your index.html base route to your webpage
<base href="/YourWebPageRoute">
include the page inside the webform
<% Response.WriteFile("index.html"); %>
I recently added the node-blade smart package to my meteor and have static content displaying fine. However, I'm not able to use any template variables. Before I installed blade, the template variables worked fine with handlebars. Does anybody know what I'm doing wrong?
console output
ReferenceError: player is not defined
at ~/meteor/project/views/info.blade:1:1
1 > .player-name.large= player.name
2 | .alliance-name= alliance.name
3 | .world-name= world.name
4 |
at eval (eval at <anonymous> (/usr/local/lib/node_modules/blade/lib/compiler.js:138:23))
at /usr/local/lib/node_modules/blade/lib/runtime.js:323:5
at runtime.loadTemplate (/usr/local/lib/node_modules/blade/lib/runtime.js:272:6)
at /usr/local/lib/node_modules/blade/lib/blade.js:45:4
at Compiler.compile (/usr/local/lib/node_modules/blade/lib/compiler.js:185:2)
at compile (/usr/local/lib/node_modules/blade/lib/blade.js:41:12)
at Object.compileFile (/usr/local/lib/node_modules/blade/lib/blade.js:66:3)
at Object.runtime.loadTemplate (/usr/local/lib/node_modules/blade/lib/runtime.js:269:23)
at Object.runtime.include (/usr/local/lib/node_modules/blade/lib/runtime.js:320:22)
at eval (eval at <anonymous> (/usr/local/lib/node_modules/blade/lib/compiler.js:138:23))
Your application is crashing. Waiting for file change.
info.blade
.player-name.large= player.name
client.js
if(Meteor.is_client) {
Template.info.player = function(){
var data = Session.get( 'data' );
return data.player;
};
}
EDIT: Helpers are now permitted in body templates.
You cannot use helpers or certain global variables in head or body templates. You can't even use them in templates that are included by head or body templates.
Checkout these links for more information:
https://github.com/bminer/node-blade/issues/98
https://github.com/bminer/node-blade/wiki/Using-Blade-with-Meteor
EDIT: This answer is no longer accurate as of Blade 3.0.0 stable. body.blade templates may not contain dynamic stuff like helpers, references to Session, etc.
In 'Using Blade with Meteor' says that
References to Session are not allowed in head or body templates. This is by design, and it is not a bug. In Handlebars, you could use Session or Meteor within a tag, but not a tag. I didn't like the Handlebars implementation, so you're stuck with this one. The body.blade template is mostly for static content (i.e. a loading page or whatever). Once your application is loaded, you can do $("body").replaceWith(Meteor.ui.render(Template.homepage) ); from your application code.
So, this is saying that, on initialization, one could not have dynamic generated templates.
To workaround this, documentation suggests
$("body").replaceWith(Meteor.ui.render(Template.homepage) )
I replaced replaceWith method with html method. See an example that's working for me:
# ./the_cow.coffee
if Meteor.isClient
$ ->
$('body').html Meteor.render -> Template.test
user:
name: 'Pill'
# ./views/test.blade
#test Testing
p= user.name
See the compiled JavaScript:
if (Meteor.isClient) {
$(function() {
return $('body').html(Meteor.render(function() {
return Template.test({
user: {
name: 'Pill'
}
});
}));
});
}
Don't know if there is a shorter way to write it.