Ленивая загрузка модуля из скомпилированной библиотеки в Angular 7 - PullRequest
Новая
       14

Ленивая загрузка модуля из скомпилированной библиотеки в Angular 7

1 голос
/ 12 апреля 2019

Я пытаюсь лениво загрузить NgModule из библиотеки. У меня есть приложение нг, которое содержит некоторые библиотеки (проекты). Эти библиотеки повторно используются в некоторых других проектах. Проблема в том, что я не могу найти решение, которое бы работало с jit и aot, а также скомпилированной / не скомпилированной библиотекой.

структура файла выглядит следующим образом 

app
-projects
--lib
---(lib files)
-src
--(app files)

AppModule имеет маршрутизацию, которая выглядит следующим образом 

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 работает правильно): ERROR Error: Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function

этот комментарий https://github.com/angular/angular-cli/issues/9488#issuecomment-370065452 предлагает не включать LazyModule в какие-либо бочечные файлы, но если я исключу его из public_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?

1 Ответ

0 голосов
/ 24 апреля 2019

Существует открытая проблема в Angular-CLI о загрузке скомпилированной библиотеки в node_modules с отложенной загрузкой здесь , она все еще открыта.

последний предложенный обходной путь:

Эта тема была открыта некоторое время назад. Наличие таких комментариев мешает людям находить информацию ни в чем, кроме последних комментариев. Но с другой стороны, я не думаю, что большинство людей все равно пройдут через все комментарии. Новые пользователи, которые видят эту ветку, в основном читают первые и последние комментарии и теряют сказанное между ними.

Таким образом, по причинам, указанным выше (большой объем комментариев, скрытые комментарии, трудно сообщать и информировать людей), я блокирую эту проблему, чтобы предотвратить потерю этого комментария при поступлении новых комментариев.

Спасибо всем, кто сообщил и помог диагностировать проблемы и предоставил обходные пути.

Наш рекомендуемый подход к отложенной загрузке библиотеки в угловых рабочих пространствах или модулях узлов заключается в использовании модуля прокси / оболочки. При таком подходе отложенная загрузка будет работать как в режиме JIT, так и в режиме AOT. Существуют и другие решения, которые работают исключительно в режиме AOT, такие как импорт tsconfig, однако для лучшего опыта разработки мы не поощряем это.

Ниже приведен пример рекомендуемого подхода;

первый 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 { }

, затем app.module.ts

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 { }

угловой заблокированный и ограниченный разговор с сотрудниками 10 января

...