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屋！