标签: systemjs-builder

我正在使用Angular2和TypeScript组合一个应用程序(大规模).它需要分成许多项目,每个项目都有许多组件,每个组件都有一个.html视图,.css样式表和.ts逻辑/类.

我希望每个项目都能编译成一个*.js文件并复制到一个将在IIS中运行的主机网站.这类似于构建WPF或Silverlight应用程序的方式,.xaml所有文件都被编译到.dll.

我已经浏览了一下网页,并且能够使用该选项将.ts文件构建到单个.js文件中--outFile.但这对我的.html文件或文件没有帮助css.

任何帮助都将非常感激,即使它是说我要求的是不可能的:-)

斯蒂芬

我正在尝试捆绑一个有角度的4.0.0应用程序.

我已经尝试过browserify但是新的angular-loader插件(允许不需要带有templateUrl的组件中的moduleId)不会被调用,因此模板最终会出错路径.

所以我转移到了systemjs-builder,但问题是当它运行该插件时崩溃说文档没有定义.

有没有办法将文档注入构建器？

或者我做错了什么？

这是我正在测试的简单构建器(systemjs-config是角度快速入门).

var path = require("path"); 
var Builder = require('systemjs-builder');

var builder = new Builder('src/frontend', 'src/frontend/systemjs.config.js');

builder .bundle('main.js', 'bundle.js') 
.then(function() {   
     console.log('Build complete'); 
}) 
.catch(function(err) {   
     console.log('Build error');   
     console.log(err); 
});

我正在使用system.js和systemjs builder来创建一个dist文件夹,其中包含我的angular2应用程序的所有打包的javascript文件.

它工作得非常好,除了它不包括以下文件,这些文件目前静态包含在index.html中:

• node_modules/zone.js/DIST/zone.js
• node_modules /反映元数据/ Reflect.js
• node_modules/systemjs/DIST/system.src.js
• node_modules/ESRI系统-JS/DIST/esriSystem.js

如何强制systemjs构建器包含这些依赖项？

库-bundle.js:

var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./systemjs.config.js').then(function() {
  return builder.bundle(
    'app - [app/**/*]', // build app and remove the app code - this leaves only 3rd party dependencies
    'dist/libs-bundle.js'
  );
}).then(function() {
  console.log('library bundles built successfully!');
});

APP-bundle.js

var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./systemjs.config.js').then(function() {
  return builder.bundle(
    'app - dist/libs-bundle.js', // build the app only, exclude everything already included in …

我正在使用Angular2和SystemJS来创建Web应用程序.我的应用程序和路由器配置中有一些模块,我使用延迟加载来打开它们.

这是我的应用程序的路由文件,延迟加载两个模块:

const appRoutes: Routes = [
    { path: '', component: MainComponent,
        canActivate: [AuthGuard],
        children: [
            { path: 'dashboard', component: DashboardComponent },
            { path: 'first-section', loadChildren: 'app/modules/FIRST-SECTION/first-section.module' },
            { path: 'second-section', loadChildren: 'app/modules/SECOND-SECTION/second-section.module' },
            { path: 'documents', component: DocumentsComponent },
            { path: 'users', component: UsersComponent },
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
        ]
    }
];

我使用Gulp为开发服务器和生产构建创建任务.对于构建,我使用SystemJS Builder为整个应用程序创建缩小的JS文件.

gulp.task('app-bundle', function() {
    var builder = new Builder('src', 'src/systemjs.config.js');

    return builder.buildStatic('app/main.js', 'build/scripts/app.min.js', { minify: true });
});

但是......如果我尝试在构建包上运行服务器,那么当它试图运行延迟加载的模块时应用程序不起作用.它给了我以下错误:

GET http://127.0.0.1:8080/app/modules/FIRST-SECTION/first-section.module 404 …