如何在Angular 2中使用systemjs加载组件中的外部js文件?

时间:2017-04-29 14:13:32

标签: angular angular2-routing

我想在statComponent中加载test.js我在construnco​​r中尝试使用System.import但是我收到此错误:错误:(SystemJS)XHR错误(404 Not Found)loading http://localhost:3000/systemjs     错误:XHR错误......

 import { Component, OnInit } from '@angular/core';
import { System } from 'systemjs';

@Component({
template: `
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
 </div> 

`
})
export class StatComponent implements OnInit {
constructor() {
    System.import('./app/user/test.js').then(refToLoadedModule => {
        refToLoadedModule.someFunction();
    })
}

ngOnInit() { }
}

这是sysytemjs.config.js

  /**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
 (function (global) {
 // map tells the System loader where to look for things
  var map = {
'app': 'dist', // 'dist',
'@angular': 'node_modules/@angular',
'rxjs': 'node_modules/rxjs',
'ng2-toasty': 'node_modules/ng2-toasty/bundles/index.umd.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' }
 };
 var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
 'router'
 ];
  // 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);

0 个答案:

没有答案