Question

我的项目结构是这样的：

/node_modules

/client
|---/app
|   |---/app.module.ts
|   |---/main.ts
|---/systemjs.config.js
|---/index.html

/server
|---/server.js

/tools
|---/builder.js

/package.json

我正在使用angular2-rc5
我已经使用快速服务器公开了一些目录，并将它们映射到以下路由：

/client         =>    /
/node_modules   =>    /

因此，当用户从浏览器访问“/”时，他会得到/client/index.html文件。

在index.html baseUrl设置如下：

<base href="/">

systemjs是这样导入的：

<script src="systemjs.config.js"></script>
<script>
  System.import('app');
</script>

在systemjs.config.js上，应用的映射如下：

var map = {
  'app': 'app',
  '@angular': '@angular'
}

现在我正在尝试将我的应用与systemjs-builder捆绑在一起，脚本builder.js就像这样：

var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();

builder.loadConfig('client/systemjs.config.js')
    .then(function(){
        var outputFile = './client/assets/js/bundle.min.js';
        return builder.buildStatic('app', outputFile, {
            minify: true,
            mangle: false,
            rollup: true
        });
    })
    .then(function() {
        console.log('bundle built successfully!');
    });

现在的问题是，我服务器中的路由与我的项目结构不同。因此，当我在builder.js中指定“app”时，它实际上会尝试查找/app而不是/client/app

一个解决方法是在systemjs.config中为浏览器和非浏览器操作设置两个不同的地图，如下所示：

var isPublic = typeof window != "undefined";
var map = {
  'app': 'app',
  '@angular': (isPublic)? '@angular':'../node_modules/@angular'
}

但是由于我的baseURL设置为/client，我无法真正映射到node_modules/@angular;我要去一个目录并找到它（即../node_modules/@angular）。但这样做，告诉我：

Error: Unable to calculate canonical name to bundle file:///usr/node_modules/@angular/platform-browser-dynamic//bundles/platform-browser-dynamic.umd.js. Ensure that this module sits within the baseURL or a wildcard path config.

我不会node_modules和client被路由到/，因此我的最终用户无法看到实际路径。

现在，如何将此应用程序与systemjs-builder捆绑在一起？

Answer 1

该错误说：

确保此模块位于baseURL或通配符路径中配置。

显然，node_modules不能在baseURL中，因此您可以尝试使用构建器配置的第二种方法并添加paths而不是更改map：

paths: {
    '@angular/': '../node_modules/@angular/'
}

顺便说一句，该消息中的措辞很快会过时，wildcards in paths config are being deprecated，现在应该使用尾部斜杠，因此'path/'是'path*'的首选方式。

解析systemjs-builder

1 个答案: