Angular 4功能模块

Question

我们可以在单独的项目中开发一个角度4特征模块，并与根模块建立链接以作为延迟加载吗？

如果是这样，那么loadChildren属性的路由URL是什么

Answer 1

TL;DR

Follow this guide and check out official Angular modules like HttpModule.

Long Answer

This is possible but I haven't found any official documentation or tutorial about it. What you basically have to do is to create a library that can be included in your project. Like the official RouterModule or HttpModule.

You basically have to create a module, export all the public stuff like directives, services and components and then finally build the whole feature module.

Building the module isn't that simple. In the HttpModule they use ngc for compiling the typescript. ngc is the official Angular compiler. Afterwards, they package and minify their code with rollup-js and minify-js.

So the dependencies you need (for the most basic library) are @angular/core, @angular/compiler, @angular/compiler-cli, rollup, rxjs, typescript and zone.js.

You also have to modify your tsconfig.json. These are the major changes (the second link I provided at the end lists more performance boosting changes):

• add the following line for Ahead-of-Time (AoT) compilation: "angularCompilerOptions": { "strictMetadataEmit": true}
• set "declaration": true, this makes the compiler create the definitions file (you know the some-file.d.ts stuff)
• It's also important that you use explicit paths to other modules. This is because if you in example include the Angular modules in your build the application will crash because Angular would be present twice.
• also set "module": "es2015"

Now you need to configure the rollup.config.js like this:

• entry should be the path to your transpiled index.ts
• dest should be bundles/modulename.umd.js, this is the Angular standard name for modules (.umd.js is the standard format Angular modules).
• moduleName is going to be a JavaScript object so no special chars (also no dashes)
• at last, you have to define the globals, you know the modules you use but haven't written yourselves like @angular/core, so globals should be an object like this: { "@angular/core": "ng.core"}

Take a look at Angular's rollup.config.js for the HttpModule?: here.

Then setup your package.json to publish your module. Imporant is that you:

• set the "version" (remember to use semantic versioning)
• add your "peerDependencies"
• set "main" to the path of your .umd.js file
• set "module" to your transpiled index.js file

Now you can build and then add your feature module as a dependency to your other projects and use your awsome stuff there.

Two good post for further information (although the second one isn't simple to understand):

This post explains how to create a (shared) module.

This post goes more into the little details about publishing your module.

Answer 2

Here is a very good talk on YouTube that will help you achieve that. It covers the configuration from scratch without tons of dependencies and boilerplate code.