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

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

  回复于 2024-05-02T06:50:13+08:00
• 0

  似乎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

  回复于 2024-05-02T06:50:13+08:00
• 2

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

  回复于 2024-05-02T06:50:13+08:00
• 0

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

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

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

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

  由于官方文档仍然没有阐明 systemjs-angular-loader.js 内部应该是什么，甚至Angular-CLI也没有生成它，我相信 the only option is to take it from the official 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;
  };
  

  回复于 2024-05-02T06:50:13+08:00
• 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或Getting Started文档中没有描述 . 在Angular文档中没有示例（之前 - >之后） .

  答案需要在官方的Angular代码文档中 - 以前 - >在示例之后 . 然后在这里引用它 .

  回复于 2024-05-02T06:50:13+08:00