Angular2-quickstart未加載，沒有錯誤

Question

我遵循了Angular.io的打字稿教程到T －所有代碼都與底部所示相同，以及文件結構相同。

當我使用npm start服務器npm start ，日志顯示：

 tsc && concurrently "npm run tsc:w" "npm run lite"

  [0]
  [0] > angular2-quickstart@1.0.0 tsc:w /Users/jr/angular2-quickstart
  [0] > tsc -w
  [0]
  [1]
  [1] > angular2-quickstart@1.0.0 lite /Users/jr/angular2-quickstart
  [1] > lite-server
  [1]
  [1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using  lite-   server defaults...
  [1] ** browser-sync config **
  [1] { injectChanges: false,
  [1]   files: [ './**/*.{html,htm,css,js}' ],
  [1]   watchOptions: { ignored: 'node_modules' },
  [1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
  [1] [BS] Access URLs:
  [1]  --------------------------------------
  [1]        Local: http://localhost:3000
  [1]     External: http://192.168.0.181:3000
  [1]  --------------------------------------
  [1]           UI: http://localhost:3001
  [1]  UI External: http://192.168.0.181:3001
  [1]  --------------------------------------
  [1] [BS] Serving files from: ./
  [1] [BS] Watching files...
  [0] 10:21:10 PM - Compilation complete. Watching for file changes.
  [1] [BS] File changed: app/app.component.js
  [1] [BS] File changed: app/main.js

html頁面什么也不顯示，控制台顯示500內部錯誤。 當執行NPM安裝時，底部沒有錯誤，但是當我執行npm ls時，我得到：

npm ERR! peer dep missing: @angular/core@2.0.0-rc.2, required by angular2-in-memory-web-api@0.0.12
npm ERR! peer dep missing: @angular/http@2.0.0-rc.2, required by angular2-in-memory-web-api@0.0.12
npm ERR! peer dep missing: reflect-metadata@0.1.2, required by angular2@2.0.0-beta.17
npm ERR! peer dep missing: es6-shim@^0.35.0, required by angular2@2.0.0-beta.17
npm ERR! extraneous: angular2@2.0.0-beta.17 /Users/jr/angular2-quickstart/node_modules/angular2

在過去的兩個小時中，我一直在追逐自己的尾巴，以嘗試安裝依賴項，刪除node_module文件夾以及進行npm緩存清理。

如果你能伸出援手，那就很有愛

編輯：使用NPM 3.10.2和節點6.2.2

EDIT2：在另一台機器上嘗試了上述步驟，並且成功了。 將更新調試第一台計算機的結果。

EDIT3：刪除所有全局npm軟件包，什么也沒有。 這是代碼：

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Types.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.2",
    "@angular/compiler":  "2.0.0-rc.3",
    "@angular/core":  "2.0.0-rc.3",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/forms": "0.1.1",
    "reflect-metadata": "0.1.2",
    "@angular/http":  "2.0.0-rc.3",
    "@angular/platform-browser":  "2.0.0-rc.3",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.3",
    "@angular/router":  "3.0.0-alpha.7",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.3",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

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':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // 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' },
  };
  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);

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <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>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

結構體

Answer 1

檢查您手動創建的文件的文件名，我在這里犯了同樣的錯誤

Answer 2

好的，對於任何其他遇到此問題的人，我遇到的問題是端口上有一個死進程。 對於那些使用Mac的人。 看看這個帖子：

在Mac上查找（並殺死）進程鎖定端口3000