1

I have a very simple angular2 app with a couple of routes:

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

The problem is that when i click a project on the projects index i currently succeed on navigating to the route of the project details, but once i refresh the page i get 404 errors on all of angular2 dependencies, here is my 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"
  }
}

My 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]);

My 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);
  }
{...}

My 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 }]);
  }
}
aledustet
  • 1,003
  • 2
  • 14
  • 39
  • 1
    You're using a server that is compatible with pushState? http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser/33573548#33573548, http://stackoverflow.com/questions/34415725/when-i-refresh-my-website-i-get-a-404-this-is-with-angular2-and-firebase/34416946#34416946 – Günter Zöchbauer Jan 19 '16 at 14:46
  • Great, @GünterZöchbauer ill close it in a minute – aledustet Jan 19 '16 at 14:58

0 Answers0