Library and Angular CLI app in a monorepo (Module not found: import paths cannot be resolved) about ng-packagr HOT 15 CLOSED

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

from ng-packagr.

@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?

from ng-packagr.

Hi @mbouclas,

there is an issue with the paths mapping in the tsconfig. Builds started failing with angular cli 1.3.x - issue angular-cli#7341

You can try to use a symlink instead. Something like:

node_modules/@my/lib --symlink to--> dist/@my/lib

In another project, a workaround is to copy the dist folder to the src folder angular cli, i.e.:

src
 |- app
 |- @my
     |- lib
 |- tsconfig.app.json (paths mapping to "./@my/lib")

That somehow works w/ angular cli 1.3.2.

from ng-packagr.

got it, thanks.

from ng-packagr.

No, with the symlink you shuld remove paths from tsconfig. So either tsconfig or symlink. Do not use both in parallel (don't know what happens then...)

Is the symlink in the correct direction? I always happen to exchange source and target. It needs to be like this:

|- dist
    |- @my
        |- lib
            |- package.json
|- node_modules
   |- @my
       |- lib

Now, when you do cat node_modules/@my/lib/package.json the file from the dist folder should show up. I just want to make sure no silly mistakes are in place :)

Or:

$ ls -al node_modules/@my
lib --> ../../dist/@my/lib

So the command for ln would/should be something like:

ln -sf ../../dist/@my/lib node_modules/@my/lib

from ng-packagr.

Yes the symlink is correct and i do see the changes happen. Also, i have removed everything path related from tsconfig. The error produced suggests that it did find the package in node_modules, it just doesn't like the way it's formatted causes it complains for a missing annotation @NgModule

Is there a chance that it is loading the wrong file? Also. noticed that this message shows up when importing the module plain, if i try to import it like MyModule.forRoot() i get another error

vendor.bundle.js:29253 Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation.

from ng-packagr.

@mbouclas your solution worked for me as well after a failed attempt at running a yarn link or npm link. Thanks for the heads up on this.

from ng-packagr.

I'm getting the same type of error even not using "paths".
I'm trying to create a library from a module inside a regular angular-cli project.
I followed the guide here: https://medium.com/@ngl817/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e but I'm getting the error reported in this issue.
You can find my test in this github project: https://github.com/riccardomariani/odata-v4-ng.
Any suggestion to solve the problem?
Thanks a lot in advance

from ng-packagr.

Can you take a look at copying the dist artefacts and mapping paths to sources for a dev build

These solve the issues for TypeScript module resolution that came with angular/angular-cli#7341 - see angular/angular-cli#7341 (comment)

Regarding Unexpected value '[object Object]' imported ... Please add a @NgModule annotation., may have another cause. Please check and/or try to debug whether the import is properly resolved!

from ng-packagr.

Actually the problem was caused by how I was importing classes from the library.
Based on the generated library code, Visual Studio Code proposed
import { ODataModule } from 'odata-v4-ng/odata-v4-ng'; or
import { ODataModule } from 'odata-v4-ng/public_api';
instead of
import { ODataModule } from 'odata-v4-ng';
Changing the name of the file generated by ng-packagr from odata-v4-ng.d.ts to index.d.ts solved the problem and now Visual Studio Code is proposing the right import.
So my question is: is this a misconfiguration of ng_packagr in my library? or is this the expected behavior?

from ng-packagr.

I changed ng-package.json config file adding: "flatModuleFile": "index"
and this solved the problem.

{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "lib": {
        "entryFile": "public_api.ts",
        "flatModuleFile": "index"
    }
}

from ng-packagr.

Question

How can I work with a library and an Angular CLI app in the same Git repository?

Motivation: use ng-packagr and ng in the same repo. Build the library to a dist folder in the repository. Then ng build an Angular CLI app that imports the library from the dist folder. In TypeScript code:

import { whatever } from 'my-lib';
// The above import should be resolved from `dist` folder in the source code repository

Answer

There are several ways to work with a library (and it's dist artefacts) and Angular ng CLI in the same repo:

• copying dist artefacts: demonstrated by build:app in ng-packaged demo
• using tsconfig paths mapping: demonstrated by build:dev in ng-packaged demo
• symlink the dist folder (also yarn link for creating/managing the symlink), as in the in the consumer integration test.

from ng-packagr.

@dherges I have tried all of these options, but the slight difference is that I intend on ultimately publishing my updated library to npm, so I'm trying to use npm link to replace the version in node_modules, and I do not want it to be a monorepo with the library in src.

My error is very similar to OP of this issue, but I have tried copying the dist artifacts (from my separate library project) to node_modules with no path mapping, and I've also tried the tsconfig path mapping approach with npm link and ng build --aot with --preserve-symlinks. They all seem to produce the same error, but only with AoT builds. As others have stated, ng serve works fine.

Thanks for your help and developing this project!

from ng-packagr.

This may be relevant angular/angular-cli#4874

from ng-packagr.

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

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

from ng-packagr.