问题描述:

I have a working Angular 2 project that I tryed to add some tests to. Now with the tests I added webpack and now have some problem I am not able to solve with the online researche. Here is the errormessage I get in the browser:

Uncaught ReferenceError: System is not defined at localhost/:8

Uncaught ReferenceError: System is not defined at systemjs.config.js:42


Here my structur:

http://imgur.com/a/dMVfp

Here my index.html:

<html>

<head>

<title>PQM Monitor</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="src/css/styles.css">

<script>

System.import('/src/app').catch(function(err){console.error(err);});

</script>

<script src="systemjs.config.js"></script>

<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>

<script src="node_modules/reflect-metadata/Reflect.js"></script>

<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

<link href="src/css/bootstrap.min.css" rel="stylesheet">

<link href="src/images/favicon.png" rel="icon" type="image"/>

<base href="/src">

</head>

<body>

<info>Loading...</info>

<script src="src/js/jquery.min.js"></script>

<script src="src/js/bootstrap.min.js"></script>

</body>

</html>

Here my systemjs.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', //'src/app',

'@angular': 'node_modules/@angular',

'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',

'rxjs': 'node_modules/rxjs',

'polyfill': 'node_modules/babel-polyfill',

};

// 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' },

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

};

// packages tells the System loader how to load when no filename and/or no extension

var ngPackageNames = [

'common',

'compiler',

'core',

'forms',

'http',

'platform-browser',

'platform-browser-dynamic',

'router',

'router-deprecated',

'upgrade',

];

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


网友答案:

You're calling System before importing it, simple change your system import position to be sure it's called after the import of system.src.js file:

<html>
<head>
    <title>PQM Monitor</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/css/styles.css">
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>
    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
    <script src="systemjs.config.js"></script>
    <link href="src/css/bootstrap.min.css" rel="stylesheet">
    <link href="src/images/favicon.png" rel="icon" type="image"/>
    <base href="/src">
</head>
<body>
<script>
    System.import('/src/app').catch(function(err){console.error(err);});
</script>
<info>Loading...</info>
<script src="src/js/jquery.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
</body>
</html>
相关阅读:
Top