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

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

npm install angular-cli (angular -cli: 1.0.0-beta.10)

ng new my-app

ng g component lazy-me

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

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 build?

Ответы

Ответ 1

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

В этой статье можно пролить свет на всю проблему, надеюсь, что она не станет устаревшей и поможет: https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee p >

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