角度 2 - 在刷新路由页面上.如果仅在我使用导航的路线上刷新，则无法找到组件

Question

真正的新手与角度 2 和新版本的 es2015我一

应用结构

       app
       |---js
           |-- All js files
       |---ts
           |--- html 
         |--- contact_display.html
         |--- contact_block.html
         |--- edit_contact_form.html
         |--- navbar.html
         |--- new_contact_form.html
           |--- main.ts
           |--- contact_display.component.ts
           |--- contact_block.component.ts
           |--- edit_contact.component.ts
           |--- navbar.component.ts
           |--- new_contact.component.ts
           |--- contact.service.component.ts
           |--- contact.ts
           |--- contact.service.component.ts
           |--- mock_contact.component.ts
           |--- typings
         |-- underscore 
            |--- underscore.d.ts
       |---node_modules
       |---resources
       |---typings
       |--- index.html
       |--- package.json
       |--- tsconfig.json
       |--- typings.json

文件就是这样主目录

          import { bootstrap } from 'angular2/platform/browser';
          import { Component, provide } from 'angular2/core';
          import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, LocationStrategy, HashLocationStrategy} from 'angular2/router';
          import { NavbarComponent } from './navbar.component';
          import { ContactDisplayComponent } from './contact_display.component';
          import { NewContact } from './new_contact.component';
          import { EditContact } from './edit_contact.component';

          @Component({
            selector:'app-start',
            template:`
            <navbar></navbar>
            <router-outlet></router-outlet>
            `,
            directives : [NavbarComponent,ROUTER_DIRECTIVES]
          })
          @RouteConfig([
            {path:'/',name:'Home',component:ContactDisplayComponent},
            {path:'/New_Contact',name:'New_Contact',component:NewContact},
            {path:'/Edit_Contact/:id',name:'Edit_Contact',component:EditContact}
          ])
          export class Main{
          }

          bootstrap(Main,
            [
              ROUTER_PROVIDERS
            ]
          );

我使用导航路由转到编辑联系人页面

        import { Component, OnInit} from 'angular2/core';
        import { ContactBlockComponent } from './contact_block.component';
        import { ContactService } from './contact.service';
        import { Contact } from './contact';
        import { ROUTER_DIRECTIVES, Router } from 'angular2/router';

        @Component({
        selector  :'contact-display',
        templateUrl:'app/ts/html/contact_display.html',
        styleUrls : ['../resources/contact_detail.css'],
        directives:[ ContactBlockComponent, ContactBlockComponent, ROUTER_DIRECTIVES ],
        providers:[ContactService]
        })
        export class ContactDisplayComponent
        {
        public contacts:Contact[];
        isSelected:boolean;
        selectedContact;
        constructor(private _contactService:ContactService, private _router:Router){
            this.isSelected = true;
        }
        onContactSelection(contact_picked){
            console.log(contact_picked.contact_phone);
            this.selectedContact = contact_picked;
            return false;
        }
        getContacts(){
            this._contactService.getContacts().then((contacts:Contact[]) => this.contacts = contacts);
        }
        /********* Navigate to Edit Contact ****************
        onEditContact(contact_picked){
            let userId = contact_picked.id;
            this._router.navigate(['Edit_Contact',{id:userId}]);
        }
    }

控制台上的错误是这样的

GEThttp://localhost:3000/app/js/navbar.component 404（未找到） GEThttp://localhost:3000/app/js/contact_display.component 404（未找到） 错误：XHR 错误（未找到 404）链接 http://localhost:3000/app/js/navbar.component（...） GEThttp://localhost:3000/app/js/new_contact.component 404（未找到） GEThttp://localhost:3000/app/js/edit_contact.component 404（未找到）

所有这些文件都是我在main.ts中以相同的顺序导入的文件

import { NavbarComponent } from './navbar.component';
import { ContactDisplayComponent } from './contact_display.component'; 
import { NewContact } from './new_contact.component'; 
import { EditContact } from './edit_contact.component'; 

包含系统配置的索引文件，即

        <script>
            System.config({
            packages: {
                app: {
                format: 'register',
                defaultExtension: 'js'
                }
            },
            paths: {
                underscore: '/node_modules/underscore/underscore.js'
            }
            });
            System.import('/app/js/main.js')
                .then(null, console.error.bind(console));
        </script>

Answer 1

我已经检查了您的项目，它在刷新时不起作用的原因是因为网络服务器不会将请求重定向到index.html。要绕过这一点，您可以使用 HashLocationStrategy ，如文档中所述，或者让您的开发和生产 Web 服务器将初始请求重定向到 index.html ：

bootstrap(Main, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

除此之外，我建议您使用此System Config，因此'app/js'周围的引号和System.import中删除.js：

System.config({
  packages: {
    'app/js': {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  paths: {
      underscore: '/node_modules/underscore/underscore.js'
  }
});
System.import('/app/js/main')
      .then(null, console.error.bind(console));

或者，在继续此项目之前，请更新到Angular2的rc.1版本，其中一切都已更改。