Angular 2快速啓動演示不起作用

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

來源

2017-03-18 05:16:33

+0

它爲我工作以及..但我想知道什麼是從快速入門頁角文件的問題.. – hstg

+0

沒有與systemjs問題，只是忘記loader.See https://stackoverflow.com/a/42894892/3819736 – sbedulin

0

systemjs-角loader.js是在3月13日更改日誌中提到的新模塊，https://angular.io/docs/ts/latest/guide/change-log.html，但我還沒有找到它。

來源

2017-03-19 23:33:04

2

Angular.io團隊似乎將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

來源

2017-03-20 02:25:13 sbedulin

0

的問題指出了你的錯誤日誌的第一行：

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，甚至角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; 
};

來源

2017-08-29 14:40:23

0

我採用了棱角分明4.3.2，最近的一次，但不是最新版本，並且我沒有在systemjs-角loader.js我的package.json文件。我沒有得到OP的404錯誤。這是否意味着systemjs-angular-loader.js現在被埋在4.x.y版本的某個地方？

另一方面，如果我從我的app.component.ts中的@Component中刪除moduleId：module.id，則不再加載頁面。感覺代碼已經做了一些修改，暗示在文檔更新日誌https://devdocs.io/angular~2/guide/change-log中，但在角度更改日誌https://github.com/angular/angular/blob/master/CHANGELOG.md或入門文檔中沒有描述。在Angular文檔中沒有任何示例（之前 - >之後）。

答案需要出現在官方的Angular代碼文檔中 - 之前 - >之後的例子。然後在這裏引用它。

來源

2017-08-30 18:07:28

+0

你下載了哪個演示程序？我認爲他們現在更新了。給我一個鏈接，我下載並檢查在我身邊。並讓你知道 –

+0

我下載了一個早期測試版 - beta.2？ - 並用新版本更新了它。開發。docs section，Setup Anatomy，關於systemjs.config的系統架構，沒有提到systemjs-angular-loader.js文件。所以我假設4.x.y將該文件埋在某處。如果它很重要並且適用於使用Systemjs的每個人，那麼Angular團隊應該更新安裝程序解析和角度更新日誌。 –

Angular 2快速啓動演示不起作用

回答

相關問題