logo标签列表

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

javascriptangulartypescriptsystemjs
3

我是Angular 2的新手，为了开始学习，我从官网下载了Quickstart项目。

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

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

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

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

Unhandled Promise rejection: Permission denied to access property "then" ; Zone: ; Task: Promise.then ; Value: Error: Permission denied to access property "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

5个回答
3

请使用这个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);
它对我也起作用了，但我想知道快速启动页面中的Angular文件有什么问题。 - Mark
系统js没有问题，只是忘记了加载器。请参见https://dev59.com/BaDha4cB1Zd3GeqP-R2Z#42894892。 - sbedulin
2
似乎Angular.io团队在Plunker链接中包含了systemjs-angular-loader.js，但忘记将该文件包含在可下载项目中。
请将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

源代码已经消失（404）。 - vpriesner
0

我正在使用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或入门文档中进行描述。在Angular文档中找不到任何示例（before -> after）。

答案需要在官方的Angular代码文档中提供，并附有before -> after的示例。然后在此处引用它。

你下载了哪个演示？我觉得他们现在更新了。给我一个链接，我会下载并在我的电脑上检查一下。然后告诉你。 - Harish Mahajan
我下载了一个早期的 beta 版本——beta.2？——并通过新版本进行了更新。dev.docs 部分，即 Setup Anatomy，关于 systemjs.config 的系统架构，没有提到 systemjs-angular-loader.js 文件。因此，我假设 4.x.y 版本在某个地方隐藏了该文件。如果这对每个使用 Systemjs 的人都很重要，并且适用于他们，那么 Angular 团队应该更新 Setup Anatomy 和 Angular Changelog。 - Mike_Laird
0
0
问题在您的错误日志的第一行指出：
GET http://localhost:3000/systemjs-angular-loader.js 404 Not Found 2ms  zone.js (line 2019)

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

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

由于官方文档仍然没有说明systemjs-angular-loader.js应该包含什么，甚至Angular-CLI也不会生成它，我认为唯一的选择是从官方Angular Quickstart项目中获取它。

仅供参考，这是它的当前版本：

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;
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接