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

angular 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

文件就是这样 Main.ts

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

控制台上的错误如下所示

得到http://localhost:3000/app/js/navbar.component 404（未找到） 得到http://localhost:3000/app/js/contact_display.component 404（未找到） 错误：XHR错误（未找到404）链接（…） 得到http://localhost:3000/app/js/new_contact.component 404（未找到） 得到http://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>

System.config({
套餐：{
应用程序：{
格式：'寄存器'，
defaultExtension:'js'
}
},
路径：{
下划线：'/node_modules/下划线/下划线.js'
}
});
System.import（'/app/js/main.js'）
.then（null，console.error.bind（console））；

我已经检查了您的项目，它无法刷新的原因是Web服务器没有将请求重定向到

index.html

。要绕过此问题，您可以使用，如文档中所述，或者让开发和生产Web服务器将初始请求重定向到

index.html

：

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

除此之外，我建议您使用此

系统配置

，因此在

系统中引用
'app/js'
并删除
.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

版本，其中所有内容都已更改。

当您将包中的

system.config

属性

app

更改为

app/js

时会发生什么情况？我做了这一点，pierreduck，，，，app/js：{format:'register'，defaultExtension:'js'}它生成一个错误未捕获语法错误：意外的令牌/。因为js文件位于tsconfig.json文件的app/js文件夹中--outDir:“/app/js”要知道输出目录在哪里所以所有的东西都工作，直到你在一个路由页面上按下刷新键为止？是的PD页面现在是静态的，所以它在模板中显示消息，所以在重新加载之前是工作的-这是完整代码的链接[link]只需执行npm安装和npm启动，我们很高兴感谢您的帮助，实施了HashLocationStrategy，还发现index.html文件中的错误位置。顺便问一下，您能告诉我如何更新到angular 2的rc.1版本吗？一个好的开始是查看其更新。angular2的不同模块是plit up，现在通过

SystemJS

加载。你要做的主要事情是更新你的

System.config

到他们拥有的。以及将表单

angular2/..

的所有导入更改为

@angular/..

。路由器已移动到

router deprecated

，他们正在处理新文档路由器

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