使用 angular4 将 hash-url 更改为 hash-bang url

Question

我正在使用 angulr4 这是我的 URL http://localhost/#/login.html I want to change this url to http://localhost/#!/login.html. I found solution for angularjs but not for angular4. I am using "Prerender Node" for SEO regarding this is link https://www.npmjs.com/package/prerender-node

提前致谢

Answer 1

你追求的是APP_BASE_HREF。在您的路由模块 app-routing.module.ts 中添加到您的模块 providers 数组 { provide: APP_BASE_HREF, useValue: '!' } 并在文件顶部导入 import { APP_BASE_HREF } from '@angular/common';。看起来您已经在使用 HashLocationStrategy.

例子 app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule} from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';

const routes: Routes = [
  { path: '**', redirectTo: '404-not-found' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true
    })
  ],
  exports: [ RouterModule ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '!' }
  ]
})
export class AppRoutingModule {}

进一步阅读 Angular 4 个文档

PathLocationStrategy:

PathLocationStrategy is a LocationStrategy used to configure the Location service to represent its state in the path of the browser's URL.

If you're using PathLocationStrategy, you must provide a APP_BASE_HREF or add a base element to the document. This URL prefix that will be preserved when generating and recognizing URLs.

For instance, if you provide an APP_BASE_HREF of '/my/app' and call location.go('/foo'), the browser's URL will become example.com/my/app/foo.

Similarly, if you add <base href='/my/app'/> to the document and call location.go('/foo'), the browser's URL will become example.com/my/app/foo.

HashLocationStrategy:

You can go old-school with the HashLocationStrategy by providing the useHash: true in an object as the second argument of the RouterModule.forRoot in the AppModule.

APP_BASE_HREF:

... APP_BASE_HREF token represents the base href to be used ... a string representing the URL prefix that should be preserved when generating and recognizing URLs

使用 angular4 将 hash-url 更改为 hash-bang url

Change hash-url to hash-bang url using angular4

node.js

prerender

angular

angular4-router