从angular2.dart迁移到angular.dart 4.0.0 + 2后如何使用AsyncRoute?

时间:2018-02-13 18:02:32

标签: dart angular-dart

我正在尝试从angular2.dart迁移到angular.dart 4.0.0 + 2,但我遇到了一些问题。

加载延迟组件后出现异常。

这是stacktrace:

EXCEPTION: Bad state: Could not find a component factory for C2Component.
STACKTRACE: 
package:angular/src/di/reflector.dart 35:7                                  getComponent.<fn>
dart:core                                                                   _AssertionError._evaluateAssertion
package:angular/src/di/reflector.dart 33:10                                 getComponent
package:angular/src/core/linker/component_resolver.dart 33:23               ReflectorComponentResolver.resolveComponentSync
package:angular_router/src/utils.dart 41:26                                 getComponentAnnotations
package:angular_router/src/route_registry.dart 127:23                       RouteRegistry.configFromComponent
package:angular_router/src/route_config/route_config_normalizer.dart 12:16  normalizeRouteConfig.loader


-----async gap-----
dart:async                                                                 _Completer.completeError
package:angular_router/src/route_config/route_config_normalizer.dart 14:5  normalizeRouteConfig.loader


-----async gap-----
dart:async                                                                      _asyncThenWrapperHelper
package:angular_router/src/route_config/route_config_normalizer.dart 10:27      normalizeRouteConfig.loader
package:angular_router/src/rules/route_handlers/async_route_handler.dart 18:43  AsyncRouteHandler.resolveComponentType
package:angular_router/src/route_registry.dart 390:42                           RouteRegistry._generate.<fn>
package:angular_router/src/instruction.dart 242:46                              UnresolvedInstruction.resolveComponent


-----async gap-----
dart:async                                          new Future.microtask
package:angular_router/src/instruction.dart 238:57  UnresolvedInstruction.resolveComponent
package:angular_router/src/router.dart 209:24       Router._settleInstruction
package:angular_router/src/router.dart 227:10       Router._navigate
package:angular_router/src/router.dart 204:16       Router.navigateByInstruction.<fn>
dart:async                                          _ZoneDelegate.runUnary
package:angular/src/core/zone/ng_zone.dart 185:21   NgZone._runUnary
dart:async                                          _Future._addListener.<fn>
package:angular/src/core/zone/ng_zone.dart 161:11   NgZone._scheduleMicrotask.<fn>
dart:async                                          _ZoneDelegate.run
package:angular/src/core/zone/ng_zone.dart 175:21   NgZone._run


-----async gap-----
dart:async                                                    _Future.then
package:angular_router/src/router.dart 201:62                 Router.navigateByInstruction
package:angular_router/src/directives/router_link.dart 94:18  RouterLink.onClick
package:angular/src/core/linker/app_view.dart 594:38          AppView.eventHandler1.<fn>.<fn>
dart:async                                                    _ZoneDelegate.run
package:angular/src/core/zone/ng_zone.dart 175:21             NgZone._run
dart:async                                                    _CustomZone.runGuarded
package:angular/src/core/zone/ng_zone.dart 311:23             NgZone.runGuarded
package:angular/src/core/linker/app_view.dart 594:14          AppView.eventHandler1.<fn>
package:angular/src/debug/debug_app_view.dart 164:44          DebugAppView.eventHandler1.<fn>

ORIGINAL EXCEPTION: Bad state: Could not find a component factory for C2Component.

据我了解angular_router:1.0.2 lib不需要像migration to angular 5+ routing那样的重要更改。如果我错了,请纠正我。

我使用dart sdk:1.24.3, angular:4.0.0+2, angular_router:1.0.2

这是link for the test repo

谢谢。

更新

这是延迟加载的先前版本

import 'package:lazy_loading_ng2/mycomponent2.dart' deferred as c2;

@Component(
  ... ,
  directives: const [ROUTER_DIRECTIVES],
)
@RouteConfig(const [
  ... ,
  const AsyncRoute(
    path: '/c2',
    name: 'C2',
    loader: f,
  ),
])
class AppComponent {}

f() => c2.loadLibrary().then((_) => c2.C2Component);

我发现组件需要调用它的模板的initReflector()。解决方案是here

我导入了懒惰组件的模板:

// ignore: uri_has_not_been_generated
import 'package:lazy_loading_ng2/mycomponent2.template.dart' deferred as c2t;

并更改加载程序功能:

f() =>
    c2t.loadLibrary()
        .then((_) => c2t.initReflector())
        .then((_) => c2t.C2Component);

0 个答案:

没有答案