在Angular 7中从编译库延迟加载模块

在Angular 7中从编译库延迟加载模块,angular,angular-cli,lazy-loading,jit,Angular,Angular Cli,Lazy Loading,Jit,我正在尝试从库中延迟加载NgModule。我有一个ng应用程序,其中包含一些库(项目)。这些库在其他一些项目中被重用。问题是我找不到一个解决方案,它可以同时使用jit和aot以及编译/未编译库 文件结构是这样的 app -projects --lib ---(lib files) -src --(app files) const routes: Routes = [ { path: 'eager', children: [ {

我正在尝试从库中延迟加载NgModule。我有一个ng应用程序,其中包含一些库(项目)。这些库在其他一些项目中被重用。问题是我找不到一个解决方案,它可以同时使用jit和aot以及编译/未编译库

文件结构是这样的

app
-projects
--lib
---(lib files)
-src
--(app files)
const routes: Routes = [
    {
        path: 'eager',
        children: [
            {
                path: '',
                component: LibComponent // component imported from lib
            },
            {
                path: 'lazy',
                loadChildren: 'lib/src/lib/lazy/lazy.module#LazyModule' // module i want to load lazily
            }
        ]
    }
];
AppModule有路由,如下所示

app
-projects
--lib
---(lib files)
-src
--(app files)
const routes: Routes = [
    {
        path: 'eager',
        children: [
            {
                path: '',
                component: LibComponent // component imported from lib
            },
            {
                path: 'lazy',
                loadChildren: 'lib/src/lib/lazy/lazy.module#LazyModule' // module i want to load lazily
            }
        ]
    }
];
如果我这样使用它,在jit中尝试导航到惰性路由时会出现运行时错误(aot工作正常):
错误错误:未捕获(承诺中):类型错误:未定义不是函数类型错误:未定义不是函数

此注释建议不要将LazyModule包含到任何桶文件中,但如果我将其从库的公共_api中排除,则会出现构建错误:

ERROR in ./projects/lib/src/lib/lazy/lazy.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: C:\projects\lazy_minimal\lazy-minimal\projects\lib\src\lib\lazy\lazy.module.ts is missing from the TypeSc
ript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (C:\projects\lazy_minimal\lazy-minimal\node_modules\@ngtools\webpac
k\src\angular_compiler_plugin.js:752:23)
    at plugin.done.then (C:\projects\lazy_minimal\lazy-minimal\node_modules\@ngtools\webpack\src\loader.js:41:31
)
    at process._tickCallback (internal/process/next_tick.js:68:7)


是否有任何方法可以使其同时适用于aot和jit?

Angular CLI中存在一个公开的问题,即以延迟加载方式在节点_模块中加载已编译的库,该问题仍然存在

建议的最后一个解决办法是:

这条线是不久前打开的。如此多的评论使得人们很难从任何东西中找到信息,除了最新的评论。但另一方面,我不认为大多数人会浏览所有的评论。看到此帖子的新用户大多会阅读第一条和最新的评论,并且会丢失其间所说的内容

因此,出于上述原因(大量评论、隐藏评论、难以报告和通知他人),我将锁定此问题,以防止在新评论出现时丢失此评论

感谢所有报告和帮助诊断问题并提供解决方法的人

我们推荐的在角度工作区或节点模块中延迟加载库的方法是使用代理/包装器模块。使用这种方法,延迟加载将在JIT和AOT模式下工作。还有一些解决方案仅在AOT模式下工作,例如Tconfig导入,但是为了获得更好的开发体验,我们不鼓励这样做

下面是推荐方法的示例

首先
lazy/lazy.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LibModule, LazyComponent } from 'my-lib';

@NgModule({
  imports: [
    LibModule,
    RouterModule.forChild([
      { path: '', component: LazyComponent, pathMatch: 'full' }
    ])
  ]
})
export class LazyModule { }
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
    ]),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
然后
app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LibModule, LazyComponent } from 'my-lib';

@NgModule({
  imports: [
    LibModule,
    RouterModule.forChild([
      { path: '', component: LazyComponent, pathMatch: 'full' }
    ])
  ]
})
export class LazyModule { }
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
    ]),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

1月10日,与合作者的角度锁定和有限对话

如果没有包装器模块,仍然是不可能的:您是否尝试过根本不使用桶文件?我在过去使用桶文件和延迟加载模块时出现了奇怪的行为。使用包装器的技巧似乎只延迟加载包装器模块,当主bundlebarrel文件中包含库中的模块我需要延迟时,它是库根中的公共api,它被指定为ng-package.json的入口点。如何构建库来避免它?请检查更新的post@ADAmelinNow receive
错误:Angular JIT编译失败:“@Angular/compiler”未加载在Angular9中执行此操作时,Angular9中的FYILazy加载与Angular7有很大不同,这是ivy和符号链接的问题。会创建一个临时文件集,但服务器无法及时将其提取到filewatch之外。在停止服务器并再次运行时,似乎可以正常工作。