कोणीय-क्ली में उत्पादन dist फ़ोल्डर के अंदर आलसी लोड किए गए घटकों को कैसे बंडल करें?

Question

मैं विकास के लिए angular-cli का उपयोग कर रहा हूं और मैंने अपनी परियोजना बनाने के लिए निम्न आदेश और कोड का उपयोग किया है।

npm install angular-cli (कोणीय 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 पथ पर नेविगेट का इस्तेमाल किया है करने के लिए, मैं के लिए app/lazy-me/lazy-me.component.js

404 त्रुटि फ़ोल्डर मौजूद मिलता है लेकिन lazy-me.component.js अपेक्षित रूप से अनुपलब्ध है क्योंकि सबकुछ main.js में .css और .html फ़ाइलों को छोड़कर बंडल हो जाता है। हालांकि, मुझे dist/app/lazy-me/ में शामिल करने के लिए ng build -prod चाहिए।

वहाँ system-config.ts में किसी भी सेटिंग वरना कहीं भी जब एक -prod निर्माण कर रही है, जहां मैं आलसी लोड घटक शामिल कर सकते हैं dist फ़ोल्डर का हिस्सा बनने का है?

Answer 1

ऐसा लगता है कि आपका 'आलसी' घटक वास्तव में आपके राउटर कॉन्फ़िगरेशन में आलसी लोड नहीं होता है। सबसे पहले, आपको इसे अपने मॉड्यूल में लपेटने की ज़रूरत है, जिसे आप आलसी लोड करना चाहते हैं। फिर, आपको घटक को संदर्भित करने के बजाय, उस मॉड्यूल को संदर्भित करने के लिए अपने राउटर कॉन्फ़िगरेशन में 'loadChildren' प्रॉपर्टी की आवश्यकता है।

यह लेख पूरे मुद्दे पर कुछ और प्रकाश डाला सकता है, आशा है कि यह बासी जाना नहीं है और मदद करता है: https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee

इसके अलावा, इस तरह समस्याओं को डीबग करने के लिए: यदि आप कोणीय CLI के संस्करण का नवीनीकरण करने को तैयार हैं कम से कम beta.32 तक, उन्होंने create-react-app के समान 'eject' कमांड जोड़ा है। इसका उपयोग करके, आपको वेबपैक कॉन्फ़िगरेशन फ़ाइल तक पहुंच प्राप्त होती है। इसका उपयोग करके, यदि आप डिफ़ॉल्ट सीएलआई अपेक्षा के अनुसार काम नहीं कर रहे हैं, तो आप अपनी जरूरतों को पूरा करने के लिए उत्पादन निर्माण को बदल सकते हैं। मुझे पता है कि यह एक तरह का काम है। सौभाग्य!