帶有webpack的Angular 2獲取未捕獲的ReferenceError：系統沒有定義

我有一個工作的Angular 2項目，我嘗試添加一些測試。現在通過測試，我添加了webpack，現在有一些問題我無法通過在線研究解決。下面是我在瀏覽器中得到的ErrorMessage：
未捕獲的ReferenceError：8
未捕獲的ReferenceError：系統是不是在systemjs.config.js定義：42

這裏我structur：
系統是不是在本地主機/定義 http://imgur.com/a/dMVfp
這裏我的index.html：帶有webpack的Angular 2獲取未捕獲的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

非常感謝，我已經看到了我自己，但systemjs.config.js文件中仍存在「Uncaught ReferenceError：System is not defined」錯誤。你有任何想法如何解決？ – Bono

哦，是的，讓我把系統配置文件導入到html例子 – Supamiu

上的系統文件後面。這解決了我的問題，再次感謝。但現在我得到一個「錯誤：（SystemJS）意外的令牌<（...）」任何想法如何解決這個問題？ – Bono

帶有webpack的Angular 2獲取未捕獲的ReferenceError：系統沒有定義

回答

相關問題