angular-cli: [ng6] `ng serve`; `ng build -prod` fails on `ng g library` dependent project

Versions

Angular CLI: 6.0.7
Node: 8.11.2
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.7
@angular-devkit/build-angular     0.6.7
@angular-devkit/build-optimizer   0.6.7
@angular-devkit/core              0.6.7
@angular-devkit/schematics        0.6.7
@angular/cdk                      6.2.0
@angular/cli                      6.0.7
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.2.0
@ngtools/webpack                  6.0.7
@schematics/angular               0.6.7
@schematics/update                0.6.7
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Repro steps

ng new angular-vertical-tabs && cd $_
ng add @angular/material; npm i --save @angular/flex-layout==6.0.0-beta.15
ng g library material-tabs -p vertical
ng build material-tabs --prod
Add dist to git, then import in other Angular 6 project

https://github.com/SamuelMarks/angular-vertical-material-tabs

Observed behavior

Works fine on ng serve. On ng build --prod I get:

ERROR in ./node_modules/angular-vertical-tabs/dist/material-tabs/material-tabs.ngfactory.js
Module not found: Error: Can't resolve 'material-tabs' in 'my-new-repo/node_modules/angular-vertical-tabs/dist/material-tabs'
ERROR in ./src/app/slash/slash.module.ngfactory.js
Module not found: Error: Can't resolve 'material-tabs' in 'my-new-repo/src/app/slash'
ERROR in ./src/app/slash/slash.component.ngfactory.js
Module not found: Error: Can't resolve 'material-tabs' in 'my-new-repo/src/app/slash'

Desired behavior

ng build --prod should work.

Mention any other details that might be useful (optional)

My previous hack solution was to --aot false.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 7
Comments: 15 (1 by maintainers)

Most upvoted comments

Hi,

I fixed the issue with the package.json name attribute in my lib. I wanted to use the library like this:

folder-structure:
| - node_modules
    | - @mylib
        | -  components
        | -  etc

Import Statement in e.g. app.module.ts:
import { ExampleModule } from '@mylib/components';

The problem was that by generating ng g library mylib-components the package.json was named "name": "mylib-components" due to the library-structure

| - projects
    | - mylib-components
        | - src

Then it couldn’t generate the mylib-component.ngfactory.js because it couldn’t resolve the path as shown in the folder-structure @mylib/components. To solve the problem I changed the name in the package.json file to "name": "@mylib/components". And in the generated metadata.json file the "importAs: @mylib/components" is now correct instead of "importAs: mylib-components". Now the production build works with the library.

Hope it helps.

olilutz on Jun 11, 2018

For me, it seems that removing the rootDir property of tsconfig.app.json solved the issue.

See this commit for more info: https://github.com/Chan4077/ngx-ytd-api/commit/5b1970cb090fc097e6bf748981d5c650958155ad

EdricChan03 on Jun 4, 2018

@alan-agius4 Hi,

Still I’m facing this issue in one of my library. @ngu/carousel beta version. Don’t know how to solve this issue

Git repo here

sheikalthaf on Aug 10, 2018