Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uncaught TypeError: System.import is not a function

This code is supposed to display a div containing Hello World, but instead I receive the error Uncaught TypeError: System.import is not a function. I'm following the getting started tutorial video for ng-book2, which contains the following code in index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Angular 2</title>

  <script src="js/traceur-runtime-0.0.90.js"></script>
  <script src="js/system-0.18.4.js"></script>
  <script src="js/angular2-alpha31.js"></script>
</head>
<body>
  <script>System.import('js/app');</script>
  <hello-world></hello-world>
</body>
</html>

and app.ts:

/// <reference path="../lib/node_modules/angular2/angular2.d.ts" />

import {
  Component,
  View,
  bootstrap
} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'hello-world'
})
@View({
  template: '<div>Hello World</div>'
})
// Component controller
class HelloWorld {

}

bootstrap(HelloWorld);

and finally the current directory structure:

/ng2
  /js
    angular2-alpha31.js
    app.js
    app.js.map
    system-0.18.4.js
    system-0.18.4.js.map
    traceur-runtime-0.0.90.js
  index.html

Looking around for solutions, the only issue that seems similar enough states there's a problem with System's config.js. Except in this tutorial, the video shows this working without any hint of configuration. I should mention that this is being hosted on a remote server versus the local HTTP server used in the video.

Screenshots of the developer window:

System.import is not a function

File list

Each file shown in the above directory structure is the most current available on GitHub as of writing this. Is there a default configuration file I should be including if I'm using a remote server or am I missing something else entirely?

like image 589
Chris Bornhoft Avatar asked Jul 16 '15 19:07

Chris Bornhoft


2 Answers

After playing around with the files further, I found that Angular2 is overriding SystemJS' System object with its own. If angular2.js moved above system.js within the HTML, then the statement

<script>System.import('js/app');</script>

uses the correct System object.

This should not be happening, however it is an issue for the time being.

like image 125
Chris Bornhoft Avatar answered Nov 11 '22 04:11

Chris Bornhoft


Uncaught TypeError: System.import is not a function

A tell tale indication that js/system-0.18.4.js failed to load.

like image 1
basarat Avatar answered Nov 11 '22 05:11

basarat