All geek questions in one place

Failed to delete Aurelia routing prior to hashtag.

I have a problem that I cannot solve. It should be possible to remove the previous hashtag in the routes by following the steps specified in RouterConfiguration -> Options-> Push State .

I followed all these steps, see the code below.

app.ts router configuration options

 public configureRouter(config: RouterConfiguration, router: Router) { config.options.pushState = true; config.options.root = '/'; config.map([ { route: 'login', name: 'login', moduleId: 'pages/auth/login', nav: false, title: 'Login', settings: { allow_anonymous: true } } ]); ...

index.html head

 <head> <meta charset="utf-8"> <base href="/"> ...

config.js

 System.config({ baseURL: "/", ...

My login still works only with localhost:9000/#/login , while localhost:9000/login cannot be found. I also tried to implement this in the new Aurelia JSPM skeletal application to no avail ...

Any idea why this is happening and what I can do wrong?

+5
source share
2 answers

For BrowserSync (as described in @Bryandh) you need to configure it so that it always returns to your index.html . Depending on your project, you may have some task file (for example, the Gulp serve task, which is used throughout Aurelia) that needs to be changed.

As an example, I took the Aurelia skeleton navigation project. It has a skeleton-esnext subdirectory that uses Gulp and JSPM to run the application. There is a serve task in the build/tasks/serve.js file that needs to be configured as follows:

 var historyFallback = require('connect-history-api-fallback'); gulp.task('serve', ['build'], function(done) { browserSync({ online: false, open: false, port: 9000, server: { baseDir: ['.'], middleware: [function(req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); next(); }, historyFallback()] } }, done); });

An important part is the historyFallback() middleware. This is automatically provided by BrowserSync. If now you serve an application with this task ( gulp serve or gulp watch ), you can directly access your routes, for example. http://localhost:9000/users . There will no longer be 404, since you are in index.html , which loads Aurelia and processes the /users route.

+1
source

For my views, which are dynamically loaded into the router view container, with the index as the root, I was able to get my project URLs to look like this (in my opinion, this is what you are asking for):

  • http://localhost:2112/
  • http://localhost:2112/jobs
  • http://localhost:2112/discussion

I did not need to change as much code as you used to make it work. The first thing I did was set the base link in my root html file. For me it was index.html.

<base href="/" />

Then I set the click state to true inside the configureRouter() method

 configureRouter(config, route) { ... config.options.pushState = true; ... }
0
source

Source: https://habr.com/ru/post/1271201/

More articles:


All Articles