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

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