आलसी लोडिंग के साथ कोणीय 2 एओटी [आलसी मॉड्यूल के पथ] को हल नहीं कर सकता है .ngfactory.ts

Question

मैं एक ऐप को बदलने की कोशिश कर रहा हूं जो पहले से ही आलसी में आलसी लोड मॉड्यूल के साथ काम कर रहा था। मैं एओटी कोड संकलित करने के लिए @ ngtools/webpack टूलकिट का उपयोग कर रहा हूं, हालांकि मुझे एक त्रुटि मिल रही है कि कोणीय को आलसी लोड मॉड्यूल के कोड को लगता है जैसा लगता है।

ERROR in ./src/ngfactory async 
Module not found: Error: Can't resolve '/Library/WebServer/Documents/envato-teams/src/ngfactory/src/app/components/container/projects.ngfactory.ts' in '/Library/WebServer/Documents/envato-teams/src/ngfactory' 
@ ./src/ngfactory async 
@ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 
@ ./src/ngfactory/src/app/app.module.ngfactory.ts 
@ ./src/main.aot.ts 
@ multi main 

मेरे ऐप मार्गों परिभाषा वर्थ उल्लेख इस परियोजना के मॉड्यूल lazily भरी हुई है:

{ 
    path: 'projects', loadChildren: './components/container/projects#ProjectModule' 
}, 

यह कैसे मेरे सेटअप लग रहा है की तरह है:

tsconfig:

... 
"angularCompilerOptions": { 
    "genDir": "./src/ngfactory", 
    "entryModule": "src/app/app.module#AppModule" 
} 
... 

Webpack :

new ngtools.AotPlugin({ 
    tsConfigPath: './tsconfig.aot.json', 
}), 

Main.aot.ts

/* 
* Providers provided by Angular 
*/ 
import { platformBrowser } from '@angular/platform-browser'; 
import { AppModuleNgFactory } from './ngfactory/src/app/app.module.ngfactory'; 

import { Servicesconfig } from './app/services/index'; 

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 

webpack में मैं के साथ @ ngtools/Webpack ts फ़ाइलें संकलन कर रहा हूँ करने से:

// Support for .ts files. 
{ 
    test: /\.ts$/, 
    loaders: ['@ngtools/webpack'], 
    exclude: [/\.(spec|e2e)\.ts$/] 
}, 

आपकी मदद के लिए धन्यवाद!

Answer 1

मैं एओटी और आलसी लोड मॉड्यूल के साथ खुद को संघर्ष कर रहा था।

एक या दूसरे का चयन करना वास्तव में प्रोड बिल्ड के लिए एक विकल्प नहीं था।

यहां तक ​​कि मुझे वास्तव में उन सुविधाओं की एक साथ आवश्यकता थी, मैं उन्हें प्राप्त करने में सक्षम नहीं था और उन्हें छोड़ना पड़ा। आज तक !

angular-cli दो दिन पहले रिलीज किया गया: 1.0.0-beta.21 जो एओटी और आलसी लोडिंग का समर्थन करता है!

अपने कोणीय CLI परियोजना में:

npm cache clean 
npm install --save-dev angular-cli@latest 
ng init 

का आनंद लें!

पीएस: कोणीय-क्ली टीम के लिए बड़ा धन्यवाद जिसने यहां एक शानदार काम किया ...!

संपादित करें:
मैंने किया था कुछ मानक:

+-----------------------+-------------+--------------+-----------+-------------+ 
|      | Main bundle | Chunk 0 | Scripting | First paint | 
+-----------------------+-------------+--------------+-----------+-------------+ 
| ng serve    | 4.5 MB  | Not splitted | 6075 ms | 5500+ ms | 
| ng serve --prod  | 334 KB  | Not splitted | 5587 ms | 4750+ ms | 
| ng serve --aot  | 3.3 MB  | 326 KB  | 4011 ms | 4400+ ms | 
| ng serve --prod --aot | 243 KB  | 18.1 Kb  | 3860 ms | 4250+ ms | 
+-----------------------+-------------+--------------+-----------+-------------+ 

(परिणाम हैं सुपर अच्छा नहीं है क्योंकि मैं खोला बहुत कुछ और 3 पर नज़र रखता है है और अपने लैपटॉप दर्द में है^__ ^) ।

यहाँ हम क्या से याद कर सकते हैं:
- --prod --aot आकार का निर्माण 27%--prod से निर्माण
छोटा होता है - --prod --aot निर्माण 31% जब से पटकथा --prod निर्माण
तेजी से होता है - एओटी शांत है!
- शायद aot ध्वज के बिना एक बग है क्योंकि जब तक मुझे कुछ याद नहीं आया, मुझे आलसी लोड किए गए हिस्से को नहीं मिला और मुझे मुख्य बंडल में आलसी लोड कोड मिला। मैंने गिथब पर issue खोला।