• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

350
Views
how to load external js file in component with systemjs in Angular 2?

I want to load test.js in statComponent i try with System.import in the construncor but i get this error : Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/systemjs Error: XHR error……

 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() { }
}

thi is 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);
over 3 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error