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 

main.ts

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:'',

这导致了“访问表达式”错误。因此，只需从组件中删除它们即可解决问题。