我正在使用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
答案 0 :(得分：1)
您需要在空路线中添加pathMatch: 'full'：
app.Modules.RouterModule =
ng.router.RouterModule.forRoot([{
path: '',
component: app.Pages.Home,
pathMatch: 'full'
}, {
path: 'login',
component: app.Pages.Login
}]);