Question

我有一个非常简单的angular2应用程序，有几条路线：

@RouteConfig([
  { path: '/', name: 'Projects', component: ProjectsComponent, useAsDefault: true } ,
  { path: '/project/:id', name: 'ProjectDetail', component: ProjectDetailComponent }
])

问题在于，当我点击项目索引上的项目时，我目前成功导航到项目详细信息的路线，但是一旦刷新页面，我就会在所有angular2上得到 404错误依赖项，这是我的 package.json ：

{
  "name": "text-tagger",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"node lite serve\" "
  }, 
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "bootstrap": "^3.3.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "0.19.6",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

我的 boot.ts ：

import {bootstrap}    from 'angular2/platform/browser'
import {provide} from 'angular2/core'
{...}    
import {ROUTER_PROVIDERS} from 'angular2/router';

let config = {
  apiEndpoint: 'localhost:5000/api/',
  title: 'Text Tagger'
};

bootstrap(AppComponent, [ProjectService, TagService, TextChunkService, provide('app.config', { useValue: config }), ROUTER_PROVIDERS]);

我的 project-detail.component.ts ：

import {Component, OnInit} from 'angular2/core';
import {Router, RouteParams} from 'angular2/router';
{...}

@Component({
  selector: 'project-detail',
  templateUrl: './app/templates/projects/details.html',
  directives: [TagPopoverComponent]
})

export class ProjectDetailComponent implements OnInit {
{...}
  constructor(
    private _router: Router,
    private _routeParams: RouteParams,
    private _service: ProjectService) { }

  ngOnInit() {
    let id = this._routeParams.get('id');
    this._service.getProject(id).then(project => this.project = project);
  }
{...}

我的 projects.component.ts ：

{...}
@Component({
  selector: 'projects',
  directives: [ProjectDetailComponent, ProjectFormComponent],
  templateUrl: './app/templates/projects/list.html'
})

export class ProjectsComponent implements OnInit {
{...}

  constructor(private _projectService: ProjectService,
              @Inject('app.config') config,
              private _router: Router,
              routeParams: RouteParams) {
    this._selectedId = +routeParams.get('id');
  }
{...}
  onSelect(project) {
    this._router.navigate(['ProjectDetail', { id: project.id }]);
  }
}

Angular2上的路由错误

0 个答案: