I'm currently working on developing an Angular 2 application that incorporates touch gestures using hammerjs. My goal is to merge the quickstarter application from: Angular 2 with the hammerjs application from: Hammerjs sample.
However, I keep encountering the following error:
http://localhost:3000/npm:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72021e07151b1c5f060b02170111001b020632465c425c4342">[email protected]</a>/lib/plugin.js Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:33 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/npm:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d4d51485a54531049444d584e5e4f544d497d09130d130c0d">[email protected]</a>/lib/plugin.js
Error: XHR error (404 Not Found) loading http://localhost:3000/npm:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26564a53414f480b525f56435545544f565266120816081716">[email protected]</a>/lib/plugin.js
Error loading http://localhost:3000/npm:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5828342d3f3136752c21283d2b3b2a31282c186c7668766968">[email protected]</a>/lib/plugin.js
Unable to load transpiler to transpile http://localhost:3000/app/app.component.js
Error loading http://localhost:3000/app/app.component.js
Here is my systemjs.config.js file:
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'node_modules'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ts': 'npm:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71...,
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './app.component.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
Below is my folder structure:
https://i.sstatic.net/2j2oo.jpg
And here is my package.json file:
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
// list of scripts
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
// list of dependencies
},
"devDependencies": {
// list of dev dependencies
},
"repository": {}
}
I have already installed all the npm modules. What could be causing this issue?