Question

我在apache服务器上的子文件夹/draft中有一个angular2应用程序。为了使其正常运行，我在/草稿中添加了.htaccess：

Options Indexes FollowSymLinks

RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /draft/index.html [L]

并将其添加到头部的/draft/index.html：

<base href="draft/">

我的组件和其他打字稿文件位于/ draft / app /中，我的/draft/systemjs.config.js看起来像这样：

(function (global) {
  System.config({
    paths: {
      'npm:': '/draft/node_modules/'
    },
    map: {
      app: '/draft/app',
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      'rxjs': 'npm:rxjs',
      // ...
    },
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

这一切都很好，但是当我尝试添加路由时出错了。当用户转到/draft/foo时，我希望显示组件FooComponent 但是当用户转到/draft/foo时，FooComponent会按预期显示，但由于某种原因，网址会更改为/draft/draft/draft/foo。

这是我的/draft/app/app.routing.js：

// ...
const appRoutes: Routes = [
    {
        path: 'draft/foo',
        component: FooComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

我将路由const添加到我的AppModule的导入数组/draft/app/app.module.ts：

// ...
@NgModule({
    imports:      [ BrowserModule, HttpModule, routing ],
    declarations: [ AppComponent, FooComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

/draft/app/components/AppComponent.ts看起来像这样：

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent {}

那么为什么/draft/foo被重定向到/draft/draft/draft/foo，我该怎么做才能阻止它呢？

Answer 1

显然基地不正确。以下基础一切正常。

<base href="http://localhost/draft/" />

为了让它更具动感，我将其替换为：

<script>
  document.write('<base href="' + document.location + '" />');
</script>

但这仅在使用hash location strategy时有效，否则路径路径始终为''。所以我最终使用了以下内容：

<script>
  document.write('<base href="' + document.location.protocol + '//' + document.location.host + '/draft/' + '" />');
</script>

Angular2路由重定向到错误的URL

1 个答案: