Angular 2-将模块移至自己的项目

Question

我正在尝试使用angular
2创建类似门户的功能，该功能将提供基本导航和全局服务（例如身份验证），但允许其他开发人员创建自己的模块，这些模块从根本上插入到门户中。

我正在使用angular-
cli，并通过在项目内部创建的模块（请参见下面的树）进行了快速的概念验证，这些模块通过路由器（带有loadChildren）被延迟加载到app.module中。每个子模块都有自己的路由器，并且从根本上与父门户（app.module）分离。

我最终希望将这些子模块移到他们自己的项目中，但是绝对不知道从哪里开始，并且与该在线相关的信息似乎很少。如果有人知道一个示例或可以演示如何进行设置，我将非常感激。

编辑：如果可能的话，我想继续使用Angular-CLI功能。

这是我的目录结构。模块1、2和3需要进入自己的项目。

+-- app
│   +-- app.component.css
│   +-- app.component.html
│   +-- app.component.spec.ts
│   +-- app.component.ts
│   +-- app.module.ts
│   +-- module1
│   │   +-- dataflows
│   │   │   +-- dataflows.component.css
│   │   │   +-- dataflows.component.html
│   │   │   \-- dataflows.component.ts
│   │   +-- module1.component.css
│   │   +-- module1.component.html
│   │   +-- module1.component.ts
│   │   +-- module1.module.ts
│   │   \-- other
│   │       +-- other.component.css
│   │       +-- other.component.html
│   │       \-- other.component.ts
│   +-- index.ts
│   +-- module2
│   │   +-- module2.component.css
│   │   +-- module2.component.html
│   │   +-- module2.component.ts
│   │   \-- module2.module.ts
│   \-- module3
│       +-- dummy1
│       │   +-- dummy1.component.css
│       │   +-- dummy1.component.html
│       │   \-- dummy1.component.ts
│       +-- module3.component.css
│       +-- module3.component.html
│       +-- module3.component.ts
│       +-- module3.module.ts
│       \-- dummy2
│           +-- dummy2.component.css
│           +-- dummy2.component.html
│           \-- dummy2.component.ts
+-- index.html

Answer 1

我终于弄清楚了如何使用SystemJS而不是Webpack / Angular CLI来使其工作。

我基本上将模块移到了自己的项目中，并通过子项目tsconfig.json文件中的outFile：属性使用了“ npm run
tsc”。您还必须在tsconfig.json文件中设置“ module”：“ system”

然后，我将生成的编译模块手动复制到主项目的根目录中。

为了使延迟加载起作用，我在路由器配置中使用loadChildren：’test.module’并添加：

bundles: {
    'test.module.js': ['test.module']
}

到我的systemjs.config.js

希望这对尝试实现这种设置的其他人有所帮助。