而且当我转到根目录时,我的应用程序似乎正在路由.

本地主机：8080 /

当我在我的应用程序中移动时路由更新,但似乎如果我在某个地方：localhost：8080 /基板中的仪表板,并进行硬刷新,它会失败.它会给我404未找到！错误.

如果我这样做它会工作：localhost：8080 /#！/ dashboard但这不是传递给我的应用程序的地址.

在index.html我有：< base href =“/”>

我的App_Component.dart文件如下：

import 'package:angular2/angular2.dart';
import 'package:angular2/router.dart';

import 'hero_component.dart';
import 'heroes_component.dart';
import 'dashboard_component.dart';
import 'hero_service.dart';
@Component(
    selector: "my-app",directives: const [ROUTER_DIRECTIVES],providers: const [HeroService,ROUTER_PROVIDERS],templateUrl: "app_component.html")
@RouteConfig(const [
  const Route(
      path: "/dashboard",name: "Dashboard",component: DashboardComponent,useAsDefault: true),const Route(
      path: "/detail/:id",name: "HeroDetail",component: HeroDetailComponent),const Route(path: "/heroes",name: "Heroes",component: HeroesComponent)
])
class AppComponent {
  String title = "Tour of Heroes";
}

似乎我有路由工作除了这个以外的一切.

我想要的最终状态是：localhost：8080 / detail / 14,它会打开正确的组件.这是现在在新网站引用上完成的事情,就像在整个应用程序中导航一样.

bootstrap(AppComponent,[
  HeroService,ROUTER_PROVIDERS,provide(LocationStrategy,useClass: HashLocationStrategy)
])

如果您想使用PathLocationStrategy,您可以使用此pub-wrapper https://pub.dartlang.org/packages/pub_serve_rewrites,它允许将PathLocationStrategy与pub serve一起使用.

对于部署,您需要配置您在那里使用的Web服务器以支持HTML5 pushState.

"@angular/common": "~4.0.1","@angular/compiler": "~4.0.1","@angular/core": "~4.0.1","@angular/forms": "~4.0.1","@angular/http": "~4.0.1","@angular/platform-browser": "~4.0.1","@angular/platform-browser-dynamic": "~4.0.1","@angular/router": "~4.0.1","@angular/animations": "~4.0.1","typescript": "^2.2.2","zone.js": "^0.8.4"

system.config.js

'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js','@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js','@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js','@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js','@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js','@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

app.module.ts

import { NgModule }      from '@angular/core';
import { browserModule,Title } from '@angular/platform-browser';
import { browserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  imports:      [ browserModule,browserAnimationsModule,appRouting,FormsModule ],...
})

在我的自定义组件中,我还导入了角度动画：

import { trigger,state,style,animate,transition } from '@angular/animations';

我的视图(templateUrl分配的外部视图！)如下所示：

<div[@containerState]="showContainer">
...
</div>

问题是：我总是收到控制台错误消息：

错误：未捕获(在承诺中)：错误：找到合成属性@containerState.请在您的应用程序中包含“browserAnimationsModule”或“NoopAnimationsModule”.

当我删除这个合成属性一切正常,但我无法使用角度动画.

有任何想法吗？我不使用angular-cli！

更新container.component.ts

import { Component,OnInit,OnDestroy,EventEmitter,HostListener,Input,Output } from '@angular/core';
import { trigger,transition } from '@angular/animations';
@Component({
    templateUrl: '...',selector: '...',animations: [
        trigger('containerState',[
            state('hide',style({transform: 'translateY(-102%)'})),transition('hide => show',[
                animate(500,style({transform: 'translateY(0)'}))
            ]),transition('show => hide',style({transform: 'translateY(-102%)'}))
            ])
        ])
    ]
})

目前正在运行……

我做了什么？删除完整的node_modules文件夹并运行全新安装.之后一切正常.很奇怪！我将尝试将另一个Angular 2.x应用程序升级到Angular 4.x.

尝试删除’@’并查看是否适合您.

问题是这个延迟加载模块内部有子组件的路由.但是在我的路由器配置上这条路线没有出现……所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容.

这是我的路由器配置(主模块)：

export const MODULE_ROUTES: Route[] =[
    { path: '',redirectTo: 'dashboard',pathMatch: 'full' },{ path: 'dashboard',component: HomeComponent,canActivate: [AuthGuard] },{ path: 'calendar',loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]},{ path: '**',component: nopageFoundComponent,pathMatch: 'full' }
]
.
.
.


@NgModule({
    imports: [
        RouterModule.forChild(MODULE_ROUTES)
.
.
.

在我的懒惰模块上：

export const MODULE_CALENDAR_ROUTES: Route[] = [
    {
        path: 'calendar',component: CalendarComponent,canActivateChild: [AuthGuard,CalendarGuard],children: [
            {
                path: '',component: MainCalendarComponent,CalendarGuard]
            },{

                path: 'user',component: EditEventComponent,CalendarGuard]
            }
        ]
    }
]

.
.
.

@NgModule({
    imports: [
        SharedModule,.
.
.
        RouterModule.forChild(MODULE_CALENDAR_ROUTES)

如果我打印我的路由器配置,我的懒惰模块上的路由声明不显示：

Routes:  [
  {
    "path": "dashboard","canActivate": [
      null
    ]
  },{
    "path": "calendar","loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",{
    "path": "**","pathMatch": "full"
  },{
    "path": "dashboard"
  }
]

你能帮助我吗？

export const MODULE_CALENDAR_ROUTES: Route[] = [
    {
        path: 'calendar',CalendarGuard]
            }
        ]
    }
]

CalendarComponent的路径必须从以下更改：

path: 'calendar',// wrong
component: CalendarComponent,...

到下面：

path: '',// right
component: CalendarComponent,...

感谢@jotatoledo on gitter帮助我解决这个问题.