Javascript angular2 rc6-systemjs.config.js使用子文件夹/src/app

在angular2快速启动页面上：

对于Angular2 rc6，文件systemjs.config.js已更改。我正在尝试将文件夹/app/accord更改为/src/app accord my app的angular quick start by，因此我不确定必须在此文件中更改什么。我尝试了一些路径，但它不起作用，任何人都可以解释更多关于这个文件以及我如何使用这些路径。在这个配置中，我不关心生产或/距离，因为我只是测试角度。 我以前使用过webpack启动器或angular cli，但angular的新版本破坏了这些包，所以我希望保持简单

src/app/systemjs.config.js：

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // angular testing umd bundles
      '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
      '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
      '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
      '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
      '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
      '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
      '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule }     from '@angular/http';

import { AppComponent } from './app.component';
import { Configuration } from './app.constants';
import { routing }        from './app.routing';
import { AccountListComponent } from './accounts/account-list/account-list.component';
import { AccountDetailComponent } from './accounts/account-detail/account-detail.component';
import { DashboardComponent } from './dashboard/';


@NgModule({
  declarations: [
    AppComponent,
    AccountListComponent,
    AccountDetailComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [Configuration],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

src/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

/src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule, environment } from './index';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

//index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ng2</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
  <base href="/">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Ng2
加载。。。

我发现angular中的新systemjs.config有点凌乱。这就是我所使用的，效果非常好：

(function(global) {
    var map = {
            'app': 'src/app',
            '@angular': 'node_modules/@angular',
            'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
            'rxjs': 'node_modules/rxjs'
        },
        packages = {
            'app': { main: 'main.js',  defaultExtension: 'js' },
            'angular2-in-memory-web-api': {main: './index.js',defaultExtension:'js'}
            'rxjs': { defaultExtension: 'js' }
        },
        ngPackageNames = [
            'common',
            'compiler',
            'core',
            'http',
            'platform-browser',
            'platform-browser-dynamic',
            'router',
            'forms'
        ],

        tests = [
            'core/testing',
            'common/testing',
            'compiler/testing',
            'platform-browser/testing',
            'platform-browser-dynamic/testing',
            'http/testing',
            'router/testing',
            'forms/testing'
        ];

    function packUmd(pkgName) {packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.min.js', defaultExtension: 'js' }}

    ngPackageNames.forEach(packUmd);

    tests.forEach(function (test) {
        return packages['@angular/'+ test] = { main: '/bundles/' + test.replace(/\//, '-') + '.umd.min.js', defaultExtension: 'js' }
    })

    var config = {
        map: map,
        packages: packages
    };

    System.config(config);

})(this);

---

我认为这看起来更清晰、更容易理解。如果您的应用程序文件夹发生更改，您唯一需要更改的是：

'app'：“app/app的路径”

要在

节点中加载模块，请安装
SystemJS
：

npm安装systemjs

如果正在传输ES模块，请按照transpiler项目页面中的说明安装transpiler插件。
谢谢，现在它正在工作，我唯一的问题是找不到子文件夹中的.js，如404（未找到），但在，我不明白如何配置systemjs.config.js来实现这一点，这不可能是正确的。我有相同的配置，一切正常。你确定不是其他原因导致错误吗？谢谢你的帮助，我确定我遗漏了什么；我已经用源文件更新了我的问题。如果你能意识到这个错误。webpack在一个文件夹中创建一个文件所有.ts编译文件（.js），systemjs.config如何工作？加载每个js，但在哪里？我很乐意帮忙。对不起，它仍然不适合你。您可以使用systemjs builder实现类似的构建。这里是链接：我建议使用webpack而不是systemjs，因为支持桶概念，我发现angular with webpack的指南工作得很好，另一个初学者和angular cli还不支持rc6版本，这很容易成为我所听过的使用其中一个的最糟糕原因。它们是根本不同的工具，采用不同的方法，各有优缺点。另一方面，桶是一种糟糕的编码惯例，不知何故，它已经渗透到Angular 2用户的头脑中。可能是因为框架缺少适当的服务提供者抽象。8个月后，它仍然没有。