node.js - systemjs - 映射到不同的 URL

Question

我是 Angular 2 和 systemjs 的新手，我有一个示例 Node.js 项目，我试图将子文件夹“./client/dashboard”中的 Angular 2 应用程序映射到子 URL“localhost:3000”/dashboard' 使用express.static中间件:

app.use('/dashboard', express.static(__dirname + '/client/dashboard', { maxAge: 86400000 }));

angular 2 app folder structure

我的index.html有以下代码:

<base href="/dashboard">
<link rel="stylesheet" href="dashboard/styles.css">
<script src="dashboard/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="dashboard/node_modules/systemjs/dist/system.src.js"></script>
<script src="dashboard/node_modules/rxjs/rx.js"></script>
<script src="dashboard/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="dashboard/node_modules/angular2/bundles/router.dev.js"></script>
<script src="dashboard/node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
    baseURL: '/dashboard',
    // paths: {
    //     '*': 'dashboard/*'
    // },
    map: {
        app: '/dashboard/app',
        rxjs: '/dashboard/node_modules/rxjs',
        angular2: '/dashboard/node_modules/angular2'
    },
    packages: {
        app: { format: 'register', defaultExtension: 'js' },
        rxjs: { defaultExtension: 'js' },
        angular2: { defaultExtension: 'js' }
    }
});
System.import('app/main').then(null, console.error.bind(console));
</script>

我遇到的唯一错误是 rx.ts 上的“require is not Define”和 css 文件上的 404(参见附图 chrome errors )

如果我只是将 Angular 2 应用程序目录映射到“/”，我仍然会在 rx.ts 上收到任意“require is not Defined”错误，但页面加载正确，所以我很确定这不是问题。我看到的唯一的其他错误是 css 错误。有什么想法可能是什么问题吗？蒂亚

Answer 1

也许是因为您包含了两次 rxjs 和 angular2:一次使用脚本元素，另一次在 SystemJS 配置中。

为什么需要在 SystemJS 配置中定义它们？

编辑

这应该足够了:

<base href="/dashboard">
<link rel="stylesheet" href="dashboard/styles.css">
<script src="dashboard/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="dashboard/node_modules/systemjs/dist/system.src.js"></script>
<script src="dashboard/node_modules/rxjs/rx.js"></script>
<script src="dashboard/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="dashboard/node_modules/angular2/bundles/router.dev.js"></script>
<script src="dashboard/node_modules/angular2/bundles/http.dev.js"></script>
<script>
  System.config({
    baseURL: '/dashboard',
    map: {
      app: '/dashboard/app'
    },
    packages: {
      app: {
        format: 'register', defaultExtension: 'js'
      }
    }
  });
  System.import('app/main').then(null, console.error.bind(console));
</script>