Как связать ленивые загруженные компоненты внутри папки dist dist в angular-cli?

Question

Я использую angular-cli для разработки, и я использовал следующие команды и код для создания моего проекта.

npm install angular-cli (угловой кли: 1.0.0-beta.10)

ng new my-app

ng g component lazy-me

Затем добавили файл app.router.ts со следующим сценарием

import { provideRouter, RouterConfig } from '@angular/router'; 
import { AppComponent } from './app.component'; 
// import { LazyMeComponent } from './+lazy-me/lazy-me.component'; 

const appRoutes : RouterConfig = [ 
    {path: '', component: AppComponent}, 
// {path: 'lazyme', component: LazyMeComponent} 
    {path: 'lazyme', component: 'app/+lazy-me#LazyMeComponent'} 
]; 

export const APP_ROUTER_PROVIDER = [ 
    provideRouter(appRoutes) 
]; 

И изменилось мой main.ts, как указано ниже

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { enableProdMode, 
    SystemJsComponentResolver, 
    ComponentResolver } from '@angular/core'; 
import {RuntimeCompiler} from '@angular/compiler'; 
import { AppComponent, environment } from './app/'; 

import { APP_ROUTER_PROVIDER } from './app/app.router'; 

if (environment.production) { 
    enableProdMode(); 
} 

bootstrap(AppComponent,[ 
    APP_ROUTER_PROVIDER, 
    { 
    provide: ComponentResolver, 
    useFactory: (r) => new SystemJsComponentResolver(r), 
    deps: [RuntimeCompiler] 
    }, 
]); 

И сделать производство сборки я использовал следующую команду ng build -prod

Когда я раскрываю свой код на веб-сервере и перейти к lazyme пути, я получаю 404 ошибки для app/lazy-me/lazy-me.component.js

Папка существует но lazy-me.component.js отсутствует как и ожидалось, так как все вставляется в main.js, за исключением файлов .css и .html. Однако я хочу, чтобы ng build -prod включил lazy-me.component.js в dist/app/lazy-me/.

Есть ли какие-либо настройки в system-config.ts или где-нибудь еще, где я могу включить ленивые загруженные компоненты, чтобы быть частью папки dist при выполнении сборки -prod?

Answer 1

Похоже, что ваш «ленивый» компонент на самом деле не загружен лениво в конфигурацию вашего маршрутизатора. Во-первых, вам нужно обернуть его в свой собственный модуль, который вы хотите загрузить лениво. Затем вам понадобится свойство loadChildren в конфигурации вашего маршрутизатора, чтобы обратиться к этому модулю, а не напрямую обращаться к компоненту.

Эта статья может пролить некоторый свет на всю проблему, надеюсь, что он не идет несвежим и помогает: https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee

Кроме того, для отладки проблем, как это: если вы готовы обновить версию угловых CLI по крайней мере, к бета-версии 32, они добавили команду «извлечения», подобную команде create-react-app. Используя это, вы получаете доступ к файлу конфигурации webpack. Используя это, вы можете изменить сборку сборки в соответствии с вашими потребностями, если CLI по умолчанию работает не так, как ожидалось. Я знаю, что это своего рода работа. Удачи!