Question

我是Angular 2的新手，为了开始使用，我从官方网站下载了Quickstart项目。

但它在控制台中显示以下错误：

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

304 Not Modified 87ms zone.js（2019行）GET   http://localhost:3000/systemjs-angular-loader.js 404未找到   2ms zone.js（2019年线）

＆＃34; NetworkError：404 Not Found -   http://localhost:3000/systemjs-angular-loader.js＆＃34; systemj ... ader.js

未处理的承诺拒绝：拒绝访问财产的权限   ＆＃34;然后＆＃34; ;区域：;任务：Promise.then;值：错误：权限   被拒绝进入财产＆＃34;然后＆＃34;

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

scheduleResolveOrReject /＆LT; @ 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

Answer 1

使用此systemjs.config.js

更改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);

Answer 2

似乎Angular.io团队将systemjs-angular-loader.js包含在plunker链接中，但忘记将该文件包含在可下载的项目中。

请将systemjs-angular-loader.js添加到与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;
};

从这里取得的代码： https://angular.io/resources/live-examples/forms/ts/eplnkr.html

Answer 3

systemjs-angular-loader.js是3月13日更改日志https://angular.io/docs/ts/latest/guide/change-log.html中提到的新模块，但我还没有找到它。

Answer 4

问题在错误日志的第一行中指出：

GET http://localhost:3000/systemjs-angular-loader.js 404 Not Found 2ms  zone.js (line 2019)

这意味着您的项目中缺少systemjs-angular-loader.js个文件。

正如his answer中提到的@TimFogarty，systemjs-angular-loader.js是添加到Angular 4.0的新模块。

由于官方文档仍然没有说明systemjs-angular-loader.js内部应该是什么，甚至Angular-CLI也没有生成它，我相信唯一的选择就是从官方获取它Angular Quickstart project

仅供参考，以下是其当前版本：

var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; module.exports.translate = function(load){ if (load.source.indexOf('moduleId') != -1) return load; var url = document.createElement('a'); url.href = load.address; var basePathParts = url.pathname.split('/'); basePathParts.pop(); var basePath = basePathParts.join('/'); var baseHref = document.createElement('a'); baseHref.href = this.baseURL; baseHref = baseHref.pathname; if (!baseHref.startsWith('/base/')) { // it is not karma basePath = basePath.replace(baseHref, ''); } load.source = load.source .replace(templateUrlRegex, function(match, quote, url){ var 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 + match[2].substr(1) + '"'); } else { urls.push('"' + match[2] + '"'); } } return "styleUrls: [" + urls.join(', ') + "]"; }); return load; };

Answer 5

我使用的是Angular 4.3.2，一个最近但不是最新版本，我的package.json文件中没有systemjs-angular-loader.js。我没有得到OP的404错误。这是否意味着systemjs-angular-loader.js现在被埋在版本4.x.y？

中

另一方面，如果我从app.component.ts中的@Component中删除moduleId：module.id，则不再加载该页面。感觉就像在文档更改日志https://devdocs.io/angular~2/guide/change-log中暗示了一些代码更改，但在Angular Changelog https://github.com/angular/angular/blob/master/CHANGELOG.md或Getting Started文档中没有描述。在Angular文档中没有示例（之前 - ＆gt;之后）。

答案需要在Angular官方文档中提供 - 以前 - ＆gt;经过例子。然后在这里引用它。

Angular 2快速入门演示不起作用

5 个答案: