Angular 2 Router 3.0.0错误：TypeError：在instanceof检查中期望一个函数，但是未定义

时间：2016-08-28 11:52:14

标签： angular angular2-routing angular2-directives

我正在使用Angular 2纯JavaScript创建一个简单的2页JavaScript应用程序。我被困在路由器导航并得到一个奇怪的错误。请参阅下面的日志和文件

Plunker https://plnkr.co/pSrk1y

日志＆gt;当我点击主页上的链接<a routerLink="login">login</a>时会发生这种情况。

EXCEPTION: Error: Uncaught (in promise): TypeError: Expecting a function in instanceof check, but got undefined
platform-browser.umd.js:937 EXCEPTION: Error: Uncaught (in promise): TypeError: Expecting a function in instanceof check, but got undefinedBrowserDomAdapter.logError @ platform-browser.umd.js:937BrowserDomAdapter.logGroup @ platform-browser.umd.js:947ExceptionHandler.call @ core.umd.js:4389ngZone.onError.subscribe.next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Rx.umd.js:1408SafeSubscriber.next @ Rx.umd.js:1357Subscriber._next @ Rx.umd.js:1307Subscriber.next @ Rx.umd.js:1271Subject._finalNext @ Rx.umd.js:1063Subject._next @ Rx.umd.js:1055Subject.next @ Rx.umd.js:1012EventEmitter.emit @ core.umd.js:9156NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:9394NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:937 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4391ngZone.onError.subscribe.next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Rx.umd.js:1408SafeSubscriber.next @ Rx.umd.js:1357Subscriber._next @ Rx.umd.js:1307Subscriber.next @ Rx.umd.js:1271Subject._finalNext @ Rx.umd.js:1063Subject._next @ Rx.umd.js:1055Subject.next @ Rx.umd.js:1012EventEmitter.emit @ core.umd.js:9156NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:9394NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:937 Error: Uncaught (in promise): TypeError: Expecting a function in instanceof check, but got undefined
    at resolvePromise (zone.js:538)
    at zone.js:515
    at ZoneDelegate.invoke (zone.js:323)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (core.umd.js:9245)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (core.umd.js:9236)
    at ZoneDelegate.invokeTask (zone.js:355)BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4392ngZone.onError.subscribe.next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Rx.umd.js:1408SafeSubscriber.next @ Rx.umd.js:1357Subscriber._next @ Rx.umd.js:1307Subscriber.next @ Rx.umd.js:1271Subject._finalNext @ Rx.umd.js:1063Subject._next @ Rx.umd.js:1055Subject.next @ Rx.umd.js:1012EventEmitter.emit @ core.umd.js:9156NgZone._zoneImpl.NgZoneImpl.onError @ core.umd.js:9394NgZoneImpl.inner.inner.fork.onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:461 Unhandled Promise rejection: Expecting a function in instanceof check, but got undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Expecting a function in instanceof check, but got undefined(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): TypeError: Expecting a function in instanceof check, but got undefined(…)

的index.html 

<html>
  <head>
    <title>Title</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/app/app.css"></link>
    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="node_modules/@angular/router/bundles/router.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='src/app/app.js'></script>
    <script src='src/services/token.js'></script>
    <script src='src/components/header/header.js'></script>
    <script src="src/pages/login/login.js"></script>
    <script src="src/pages/home/home.js"></script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <app>Loading...</app>
  </body>

</html>

app.js 

(function(app) {

  window.app = app = {
    Modules: {},
    Components: {},
    Pages: {},
    Directives: {},
    Pipes: {},
    Services: {},
    Storage: {},
    Config: {}
  };

  app.Config.init = function() {

    app.Modules.RouterModule =
      ng.router.RouterModule.forRoot([{
        path: '',
        component: app.Pages.Home
      }, {
        path: 'login',
        component: app.Pages.Login
      }]);

    app.Components.AppComponent = ng.core.Component({
        selector: "app",
        directives: [ng.router.RouterOutlet, ng.router.RouterLink],
        template: "<router-outlet></router-outlet>"
      })
      .Class({
        constructor: function() {}
      });

    app.Modules.AppModule = ng.core.NgModule({
        imports: [ng.platformBrowser.BrowserModule, app.Modules.RouterModule],
        declarations: [app.Components.AppComponent, app.Components.Header, app.Pages.Home, app.Pages.Login],
        bootstrap: [app.Components.AppComponent]
      })
      .Class({
        constructor: function() {}
      });

    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.Modules.AppModule);
  }

  document.addEventListener('DOMContentLoaded', app.Config.init);

})(window.app || (window.app = {}));

home.html的

<header></header>
<a routerLink='login'>Login</a>

home.js 

(function(app) {

      var dir = 'src/pages/home/';
      var templateUrl = dir + "home.html";
      var styles = [dir + "home.css"];
      var directives = [app.Components.Header, ng.router.RouterLink];

      app.Pages.Home = ng.core.Component({
          directives: directives,
          styleUrls: styles,
          templateUrl: templateUrl,
        })
        .Class({
          constructor: function() {
            this.title = "This is the home page";
          }
        });

    })(window.app || (window.app = {}));

login.js 

(function(app) {

  var dir = 'src/pages/login/';
  var templateUrl = dir + "login.html";
  var styles = [ dir + "login.css"];

  app.Pages.Login =
    ng.core.Component({
      selector : "login",
      styleUrls : styles,
      templateUrl: templateUrl,
    })
    .Class({
      constructor: function() {
        this.title = "Title"
      }
    });

})(window.app || (window.app = {}));

的login.html 

<div>this is the login module</div>

还尝试使用this.router.navigate（'login'）进行手动调用，但是未定义导航错误。请帮忙!!!

如需完整源代码检查，请点击链接 https://github.com/ashvin777/TeamStack

1 个答案:

答案 0 :(得分：1)

您需要在空路线中添加pathMatch: 'full'：

app.Modules.RouterModule =
  ng.router.RouterModule.forRoot([{
    path: '',
    component: app.Pages.Home,
    pathMatch: 'full'
  }, {
    path: 'login',
    component: app.Pages.Login
  }]);
相关问题
最新问题