Angular2路由错误：未捕获（承诺）：TypeError：无法获取属性“ visitExpression”

Question

我已经为这个错误苦苦挣扎了一段时间了。 经过广泛研究，我找不到其他参考。 任何帮助或指示将不胜感激。 我认为问题与我如何使用路由和auth0服务结合在一起有关。 请注意，没有显示任何路由，但是显示了导航栏等。

编辑：最初我是在Auth0与这个问题有关的假设下。 从那以后，我从应用程序中删除了所有Auth0组件，服务，导入。 因此，无论出于何种原因，路由根本都无法正常工作。...我更新了所发布的代码，以使其更容易被抛出。

错误

 Error: Uncaught (in promise): TypeError: Unable to get property 'visitExpression' of undefined or null reference
(http://localhost:3000/node_modules/zone.js/dist/zone.js:538:26) at  Anonymous function 

主要

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';    
import { appRouterProviders } from './app.routes';

bootstrap(AppComponent, [ appRouterProviders]);

app.component.ts

import { Component } from '@angular/core';
import { HomePageHeaderComponent } from './homepageheader.component';    
import { ROUTER_DIRECTIVES, Router } from '@angular/router';

@Component({
selector: 'my-app',
template: `<header></header><router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES],


})
export class AppComponent {
}

** app.routes.ts *

import { provideRouter, RouterConfig } from '@angular/router';
import { HomePageContentComponent } from './homepagecontent.component';
import { LoggedInComponent } from './loggedin.component';
import { LogoutComponent } from './logout.component';

const routes: RouterConfig = [

{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', component: HomePageContentComponent },
{ path: 'loggedIn', component: LoggedInComponent },
{ path: 'loggedOut', component: LogoutComponent },

];

export const appRouterProviders = [
provideRouter(routes)
];

Systemjs.config

(function (global) {
// map tells the System loader where to look for things
var map = {
    'app': 'app/components', //'dist',
    '@angular': 'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs',
    'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js',
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },



};
var ngPackageNames = [
  'common',
  'compiler',
  'core',
  'forms',
  'http',
  'platform-browser',
  'platform-browser-dynamic',
  'router',
  'router-deprecated',
  'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
    packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
    map: map,
    packages: packages
};
System.config(config);
})(this);

package.json

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
 "@angular/common": "2.0.0-rc.4",
 "@angular/compiler": "2.0.0-rc.4",
 "@angular/core": "2.0.0-rc.4",
 "@angular/forms": "0.2.0",
 "@angular/http": "2.0.0-rc.4",
 "@angular/platform-browser": "2.0.0-rc.4",
 "@angular/platform-browser-dynamic": "2.0.0-rc.4",
 "@angular/router": "3.0.0-beta.1",
 "angular/router-deprecated": "2.0.0-rc.2",
"angular/upgrade": "2.0.0-rc.4",
"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.7",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.3.2"
}
}

Answer 1

发现明显的东西;-)

不要从导入

import { ROUTER_PROVIDERS } from '@angular/router-deprecated';

用代替

import { ROUTER_PROVIDERS } from '@angular/router';

您可能还需要修复systemjs配置。

Answer 2

我发现了问题！ 在我尝试路由到的其他组件中，我有空的选择器标记。 例如这是我的路

{ path: '', pathMatch: 'full', redirectTo: '/home' },
{ path: 'home', component: HomePageContentComponent },
{ path: 'loggedIn', component: LoggedInComponent },
{ path: 'loggedOut', component: LogoutComponent },

在我的LoggedInComponent和LogoutComponent中，

selector:'',

这导致了“ visitexpression”错误。 因此，只需从组件中删除这些组件即可解决此问题。