ng build/serve "could not resolve" a lazy-loaded module from a library

[brianpilati]

Versions

Angular CLI: 6.0.0
Node: 8.9.4
OS: darwin x64
Angular: 6.0.0
... cli, common, compiler, compiler-cli, core, forms, http
... platform-browser, platform-browser-dynamic, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.0
@angular-devkit/core         0.6.0
@angular-devkit/schematics   0.6.0
@ngtools/json-schema         1.2.0
@schematics/angular          0.6.0
@schematics/update           0.6.0
ng-packagr                   2.4.2
rxjs                         6.1.0
typescript                   2.7.2

Repro steps - This version is when the path is correct per the library.

• Step 1 - Unzip project file
  angular-error_could_not_resolve.zip
• Step 2 - npm install
• Step 3 - ng build lazy-load-one
• Step 4 - ng build lazy-load-two
• Step 5 - ng build or ng serve

Observed behavior

ERROR in Could not resolve module ./library/lazy-load-two.module relative to <{path-removed}/angular-error/dist/lazy-load-one/lazy-load-one.d.ts

Repro steps - This version is when the path is correct per the build library in the dist folder and ng build --prod

• Step 1 - Unzip project file
  angular-error_lazy_namespace_object.zip
• Step 2 - npm install
• Step 3 - ng build lazy-load-one
• Step 4 - ng build lazy-load-two
• Step 5 - ng build or ng serve

Observed behavior

ERROR in ./src/$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve '<{path-removed}/angular-error/dist/lazy-load-one/lib/library/lazy-load-two.module.ngfactory.js' in '<{path-removed}>/angular-error/src/$$_lazy_route_resource'

Repro steps - This version is when the path is correct per the build library in the dist folder and just ng build

• Step 1 - Unzip project file
  angular-error_lazy_namespace_object.zip
• Step 2 - npm install
• Step 3 - ng build lazy-load-one
• Step 4 - ng build lazy-load-two
• Step 5 - ng build or ng serve

Observed behavior

ERROR in No NgModule metadata found for 'LazyLoadModule'.

Repro steps - This version is when I attempt to lazy-load directly from the node_module. This was my first attempt and references the likelihood that this is a duplicate of #2601. At ng-conf, I spoke with Victor about the situation and he told me that --build attempt to tree shake the code and since the node package has already been built it will not work.

• Step 1 - Unzip project file
  angular-error_loaded_from_node_module.zip

• Step 2 - npm install

• Step 3 - ng build lazy-load-one

• Step 4 - ng build lazy-load-two

• Step 5 - Move the /dist/lazy-load-two folder to node_modules

• Step 5 - ng build --prod

Observed behavior

ERROR in : Error: Trying to import a source file from a node_modules package: import <{removed_path}>/angular-error/dist/lazy-load-two/lazy-load-two.d.ts from <{removed_path}>/angular-error/node_modules/lazy-load-one/lazy-load-one.d.ts
    at TsCompilerAotCompilerTypeCheckHostAdapter.fileNameToModuleName (<{removed_path}>/angular-error/node_modules/@angular/compiler-cli/src/transformers/compiler_host.js:220:23)
    at TsCompilerAotCompilerTypeCheckHostAdapter.toSummaryFileName (<{removed_path}>/angular-error/node_modules/@angular/compiler-cli/src/transformers/compiler_host.js:244:25)
    at AotSummaryResolver.toSummaryFileName (<{removed_path}>/angular-error/node_modules/@angular/compiler/bundles/compiler.umd.js:21805:26)
    at <{removed_path}>/angular-error/node_modules/@angular/compiler/bundles/compiler.umd.js:19744:53
    at Array.map (<anonymous>)
    at ToJsonSerializer.serialize (<{removed_path}>/angular-error/node_modules/@angular/compiler/bundles/compiler.umd.js:19725:35)
    at serializeSummaries (<{removed_path}>/angular-error/node_modules/@angular/compiler/bundles/compiler.umd.js:19591:31)
    at AotCompiler._createSummary (<{removed_path}>/angular-error/node_modules/@angular/compiler/bundles/compiler.umd.js:20410:18)
    at AotCompiler._compileImplFile (<{removed_path}>/angular-error/node_modules/@angular/compiler/bundles/compiler.umd.js:20355:65)
    at <{removed_path}>/angular-error/node_modules/@angular/compiler/bundles/compiler.umd.js:20347:70
    at Array.map (<anonymous>)
    at AotCompiler.emitAllImpls (<{removed_path}>/angular-error/node_modules/@angular/compiler/bundles/compiler.umd.js:20347:35)
    at AngularCompilerProgram.generateFilesForEmit (<{removed_path}>/angular-error/node_modules/@angular/compiler-cli/src/transformers/program.js:691:46)
    at AngularCompilerProgram._emitRender2 (<{removed_path}>/angular-error/node_modules/@angular/compiler-cli/src/transformers/program.js:284:27)
    at AngularCompilerProgram.emit (<{removed_path}>/angular-error/node_modules/@angular/compiler-cli/src/transformers/program.js:231:22)
    at AngularCompilerPlugin._emit (<{removed_path}>/angular-error/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:806:49)

Desired behavior

The desired behavior is: An "App" should be able to "lazy-load" a library and the library should be able to "lazy-load" 1-N additional libraries.

Mention any other details that might be useful (optional)

Use case:
I am building an app that has a primary router-outlet. If the user is not authenticated then a login-screen should be displayed in the router-outlet. If they user is authenticated then I display a "side-bar" menu in the primary router-outlet. The "side-bar" a library that represents a "navigation library" which contains a secondary router-outlet. Inside the navigation library, I need to "lazy-load" additional libraries by user click that represent features.

Currently, the app can lazy-load the first library built by ng build library1. However, once I introduce the second "lazy-load" library build by ng build library2 I get the "observed behavior" error.

--Cheers,
Brian

[brianpilati]

Could be a duplication or similar to #10750

[filipesilva]

I think this is the same as #2601

[Bhargavi-Kotagaram]

Hi,
Me too facing the same kind of issue when I am doing the lazy loading for the feature modules in the library and running the cmd ng serve

ERROR in Could not resolve module ./fall-out/fall-out.module relative to D:/dashboard-management/dist/dashboard-management/dashboard-management.d.ts

If will be great some one can help me on this issue.

Thanks,

[alan-agius4]

Duplicate of #6373 and #2601

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}