I'm currently working on creating an Angular wrapper for a Javascript library, but I've encountered a "Module not found" error. The Javascript library is still in development and has not been published to NPM yet. To work around this issue, I have opted to use npm-link, although this might be the source of the problem. My current Angular version is 8.2.2.
Javascript Source Library
sourcelib/index.js:
var sourcelib = (function () {
var doSomething = function() {
};
return {
doSomething: doSomething
};
})();
export default sourcelib;
The sourcelib directory includes files such as package.json and README.md. To create an npm-link, I used the following commands:
cd sourcelib
npm link
Angular Wrapper
Below are the steps I followed using Angular CLI to set up the Angular workspace, library, and test application:
ng new app-test --create-application=false
cd app-test
ng generate library testlib
ng generate application testlib-app
To link testlib with the Javascript library, I did the following:
cd projects/testlib
npm link sourcelib
I then proceeded to generate a module and component within testlib:
cd src/lib
ng generate module test
ng generate component test/testcomp
testcomp.component.ts:
import { Component, OnInit } from '@angular/core';
import sourcelib from 'sourcelib';
@Component({
selector: 'testcomp',
template: '<div></div>'
})
export class TestcompComponent implements OnInit {
constructor() { }
ngOnInit() {
sourcelib.doSomething();
}
}
public-api.ts:
export * from './lib/test/test.module';
export * from './lib/test/testcomp/testcomp.component';
Next, I built the sourcelib:
ng build
This led to the following console output:
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'testlib'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
WARNING: No name was provided for external module 'sourcelib' in output.globals – guessing 'sourcelib'
Minifying UMD bundle
Copying declaration files
Writing package metadata
Built testlib
------------------------------------------------------------------------------
Built Angular Package!
- from: /Users/.../app-test/projects/testlib
- to: /Users/.../app-test/dist/testlib
------------------------------------------------------------------------------
Afterwards, I created an npm-link to sourcelib:
cd ../../dist/testlib
npm link
Angular Test App
I linked testlib-app with testlib by running the command below:
cd ../../projects/testlib-app
npm link testlib
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestcompComponent } from 'testlib';
@NgModule({
declarations: [
AppComponent, TestcompComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts:
import { Component } from '@angular/core';
import { TestcompComponent } from 'testlib';
@Component({
selector: 'app-root',
template: '<testcomp></testcomp>'
})
export class AppComponent {
}
To serve the app, I initiated the command:
ng serve
Result
ERROR in /Users/.../app-test/dist/testlib/fesm2015/testlib.js
Module not found: Error: Can't resolve 'sourcelib' in '/Users/.../app-test/dist/testlib/fesm2015'
ℹ ｢wdm｣: Failed to compile.
I have tried troubleshooting this issue extensively but haven't had any luck finding a solution. Any assistance would be greatly appreciated.