主页 / 问题 / 933654
Accepted
Pavel
Asked:2020-01-18 19:01:56 +0000 UTC2020-01-18 19:01:56 +0000 UTC

延迟加载模块的 Angular 2+ 依赖项

  • 772

在了解延迟加载模块如何在 Angular 2+ 中工作的过程中，我整理了一张图片。如果我正确理解它的工作原理，我想得到反馈，如果没有，它实际上是如何工作的？

延迟加载模块，作为一个独立的应用程序，有自己的依赖范围，被收集在一个单独的chunk中，在搜索其他模块中声明的组件、服务、指令或拦截器时，需要通过一个公共类型模块来导入它们SharedModule。共同实体被倾销。也就是说，在延迟加载模块的情况下，在查找依赖项时，角度不会上升到AppModule. 延迟加载模块本身是依赖图的顶部，并且直接将来自其他模块的实体添加到providers，打破了这种方法，使其成为通用依赖树的一部分，这迫使它立即以正常模块模式加载。providers可能在项目组装阶段连接来自。唯一的出路是使用imports因为这种结构很可能只​​在模块请求时起作用。这个问题大概包括了模块生命周期的问题，因为大家都在谈论组件的生命周期，而这个上下文中的模块不知何故不习惯讨论。

全部的：

  1. providers上瘾和上瘾是真的imports在不同的时间吗？
  2. 生命周期的哪些主要阶段会从根本上影响延迟加载模块的加载时间？
angular2

1 个回答

  1. Best Answer

    拦截器不是声明，因为它们是服务。

    没有图，一般人的痛苦是不清楚这些信息是从哪里来的，BUT The biggest confusion regarding imported modules is that developers think they make a hierarchy. All modules are merged during compilation phase.Lazy 模块有自己的注入器，但是如果你要找的提供者不在那里，那么惰性模块会去根注入器，如果根注入器中没有依赖关系，那么它将是异常NullInjectorError: No provider for %token%的。

    回答您的问题：

    1）不，那不是真的。imports在编译后的代码中，根本没有 , 之类的东西providers。在编译阶段，AOTCompiler它收集关于 in 模块的信息module.metadata.json，然后递归地绕过 in 声明的所有模块imports，“拉出”提供程序并将整个东西合并到一个名为NgModuleDefinition.

    例如：

    @NgModule({
    imports: [HttpClientModule]
})
export class AppModule {}

    编译代码：

    var AppNgModuleFactory = createModuleFactory(
    AppModule,
    [],
    function() {
        return moduleDef([
            moduleProviderDef(4608, HttpClient, HttpClient, []),
            moduleProviderDef(5120, HTTP_INTERCEPTORS, (interceptor) => [interceptor], [])
        ]);
    }
);

    4608is 4096 | 512 = 4608, where -is , and 4096-是描述提供者类型的位掩码。A是，在哪里。NodeFlags.LazyProvider512NodeFlags.TypeClassProvider51204096 | 10241024NodeFlags.TypeFactoryProvider

    第二个参数是令牌，第三个是注入器将从令牌接收的值，第四个是依赖项（如果它HttpClient向其构造函数中注入了某些东西）。

    当然，所有的提供者都在那里合并HttpClientModule，我只是没有在这里一一列出。其他模块也是如此。

    关于SharedModule以及为什么需要它。所有声明（组件、管道和指令）都被编译成“定义”。中的组件ViewDefinition、管道和指令NodeDef。感谢定义，然后您可以创建工厂。exports它是一种语法糖，它使将来访问这些声明的工厂引用成为可能。

    2）这个问题的答案可以在这里找到

    • 1

相关问题