I'm using the new router (not router-deprecated) in Angular2 RC1. I need to be able to load a JSON configuration file before the app continues loading. I'm using a Config class to grab my JSON configuration, but the problem is, I do not want the router-outlet to load until my configuration has completed loading.
I tried wrapping the <router-outlet> with an *ngIf, only to come across this issue: https://github.com/angular/angular/issues/8539
I also tried extending the <router-outlet>, per this article, but with no luck (doesn't work with RC1)
Angular1 has a way to "reload" the route, but this doesn't seem to be present in NG2.
How can I do this? How can I load my JSON config file after the app has loaded, and the render the app after the configuration has finished? Has anyone else successfully done this?
In the new router (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-interface.html#!#resetConfig-anchor resetConfig can be used
router.resetConfig([
{ path: 'team/:id', component: TeamCmp, children: [
{ path: 'simple', component: SimpleCmp },
{ path: 'user/:name', component: UserCmp }
] }
]);
For your case I would initialize the router with some dummy route and dummy component, then after your JSON is available load new routes and navigate to the new default route.
https://github.com/angular/angular/issues/11437#issuecomment-245995186 provides an RC.6 Plunker
How about considering a loading page? That way, if your data isn't fully loaded yet, it shows a loading page instead of your route.
See this question for suggestions on how to implement a loading screen in Angular2.
Update:
In the other hand, I just find out that we can pre load a data using a route resolver. I'm still learning about it too, and this angular documentation might help.
Related
I have deployed an app in Netlify, the link is: https://www.fluento.net. The website is working correctly, but whenever I try to access for example https://www.fluento.net/start, I get 404 error. If I go to the root url and press on the Start button, I get correctly redirected to https://www.fluento.net/start.
I have searched online and saw it might be a problem with history mode but I can't seem to figure out how to solve the issue.
This is the configuration of the router:
const routes = [
//Some routes in here, 404 not set!
]
const router = createRouter({
history: createWebHistory(),
routes
})
I have seen some solutions to add some configuration to nginx and so on, but my app is deployed in Netlify automatically when pushing to github, so I do not have any nginx configuration file or anything.
Also, I have seen that adding a catch all route and redirecting to index could work (as explained in the vue docs), but it didn't work for me, or maybe I did it wrong. But then again, I do not want to redirect to index, I want to redirect to the correct website according to the URL. And having a catch all means that for any 404 I would be redirecting to the index (which I don't want to do).
Another weird thing I found, is that whenever I type: https://www.fluento.net/privacy or https://www.fluento.net/tos I can reach those pages. This is the view that serves them:
<template>
<iframe src="/tos.html"></iframe>
</template>
<style scoped>
object, iframe {
border: none;
height: 800px;
width: 100%;
min-height: calc(100vh - 125px);
}
</style>
Maybe not having any javascript makes those two routes work? Not sure, because the App component that calls them has some javascript already.
EDIT: For everyone in the same situation, I managed to find a fix. Not setting this as an answer because I don't really understand how this works, and can't explain it. But following this answer Vue Router return 404 when revisit to the url in another question, this is how to implement this in Netlify:
At the end of the routes file in Vue, add this route to catch all the unknown routes and send them to an error page.
{
path: '/:pathMatch(.*)*',
name: 'error404',
component: Error404
}
The error page could be a view like this:
<template>
<p>Not found</p>
</template>
And then create a file in the folder that will be public after the build command is executed. In my case npm run build builds my project and adds the content of public/ folder to the root of the website. So I added a file public/_redirects that will be added in the root of the website.
For example, if my website is https://mywebsite.com, there will be a https://mywebsite.com/_redirects file. This file is not accessible, but Netlify understands and will "compile".
public/_redirects:
/* /index.html 200
This is the part that I am not sure what it does, but please if someone could explain in the comments it would be great. But I think it redirects all the traffic from uncaught urls to the index with the original URL and then the index executes the vue-router.
This is it, if you look for an URL you don't catch in vue-router you should see the 404 page, otherwise you should see the correct view.
Is it were possible to have default routes in Next.js so all routes or a whitelist of routes will all go to a specific page.
For my project the idea is to use Next.js to build the marketing website, sign up and sign in process, and then to have a Next.js page that would boot up an SPA (probably using create-react-app and react-router) so that any route which isn't a Next.js page would assume that instead its a route in the SPA and would therefore direct to that page which would boot up the SPA
One way that seems to work is to create a custom 404 page. https://nextjs.org/docs/advanced-features/custom-error-page
Every route that is not a recognised next.js route will call this page, but will not redirect (change the browser URL) which is exactly what's wanted when booting up an SPA.
I just added a app/page.tsx (pages/page.tsx) and returned the default component like this: (I just needed a default page / entry-page for '/')
'use client';
import AboutUs from './aboutus/page'
const DfltPage = () => {
return (<AboutUs/>)
}
export default DfltPage;
This worked fine for me.
Good afternoon,
I'm a Junior Developer, quite new with Angular, and I'm having some issues with the routing when the path contains parameters. I'm currently using Angular 7.
I have a component where the user can select and ID and two dates and then display data according to these. I also need to this component to display the data by taking the options from the parameters if there's any. I managed to do it without problems and it's working in local but once the app was deployed in the server it wasn't working.
The path I'm using is
myUrl.com/myAPPname/diary/2/2018-12-20/2018-12-20
When adding parameters the browser tries to get the scripts from:
myUrl.com/myAPPname/diary/2/2018-12-20/main.js
myUrl.com/myAPPname/diary/2/2018-12-20/polyfill.js
instead of:
myUrl.com/myAPPname/main.js
myUrl.com/myAPPname/polyfill.js
This component is part of a module loaded with lazy loading from the main module. This is the routing of the module. As I said, it's working in local but it fails when the application is deployed in the server.
const routes: Routes = [
{
path: '', component: LayoutComponent,
children: [
{ path: 'diary', component: DiaryComponent },
{ path: 'diary/:id/:dateFrom/:dateTo', component: DiaryComponent }
]
},
];
Thanks in advance.
The base href you have in your index.html at the root of your project should be something like this:
<head>
<base href="/myAPPname/">
</head>
It is telling Angular which is the root path for retrieveing compiled scripts and resources.
I'm not super experienced with Angular but looks like you defined the path with three parameters :/id/:dateFrom/:dateTo but your URL has only 2. i.e. myUrl.com/myAPPname/diary/2018-12-20/2018-12-20
You might need to pass the :id part as well. Anyhow here's routing guide regarding parameters that could be useful.
Cheers & Good luck :)
I have created a sample app using #RouteConfig and it working fine. See the url changes and view added according to configuration, but when I am refreshing the page it's showing a 404 error.
I am using WebStorm IDE to build and run the app.
The same problem happens with given live example on angular.io.
I have downloaded the sample code example for routing and navigation in AngularJS2 on https://angular.io/resources/live-examples/router/ts/plnkr.html which given on angular.io and opened the project into WebStorm and ran it.
It working fine but after doing some routing and then refreshing the page it shows a 404 Error.
Angular 2 (in default) uses html5 pushState for router states. Which means actual url changes between states.
For example for home page you may be in url: / and you click something, your address becomes /newAddress. This is done using pushState api and pure frontend. But if you refresh page, server tries to render the resource on /newAddress but, of course, there is no such resource on server. You need to configure your server to host / whatever the url is, but I don't know if it is possible or not in WebStorm internal server. You can install and use superstatic npm package.
OR... You can configure Angular 2 to use hashbang based urls (such as /#/ and /#/newAddress). That way, you hit / every time from perspective of backend.
This page has detailed explanation.
Make sure you've included a
<base href="/">
in your head section. Aside from that, we're going to need more information.
This will solve your problem, add this to your bootstrap
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
bootstrap(AppComponent,[ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy })]);
Now whenever you hit a refresh or a hard reload the default component defined in #RouteConfig would be loaded.
in your AppComponent :
#RouteConfig([
{path: '/login', name : 'Login' , component : Login , useAsDefault: true}
])
I've just finished developing my first Backbone app and I detected a small quirk with the Router which I don't seem to be able to fix.
My routes look like this:
routes: {
'': 'index',
'jobs/:id': 'viewJob',
'*default': 'notFound'
}
It works fine when serving the app from the server root, but it doesn't when I serve it from a subfolder. In that case I always get the default route.
I though adding the root param to the backbone history would do the trick so I added it like this:
Backbone.history.start({ pushState: true, root: '/subdir/' });
With this the app seems to load as expected but the Router is automatically adding the root to all the routes and it ends up being duplicated, so when I first visit the website:
http://mysite.com/subdir/
It loads the app and changes it to this:
http://mysite.com/subdir/subdir/
This makes the app to break when reloading the page or using the browser back button as that route doesn't really exist.
What would be the approach to avoid this? I don't want to hardcode the folder name in the routes as it might change or be served from the root.
UPDATE: I've just realized I was adding the duplicated folder name myself using router.navigate somewhere in my code. I just removed it and everything works as expected.
Just a small guess.. do you really want pushState turned on? This can cause problems on reload if the server is not setup to serve out of the new directory.