Library and Angular CLI app in a monorepo (Module not found: import paths cannot be resolved)

Type of Issue

• Bug Report
• Feature Request

Description

After trying it on a dead simple app and failed, i cloned the example repo, ng-packaged, and got the same exact error. It builds without a problem, but the moment you try to import the lib to the app you get the error

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@my/lib' in 'D:\Work\testing\Angular2\ng-packaged\src\app'
resolve '@my/lib' in 'D:\Work\testing\Angular2\ng-packaged\src\app'
  Parsed request is a module
  using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src/app)
    resolve as module
      D:\Work\testing\Angular2\ng-packaged\src\app\node_modules doesn't exist or is not a directory
      D:\Work\testing\Angular2\ng-packaged\src\node_modules doesn't exist or is not a directory
      D:\Work\testing\Angular2\node_modules doesn't exist or is not a directory
      D:\Work\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Work\testing\Angular2\ng-packaged\node_modules
        using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules)
          using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules/@my/lib)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib.js doesn't exist
            as directory
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib doesn't exist
      looking for modules in D:\Work\testing\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          D:\Work\testing\node_modules\@my\lib doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          D:\Work\testing\node_modules\@my\lib.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          D:\Work\testing\node_modules\@my\lib.js doesn't exist
        as directory
          D:\Work\testing\node_modules\@my\lib doesn't exist
      looking for modules in D:\Work\testing\Angular2\ng-packaged\node_modules
        using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules)
          using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./node_modules/@my/lib)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib.js doesn't exist
            as directory
              D:\Work\testing\Angular2\ng-packaged\node_modules\@my\lib doesn't exist
      looking for modules in D:\Work\testing\Angular2\ng-packaged\src
        using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src)
          using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src/@my/lib)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib.js doesn't exist
            as directory
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib doesn't exist
      looking for modules in D:\Work\testing\Angular2\ng-packaged\src
        using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src)
          using description file: D:\Work\testing\Angular2\ng-packaged\package.json (relative path: ./src/@my/lib)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib.js doesn't exist
            as directory
              D:\Work\testing\Angular2\ng-packaged\src\@my\lib doesn't exist

The angular app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MyLibModule } from '@my/lib';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MyLibModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "angularCompilerOptions": {
    "paths": {
      "@my/lib": [ "../dist/my-lib" ]
    }
  },
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "paths": {
      "@my/lib": [ "../dist/my-lib" ]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

main tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "@my/lib": [ "dist/my-lib" ]
    }
  },
  "exclude": [
    ".ng_build"
  ]
}

How To Reproduce

$ yarn install $ yarn build:lib $ ng serve

Version Information

ng-packagr: v1.0.1
node: v8.1.2
@angular: v4.3.2
rxjs:
zone.js:

[mbouclas]

For anyone with a similar issue, my way of solving this was not to symlink (tested on windows only using both soft and hard links). For some reason this just won’t work. What does work though is copying the dist output to your node_modules folder.

I ended up using a chokidar watcher which builds the package and then copies the dist to node_modules.

@dherges thanks for your time

[mbouclas]

@dherges when creating the symlink to node_modules it does seem to import it, but it produces the following error

Uncaught Error: Unexpected value 'MyModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

Sure enough the exported module looks like this

export declare const COMPONENTS: any[];

export declare class MyModule {
    constructor();
    static forRoot(): {
        ngModule: typeof MyModule ;
        providers: any[];
    };
}

So, using the symlink trick, do we still have to add something to the app tsconfig or am i missing something?