Angular 2-将模块移至自己的项目 [英] Angular 2 - moving modules to their own project

问题描述

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

I am attempting to create portal like functionality with angular 2 which will provide base navigation and global services such as authentication, but allow other developers to create their own modules which fundamentally plug into the portal.

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

I am using angular-cli and have made a quick proof of concept with the modules being created inside the project (see tree below) which are lazy loaded in app.module via the router (with loadChildren). Each child module has its own router and is fundamentally decoupled from the parent portal (app.module).

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

I ultimately want to move these child modules into their own projects, but have absolutely no clue about where to start and there seems to be very little information relating to this online. If anyone knows of an example or can demonstrate how to set this up I´d be very grateful.

如果可能的话，我想继续使用Angular-CLI功能.

I would like to continue to use the Angular-CLI functionality to do this if it is possible.

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

Here is my directory structure. Module 1, 2 & 3 need to move into their own projects.

+-- 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

推荐答案

我终于弄清楚了如何使用SystemJS而不是Webpack/Angular CLI来实现此功能.

I have finally figured out how to get this working using SystemJS instead of Webpack/Angular CLI.

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

I basically moved the modules into their own project and used "npm run tsc" using the outFile: property in the tsconfig.json file in the sub-project. You also have to set "module": "system" in the tsconfig.json file

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

I then manually copied the resulting compiled module in the root of the main project.

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

In order for the lazy loading to function I am using loadChildren: 'test.module' in the router configuration and adding:

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

到我的systemjs.config.js

to my systemjs.config.js

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

Hope this helps someone else who is trying to achieve this kind of setup.

这篇关于Angular 2-将模块移至自己的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！