systemjs – 映射到不同的URL

我是新来的angular2和systemjs,我有一个示例node.js项目,我试图将子文件夹'./client/dashboard'中的angular2应用程序映射到一个子URL'本地主机:3000 /仪表板'使用express.static中间件:

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

angular2个应用文件夹结构

我的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 defined”和css文件上的404(请参阅附件pic chrome错误 )

如果我简单地将angular度2应用程序目录映射到“/”,我仍然可以在rx.ts上得到任意'require is not defined'错误,但是页面加载正常,所以我敢肯定这不是问题。 我看到的唯一的其他错误是CSS错误。 任何想法可能是什么问题? TIA

也许是因为你包含了两次rxjs和angular2:一个使用脚本元素,一个在SystemJSconfiguration中。

为什么你需要在SystemJSconfiguration中定义它们?

编辑

这应该够了:

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