Ошибка: (SystemJS) Ошибка XHR (404 Not Found) loading ng2-appinsights

Question

Я пытаюсь реализовать представление приложения в своем приложении Angular 2, используя ng2-appinsights.

Для этого я следовал this link.

Это код, который я написал в своем package.json.

{ 
"name": "angular-quickstart", 
"version": "1.0.0", 
"description": "QuickStart package.json from the documentation, supplemented with testing support", 
"scripts": { 
"build": "tsc -p src/", 
"build:watch": "tsc -p src/ -w", 
"build:e2e": "tsc -p e2e/", 
"serve": "lite-server -c=bs-config.json", 
"serve:e2e": "lite-server -c=bs-config.e2e.json", 
"prestart": "npm run build", 
"start": "concurrently \"npm run build:watch\" \"npm run serve\"", 
"pree2e": "npm run build:e2e", 
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", 
"preprotractor": "webdriver-manager update", 
"protractor": "protractor protractor.config.js", 
"pretest": "npm run build", 
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 
"pretest:once": "npm run build", 
"test:once": "karma start karma.conf.js --single-run", 
"lint": "tslint ./src/**/*.ts -t verbose" 
}, 
"keywords": [], 
"author": "", 
"license": "MIT", 
"dependencies": { 
"@angular/common": "~2.4.0", 
"@angular/compiler": "~2.4.0", 
"@angular/core": "~2.4.0", 
"@angular/forms": "~2.4.0", 
"@angular/http": "~2.4.0", 
"@angular/platform-browser": "~2.4.0", 
"@angular/platform-browser-dynamic": "~2.4.0", 
"@angular/router": "~3.4.0", 

"angular-in-memory-web-api": "~0.2.4", 
"systemjs": "0.19.40", 
"core-js": "^2.4.1", 
"rxjs": "5.0.1", 
"zone.js": "^0.7.4", 

"reflect-metadata": "^0.1.8", 
"bootstrap": "^3.3.6", 
"crypto-js": "^3.1.9-1", 
"aes": "0.1.0", 
"ng2-appinsights": "^0.3.0", 
"applicationinsights-js": "^1.0.8" 
}, 
"devDependencies": { 
"concurrently": "^3.2.0", 
"lite-server": "^2.2.2", 
"typescript": "~2.0.10", 

"canonical-path": "0.0.2", 
"tslint": "^3.15.1", 
"lodash": "^4.16.4", 
"jasmine-core": "~2.4.1", 
"karma": "^1.3.0", 
"karma-chrome-launcher": "^2.0.0", 
"karma-cli": "^1.0.1", 
"karma-jasmine": "^1.0.2", 
"karma-jasmine-html-reporter": "^0.2.2", 
"protractor": "~4.0.14", 
"rimraf": "^2.5.4", 

"@types/node": "^6.0.46", 
"@types/jasmine": "2.5.36" 
}, 
"repository": {} 
} 

Это код, который я написал в systemjs.config.js

(function (global) { 
    System.config({ 
    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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
    '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 

    // other libraries 
    'rxjs':      'npm:rxjs', 
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
    'cryptojs': 'npm:crypto-js/crypto-js.js', 
    'ng2-appinsights':'npm:ng2-appinsights' 
}, 
// packages tells the System loader how to load when no filename and/or no extension 
packages: { 
    app: { 
    main: './main.js', 
    defaultExtension: 'js' 
    }, 
    rxjs: { 
    defaultExtension: 'js' 
    }, 
    'ng2-appinsights': { 
     main: './main.js', 
     defaultExtension: 'js' 
    } 
} 
}); 
})(this); 

я не нашел, какой из них является основным классом для NG2-appinsgihts см ниже изображение для получения дополнительной информации NG2-appinsights установленной в моей папке node_modules.

Я пытаюсь импортировать соответствующие модули проникновения в суть приложения, используя приведенную ниже строку кода.

import { AppInsightsModule } from 'ng2-appinsights'; 

После добавил выше код и запустить мое приложение на локальной машине, я всегда получал ошибку:

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3997/ng2-appinsights

Answer 1

Вы забыли объявить пакет в вашем systemjs.config.js

Добавьте это:

map: { 
    ... 
    //other librairies 
    'rxjs':      'npm:rxjs', 
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
    'cryptojs': 'npm:crypto-js/crypto-js.js', 
    'ng2-appinsights':   'npm:ng2-appinsights' 

И это

packages: { 
    ... 
    'ng2-appinsights': { 
     //main: 'Path to the main of ng2-appinsights' 
     main: 'bundles/ng2-appinsights.js', 
     defaultExtension: 'js' 
    } 
}