ng build cannot find module

Question

I am trying to locally test 3 node modules by updating the locations they are being pulled from in their package.json files. The modules are sdk, ng-widget-lib, and frontend. ng-widget-lib depends on sdk and frontend depends on ng-widget-lib. I build sdk locally with babel. I'm running verdaccio as a local npm registry.

I update ng-widget/package.json (the name of the repo/root directory is ng-widget not ng-widget-lib) changing the name to @locals/ng-widget-lib and point the sdk dependency to the local sdk directory. Then run npm install and build with ng build which runs successfully. I then change the name in dist/package.json to @locals/ng-widget-lib and publish to my local registry.

In frontend/package.json I point the ng-widget-lib dependency to @locals/ng-widget-lib (I have tried pointing it to the local directory and not using the local registry but this still doesn't work). I run npm install which downloads the module from my local registry to node_modules/@locals/ng-widget-lib and creates a package-lock.json with ng-widget-lib pointing to the local registry. Then when I run ng build --prod or ng build it fails in the files where I'm importing @locals/ng-widget-lib with error

error TS2307: Cannot find module '@locals/ng-widget-lib'.

I have deleted node_modules and run npm cache clean --force but still the same error. The ng-widget-lib and frontend use angular 8, sdk is typescript. I'm using npm 6.11.3

Here is my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

score 0 · Answer 1 · answered Dec 03 '19 at 16:57

0

Try with compiler option preserveSymlinks.

All local modules has to be used as preserveSymlinks in compiler options

"compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "preserveSymlinks": true

Read More: https://www.typescriptlang.org/docs/handbook/compiler-options.html

answered Dec 03 '19 at 16:57

xdeepakv

7,835
2
22
32

Didn't work, its actually downloading the module from http://localhost:4873/ into my `node_modules` directory so I don't think its using a sym link – gary69 Dec 03 '19 at 17:07
u didn't mentioned that. Once require start in start of the app, all caching done. you cant modify the require async. require is block and sync. In node js dynamic require is not possible, the only web u can do the dynamic import. using tools like webpack, system.js – xdeepakv Dec 03 '19 at 17:11

gary69 · Accepted Answer · 2019-12-10T00:17:14.517

I followed this https://stackoverflow.com/a/48150290/3614578 and was able to import the local module successfully. I put the ngPackage config directly in package.json, and I also didn't have to run npm pack. This is my config in package.json

"ngPackage": {
    "lib": {
        "entryFile": "./projects/ng-widget-lib/src/public_api.ts"
    },
    "whitelistedNonPeerDependencies": [
      "angular",
      "rxjs",
      "tslib",
      "zone.js"
    ]
  }

I was also able to get it to build after installing from my local registry. I followed this https://github.com/angular/angular-cli/wiki/stories-create-library. Basically there is a special command for building angular libraries that needs to be run ng generate library my-lib, and then you have to publish from your dist/<lib-name> folder, not your root folder.

score 0 · Answer 3 · answered Feb 07 '21 at 12:26

In my case, Adding one file index.ts as a sibling(next to) package.json worked like a charm.

Export everything from public_api.ts using index.ts only
Replace the entryFile location from public_api.ts to index.ts

Content inside index.ts as follows:

export * from './src/public_api.ts';

So the content would like for ng-packgr as follows:

"ngPackage": {
    "lib": {
        "entryFile": "index.ts"
    },
  }

ng build cannot find module

3 Answers3