오류 : (SystemJS) XHR 오류 (404 찾을 수 없음) ng2-appinsights로드

Question

ng2-appinsights를 사용하여 Angular 2 응용 프로그램에서 응용 프로그램 통찰력을 구현하려고합니다.

그 때문에 나는 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": {} 
} 

이 내가

(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); 

systemjs.config.js에 쓴 코드가

나는 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' 

그리고이

을 0

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