2016-08-03 80 views
0

我一直在努力處理這個錯誤,現在已經有一段時間了。經過廣泛的研究,我無法找到任何其他參考。任何幫助或方向將不勝感激。我相信這個問題與我如何使用路由和auth0服務相結合。請注意,我的路由沒有顯示,但我的導航欄等。Angular2路由錯誤:未捕獲(承諾):TypeError:無法獲取屬性'visitExpression'

編輯: 最初我是根據假設認爲Auth0與這個問題有關。此後,我刪除了所有Auth0組件,服務,從應用程序導入。因此,無論出於何種原因,路由根本無法工作......我更新了發佈的代碼,因此更易於選擇投擲。

ERROR

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" 
} 
} 
+0

我認爲第一條路線應該有'pathMatch:'full''{path:'',component:HomePageContentComponent,pathMatch:'full'},但不知道這是否解決了您的問題。我沒有看到任何明顯的錯誤。 –

回答

0

我發現了這個問題!在我嘗試路由到的其他組件中,我有空的選擇器標籤。例如,下面是我的路徑

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

在我LoggedInComponent和LogoutComponent我有

selector:'', 

這是造成 'visitexpression' 的錯誤。所以只需從組件中刪除這些問題就可以解決問題。

1

一些明顯發現;-)

不要

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

使用進口替代

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

您可能還需要修復您的systemjs配置。

+0

感謝您抽出時間,仔細研究此問題。我改變了你提到的所有事情,忘記了編輯!我也將在編輯中添加我的systemjs.config。但改變這些東西並不奏效:/ – Bean0341

+1

你可以在Plunker中重現嗎? –

+0

不,我已經嘗試過,但是在它可以加載我的項目之前,死亡者正在死亡。我會繼續嘗試削減我的項目,只爲核心組件掠奪者 – Bean0341

相關問題