Angular 2 с веб-пакетом получает Uncaught ReferenceError: система не определена

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

Здесь моя структура:
http://imgur.com/a/dMVfp
Здесь мой индекс .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>

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



person Bono    schedule 14.10.2016    source источник


Ответы (1)


Вы вызываете систему перед ее импортом, просто измените позицию импорта системы, чтобы убедиться, что она вызывается после импорта файла 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>
person Supamiu    schedule 14.10.2016
comment
Большое спасибо, я должен был это видеть, но все еще есть ошибка Uncaught ReferenceError: System is not defined from the systemjs.config.js file. Вы знаете, как это решить? - person Bono; 14.10.2016
comment
О да, конечно, позвольте мне переместить импорт файла конфигурации системы после файла системы в примере html - person Supamiu; 14.10.2016
comment
Это решило мою заданную проблему, еще раз спасибо. Но теперь я получаю сообщение об ошибке: (SystemJS) Неожиданный токен ‹(…) есть идеи, как это исправить? - person Bono; 14.10.2016
comment
измените загрузку из / src / app для / app, система не знает, что такое / src / app, но знает, что такое / app, поскольку вы указали его на карте - person Supamiu; 14.10.2016
comment
второе исправление сработало отлично. Теперь, после некоторой дополнительной работы, у меня возникла новая ошибка, с которой я не знаю, что делать. Если у вас есть время, посмотрите stackoverflow.com/questions/40041459/ - person Bono; 14.10.2016