Угловая 2 с webpack получает Uncaught ReferenceError: Система не определена

У меня есть рабочий проект Angular 2, в который я попытался добавить некоторые тесты. Теперь с тестами я добавил webpack и теперь имею некоторые проблемы, которые я не могу решить с помощью онлайн-исследования. Вот ErrorMessage я получаю в браузере:
неперехваченного ReferenceError: Система не определена в локальном хосте /: 8
Uncaught ReferenceError: Система не определена systemjs.config.js: 42

Вот мой Структур:
http://imgur.com/a/dMVfp
Вот мой index.html:Угловая 2 с webpack получает Uncaught ReferenceError: Система не определена

<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>

Вот мои 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);

источник

2016-10-14 Bono

Вы звоните системы перед импортом, просто изменить ваше положение системы импорта, чтобы убедиться, что это называется после импорта system.src.js файла:

<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>

источник

2016-10-14 08:09:26 Supamiu

Большое спасибо, я видел, что сам , но по-прежнему появляется ошибка с «Uncaught ReferenceError: System не определена» из файла systemjs.config.js. У вас есть идея, как это решить? – Bono

О да, конечно, позвольте мне переместить файл конфигурации системного файла после системного файла на примере html – Supamiu

Это решило мою заданную проблему, еще раз спасибо. Но теперь я получаю «Ошибка: (SystemJS) Неожиданный токен <(...)» любая идея, как это исправить? – Bono

Угловая 2 с webpack получает Uncaught ReferenceError: Система не определена

ответ

Смежные вопросы