更新到angular2 beta.1后,路由器不再有效。它在beta.0中

时间:2016-01-19 18:47:52

标签: javascript angular angular2-routing

我的测试页面使用beta.0进行了路由,但没有使用beta.1进行路由。 Atom-typscript显示没有错误,并且控制台在页面加载时没有错误,但是锚点选择没有链接颜色 - 它们具有文本颜色。单击锚点时,将显示此控制台错误。

ERROR CONTEXT: angular2.min.js:17:5927

13:21:22.030 Object { element: <a>, componentElement: <residence-app>, context: Object, locals: Object, injector: Object } angular2.min.js:17:5927

13:21:22.038 Error: EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: this.directive_0_0.onClick is not a function

相关代码是:

app.ts (boot.ts文件为所有组件执行引导程序)

//various imports
@Component({
  selector: 'residence-app',
  templateUrl: "angular2-oPost/src/components/navigation/headerFooter.html",
  styleUrls: [ "angular2-oPost/src/commonStyles/headerFooter.css" ],
  directives: [ ROUTER_DIRECTIVES, Home, PostApartment4Rent ]
@RouteConfig( [
  new Route({ path: "/home", name: "Home", component: Home, useAsDefault: true }),
  new Route({ path: "/postApartment4Rent ",  name: "PostApartment4Rent", component: PostApartment4Rent })
] )
export class HeaderFooter { }

headerFooter.html

<header>
<!-- several divs-->
<a [routerLink]="['/Home']">Home</a>
<a [routerLink]="['/PostApartment4Rent']">Rent Apartment in hF</a>
</header> 
<div class="partialPage">
  <router-outlet></router-outlet>
</div>
<footer>
  <!-- several divs-->
</footer>

home.ts

@Component({
  selector : "home",
  styleUrls: [ "angular2-oPost/src/commonStyles/headerFooter.css" ],
  templateUrl: "angular2-oPost/src/components/navigation/home.html",
  directives: [ RouterLink ]
})
export class Home { }

postApartment4Rent.ts - 与home.ts相同,除了@Component中的选择器和类声明

修复的是什么?发行说明没有提到路由器的重大变化。

1 个答案:

答案 0 :(得分:2)

这个bug仍然存在于angular2.beta.7中。它是由您在此处找到的相同错误引起的:https://github.com/angular/angular/issues/6380

问题是由于您的应用程序使用webpack缩小(使用UglifyJS),您可以通过删除webpack.config.js中类似以下代码的内容来临时解决此错误

plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'bundle.js'),
    new webpack.optimize.UglifyJsPlugin()
],

问题是您的应用程序无法生产就绪,因为您的bundle.js太胖了,但您可以开发应用程序;)

我检查了问题是否来自UglifyJS配置,但我没有确认它是Angular2的问题。

如果我找到办法解决问题,我会回来帮助你,祝你好运;)