Angular-cli: Module not found: Error: Can't resolve 'xxxx' in 'xxxx'

Created on 5 Jun 2018 · 3Comments · Source: angular/angular-cli

Versions

Angular CLI: 6.0.7
Node: 9.4.0
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/cli                      6.0.7
@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

Create a new angular application
$ng -new testMessage
Install ui-message. (ui-message is an Angular library using "ng generate library")
$npm i --save ui-message
Import "MessageModule" in "app.module.ts"

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {MessageModule} from 'ui-message/dist/message';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MessageModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Build binary with "--prod"
$ng build --prod
It reports following error:

ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'message' in '/Users/VinceZK/workspace/javascript/testMessage/src/app'

Observed behavior

If I run build without "--prod" option, it successes.

Desired behavior

It should build successfully with "--prod" option.

Mention any other details that might be useful (optional)

devkibuild-angular low broken bufix

Source

VinceZK

All 3 comments

I ran up against a similar issue today.. I'm not quite sure how this happened, as I've kind of been doing some fast and dirty PoCs... Upon digging into my environment more closely, I discovered that I had duplicated entries for my newly generated libraries in the root tsconfig.json paths...

Ex: Say I generated my-library, in paths, I had 2 new path key/values as expected, but within the path collection, the paths were duplicated like so:

"my-library": [
  "dist/my-library",
  "dist/my-library"
],
"my-library/*": [
  "dist/my-library/*",
  "dist/my-library/*"
]

In my case, I was able to get the main app building again by simply removing the first entry and comma in each collection like so:

"my-library": [
  "dist/my-library"
],
"my-library/*": [
  "dist/my-library/*"
]

Not quite sure how the duplicated entries got in there - I have only used the CLI for modifications and only recall running the generate library command once for this, but this was apparently the issue for me.

Sharing in case it helps.

mattezell on 19 Jun 2018

👍1

It looks like the root cause of the original issue is that the import statement is;

import {MessageModule} from 'ui-message/dist/message';

Instead of:

import {MessageModule} from 'ui-message';

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.