1

いくつかのルートを持つ非常に単純な 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 }]);
  }
}
4

0 に答える 0