javascript - Angular 2 snabbstartdemo fungerar inte

Jag är ny på Angular 2 och för att komma igång laddar jag ner Quickstart-projektet från den officiella webbplatsen.

Men det visar mig följande fel i konsolen:

GET http://localhost:3000/node_modules/@angular/platf...-dynamic/bundles/platform-browser-dynamic.umd.js

304 Ej ändrad 87ms zone.js (rad 2019) GET http://localhost:3000/systemjs-angular-loader.js 404 Ej hittad 2ms zone.js (rad 2019)

"NetworkError: 404 Ej hittad - http://localhost:3000/systemjs-angular-loader.js" systemj...ader.js

Ohanterat Promise-avslag: Behörighet nekad för att få åtkomst till egenskapen "then"; Zon: ; Uppgift: Promise.then; Värde: Fel: Behörighet nekad för att få åtkomst till egenskapen "then"

resolvePromise@http://localhost:3000/node_modules/zone.js/dist/zone.js:622:21

scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:716:17

ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:367:17

Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:166:28

drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:546:25

ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:424:25

Svar #1

ändra din systemjs.config.js med denna systemjs.config.js

(function (global) {
  System.config({
    map: {
      'rxjs': 'node_modules/rxjs',
      '@angular': 'node_modules/@angular',
     'app': './app',
     'angular2-in-memory-web-api' : 'node_modules/angular2-in-memory-web-api'
   },
    packages: {
      'app': {
        main: 'main.js',
        defaultExtension: 'js'
      },

      '@angular/platform-browser': {
        main: 'bundles/platform-browser.umd.js'
      },

      '@angular/core': {
        main: 'bundles/core.umd.js'
      },

      '@angular/http': {
        main: 'bundles/http.umd.js'
      },

      '@angular/compiler': {
        main: 'bundles/compiler.umd.js'
      },

      '@angular/compiler-cli': {
        main: 'index.js'
      },

      '@angular/router': {
        main: 'bundles/router.umd.js'
      },

      '@angular/upgrade': {
        main: 'bundles/upgrade.umd.js'
      },

      '@angular/forms': {
        main: 'bundles/forms.umd.js'
      },

      '@angular/common': {
        main: 'bundles/common.umd.js',
        defaultExtension: 'js'
      },

      '@angular/platform-browser-dynamic': {
        main: 'bundles/platform-browser-dynamic.umd.js'
      },

      '@angular/platform-server': {
        main: 'bundles/platform-server.umd.js'
      },

      'rxjs': {
        defaultExtension: 'js'
      },

      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Svar #2

Det verkar som att Angular.io-teamet inkluderade systemjs-angular-loader.js i plunker-länkarna, men glömde att inkludera filen i nedladdningsbara projekt.

Vänligen lägg till systemjs-angular-loader.js på samma nivå som systemjs.config.js

var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]"1|.)*?)\1/g;

module.exports.translate = function(load){

  var url = new URL(load.address);

  var basePathParts = url.pathname.split('/');

  if (url.href.indexOf('plnkr') != -1) {
    basePathParts.shift();
    basePathParts.shift();
  }

  basePathParts.pop();
  var basePath = basePathParts.join('/');
  load.source = load.source
    .replace(templateUrlRegex, function(match, quote, url){
      let resolvedUrl = url;

      if (url.startsWith('.')) {
        resolvedUrl = basePath + url.substr(1);
      }

      return `templateUrl: '${resolvedUrl}'`;
    })
    .replace(stylesRegex, function(match, relativeUrls) {
      var urls = [];

      while ((match = stringRegex.exec(relativeUrls)) !== null) {
        if (match[2].startsWith('.')) {
          urls.push(`'${basePath.substr(1)}${match[2].substr(1)}'`);
        } else {
          urls.push(`'${match[2]}'`);
        }
      }

      return "styleUrls: [" + urls.join(', ') + "]";
    });

  return load;
};

Kod hämtad härifrån: https://angular.io/resources/live-examples/forms/ts/eplnkr.html