angular


Angular 2 - Uncaught (in promise): ReferenceError: System is not defined


my english is poor, my apology for this :)
I have a problem with angular 2. I would create a login form but after call web service and get response I had this error below.
To blocked and authorized user on my app I'm based on auth-guard.service.ts of angular tutorial.
This error came after the canLoad action on my routing.
I use angular 2 latest version, my project is based on webpack.
My package.json configuration is :
"dependencies": {
"#angular/common": "~2.1.1",
"#angular/compiler": "~2.1.1",
"#angular/core": "~2.1.1",
"#angular/forms": "~2.1.1",
"#angular/http": "~2.1.1",
"#angular/platform-browser": "~2.1.1",
"#angular/platform-browser-dynamic": "~2.1.1",
"#angular/router": "~3.1.1",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"#types/jasmine": "^2.5.35",
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^2.2.4",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"jasmine-core": "^2.4.1",
"karma": "^1.2.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"typescript": "^2.0.3",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0"
}
My error is :
core.umd.js?e2a5:3004 EXCEPTION: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined
at SystemJsNgModuleLoader.loadAndCompile (eval at <anonymous> (http://localhost:9090/vendor.js:100:2), <anonymous>:7151:20)
at SystemJsNgModuleLoader.load (eval at <anonymous> (http://localhost:9090/vendor.js:100:2), <anonymous>:7144:64)
at RouterConfigLoader.loadModuleFactory (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:168:76)
at RouterConfigLoader.load (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:160:52)
at MergeMapSubscriber.eval [as project] (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:904:82)
at MergeMapSubscriber._tryNext (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:110:27)
at MergeMapSubscriber._next (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:100:18)
at MergeMapSubscriber.Subscriber.next (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:89:18)
at EverySubscriber.notifyComplete (eval at <anonymous> (http://localhost:9090/vendor.js:367:2), <anonymous>:47:26)
at EverySubscriber._complete (eval at <anonymous> (http://localhost:9090/vendor.js:367:2), <anonymous>:64:14)
at EverySubscriber.Subscriber.complete (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:114:18)
at MergeAllSubscriber._complete (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:94:30)
at MergeAllSubscriber.Subscriber.complete (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:114:18)
at MapSubscriber.Subscriber._complete (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:132:26)
at MapSubscriber.Subscriber.complete (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:114:18)
at ArrayObservable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:289:2), <anonymous>:116:24)
at ArrayObservable.Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:56:27)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MergeAllOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:63:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at EveryOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:367:2), <anonymous>:27:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at CatchOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:391:2), <anonymous>:30:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Object.subscribeToResult (eval at <anonymous> (http://localhost:9090/vendor.js:349:2), <anonymous>:21:27)
at MergeAllSubscriber._next (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:85:42)
at MergeAllSubscriber.Subscriber.next (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:89:18)
at MapSubscriber._next (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:83:26)
at MapSubscriber.Subscriber.next (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:89:18)
at ArrayObservable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:289:2), <anonymous>:114:28)
at ArrayObservable.Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:56:27)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MergeAllOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:63:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at FirstOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:403:2), <anonymous>:70:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at CatchOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:391:2), <anonymous>:30:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Object.subscribeToResult (eval at <anonymous> (http://localhost:9090/vendor.js:349:2), <anonymous>:21:27)
at MergeAllSubscriber._next (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:85:42)
at MergeAllSubscriber.Subscriber.next (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:89:18)
at ScalarObservable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:295:2), <anonymous>:49:24)
at ScalarObservable.Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:56:27)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MergeAllOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:63:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at LastOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:415:2), <anonymous>:38:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at CatchOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:391:2), <anonymous>:30:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28)
at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23)
at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22)
at eval (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:87:38)
at new ZoneAwarePromise (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:518:29)
at Observable.forEach (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:86:16)
at eval (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:2630:22)
at new ZoneAwarePromise (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:518:29)
at Router.runNavigate (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:2595:20)
at eval (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:2586:71)
at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:232:26)
at Object.onInvoke (eval at <anonymous> (http://localhost:9090/vendor.js:100:2), <anonymous>:6206:41)
at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:231:32)
at Zone.run (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:114:43)
at eval (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:502:57)
at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:265:35)
at Object.onInvokeTask (eval at <anonymous> (http://localhost:9090/vendor.js:100:2), <anonymous>:6197:41)
at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:264:40)
at Zone.runTask (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:154:47)
at drainMicroTaskQueue (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:401:35)
at XMLHttpRequest.ZoneTask.invoke (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:339:25)
Have you a response for me ?
This problem is an underlying problem of Angular 2 - Uncaught (in promise): Error: XHR error (404 Not Found)
In webpack you do not need to add systemjs.
The real problem is an routing problem ... To solved this :
To use this router loader you must install it :
npm install angular2-router-loader -- save-dev
And you must implements 'angular2-router-loader' in your webpack config like this :
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader','angular2-router-loader']
},
...
],

Related Links

Include user_metadata and app_metadata in JWT using Auth0
Primeng component calendar have a method for close the pop up calendar manually?
Angular test does not include import from node_modules
Convert Angular 4 web app to Angular Universal app
Generate a routing module while creating a module in angular-cli
What is the best practice to manage sessions with Ionic 2
Angular 2 Updating Component After Form Submit With New Data From Response
How to configure and use Auth-0 in Angular4
How to get meta tags work correctly in angular 2? [closed]
Angular2-highcharts switching option
How to make ViewChild work in a unit test
Angular 2 AOT: Getting lot of errors in index.d.ts
Angular2 doesn't work Custom Reuse Strategy with Lazy module loading
view not updated while changing class variable value angular2
Using Angular 2, how can I allow robots.txt to be viewed without angular routing being triggered?
Angular2 Google sign

Categories

HOME
objective-c
powershell-v4.0
data-warehouse
iframe
environment-variables
soap
analytics
metal
speech-recognition
servicestack
memcached
google-cardboard
ieee-754
openmeetings
corba
m3u8
junit4
video.js
jquery-gmap3
bit-manipulation
dht
nlog
serenity-bdd
greedy
tv
google-surveys
structured-data
github-api
navigation-drawer
hibernate-criteria
mahapps.metro
inorder
nexmo
grunt-connect-proxy
openfiledialog
asp.net-mvc-routing
street-address
sharethis
webmin
transitions
interactive
nonetype
smartassembly
model-driven
gulp-usemin
multibox
parasoft
tycho
ios6
getelementsbyclassname
react-d3
virsh
proof-of-correctness
case-class
strconv
graylog
jquery-ui-tabs
smartmeter
docker-registry
slug
powershell-tools
leshan
smart-pointers
orphan
ucp
git-stash
deferred-loading
devpartner
onbeforeunload
rc4-cipher
lunrjs
grid-layout
phpinfo
jcarousel
datamapper
jseparator
adobe-flash-cs3
objdump
build-dependencies
html5-template
uiactivity
agsxmpp
dynamicquery
kiosk-mode
zenoss
spool
componentkit
typescript1.4
tankauth
pre-commit-hook
textile
raii
android-x86
freetextbox
interlacing
offlineapps
mat-file
circular-reference
agi
hiding
jquery-ui-selectable
array-formulas
jquery-mobile-collapsible
trusted-timestamp
getprocaddress
nested-queries
osx-gatekeeper
scopes
function-overloading
visualtreehelper
iphone-sdk-4.1
application-design

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App