Question

如何在使用单个TypeScript生成的输出文件时在systemJS中定义依赖模块？

我遇到的问题是加载一个与其他angularJS模块有依赖关系的angularJS应用程序。例如。我的启动文件包含

import {MainAppCtrl} from "./main"
import {MainComponent} from "./main.component"

angular.module("app", ['myModule'])
    .component("mainView", new MainComponent())
    .controller("mainCtrl", MainAppCtrl)
;
angular.element(document).ready(() => {
    angular.bootstrap(document, ['app']);
})

然后我在module1 / module1.ts中定义了一个'myModule'作为

import {Module1ComponentA} from "./a.component";
import {Module1ComponentB} from "./b.component";

angular.module("myModule", [])
    .component("module1ComponentA", new Module1ComponentA())
    .component("module1ComponentB", new Module1ComponentB())
;

在我的tsconfig.json中我已配置单个输出文件

{
"compilerOptions": {
    "target": "es5",
    "module": "system",
    "noImplicitAny": false,
    "sourceMap": true,
    "removeComments": false,
    "outFile": "./output/all.bundle.js"
    //"outDir": "./output"
   },

最后是System.Config

        System.config({
        packages: {
            output: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        // depCache: {
        //  'boot': ['module1'],
        // },
        bundles: {
            '/output/all.bundle': ['boot']
        }

    });
    System.import('boot').then(null, console.error.bind(console));

如果我删除'app'上的['myModule']依赖关系，那么应用程序会加载，但是一旦我添加了依赖项，我就会得到'未能实例化模块'的异常。原因是module1中的（系统）模块从不加载，因为它们没有（系统）依赖。我试图在System.Config中使用'depCache'，但无法使其正常工作。

生成的'boot'的js代码是

System.register("boot", ["main", "main.component"], function(exports_6, context_6) {
"use strict";
var __moduleName = context_6 && context_6.id;
var main_1, main_component_1, B;
return {
    setters:[

如果我将“module1 / module1”添加到依赖项列表

System.register("boot", ["main", "main.component", "module1/module1"],

然后加载。我发现唯一的hacky解决方法是在boot中为module1添加一个import语句，然后分配一个虚拟变量，这样就可以将module1包含在依赖列表中。

import {MainAppCtrl} from "./main"
import {MainComponent} from "./main.component"

import * as Dummy1 from "./module1/module1"
var dummy1 = (<any>Dummy1);   // <<--- this will add module1 to the dependency list

angular.module("app", ['myModule'])
    .component("mainView", new MainComponent())
    .controller("mainCtrl", MainAppCtrl)
;

angular.element(document).ready(() => {
    angular.bootstrap(document, ['app']);
})

如何在System.Config中添加此依赖项？

Answer 1

尝试将system.config修改为：

<script>
  System.config({
    packages: {
      scripts: { 
        format: 'cjs',
        defaultExtension: 'js'
      }
    },
    ...
  });
  ...
 </script>

如何在使用单个TypeScript输出文件时定义systemJS中的依赖项

1 个答案: