return FALSE; $r = well_tag_thread__update(array('id' => $id), $update); return $r; } function well_tag_thread_find($tagid, $page, $pagesize) { $arr = well_tag_thread__find(array('tagid' => $tagid), array('id' => -1), $page, $pagesize); return $arr; } function well_tag_thread_find_by_tid($tid, $page, $pagesize) { $arr = well_tag_thread__find(array('tid' => $tid), array(), $page, $pagesize); return $arr; } ?>javascript - How to fix "Module not found" error in Angular library with npm link? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to fix "Module not found" error in Angular library with npm link? - Stack Overflow

    javascript - How to fix "Module not found" error in Angular library with npm link? - Stack Overflow

    programmeradmin3浏览0评论

    I'm trying to build an Angular wrapper for a Javascript library but I'm getting a "Module not found" error. The Javascript library is in development and not yet published to NPM, so I'm using npm-link which might be causing the problem, but I'm not sure. My 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 also contains package.json and README.md files. An npm-link is created as you would expect:

    cd sourcelib
npm link

    Angular wrapper

    Here are the Angular CLI mands I'm executing to create 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

    Now link testlib to the Javascript library:

    cd projects/testlib
npm link sourcelib

    Generate a module and ponent inside testlib:

    cd src/lib
ng generate module test
ng generate ponent test/testp

    testpponent.ts:

    import { Component, OnInit } from '@angular/core';
import sourcelib from 'sourcelib';

@Component({
    selector: 'testp',
    template: '<div></div>'
})
export class TestpComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        sourcelib.doSomething();
    }
}

    public-api.ts:

    export * from './lib/test/test.module';
export * from './lib/test/testp/testpponent';

    Now build sourcelib:

    ng build

    Here is the 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
------------------------------------------------------------------------------

    And create an npm-link to sourcelib:

    cd ../../dist/testlib
npm link

    Angular test app

    Link testlib-app to testlib:

    cd ../../projects/testlib-app
npm link testlib

    app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './appponent';
import { TestpComponent } from 'testlib';

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

    appponent.ts:

    import { Component } from '@angular/core';
import { TestpComponent } from 'testlib';

@Component({
    selector: 'app-root',
    template: '<testp></testp>'
})
export class AppComponent {
}

    Serve the app:

    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 pile.

    I've spent a lot of time troubleshooting this but have not been able to find a solution. Any help would be appreciated.

    I'm trying to build an Angular wrapper for a Javascript library but I'm getting a "Module not found" error. The Javascript library is in development and not yet published to NPM, so I'm using npm-link which might be causing the problem, but I'm not sure. My 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 also contains package.json and README.md files. An npm-link is created as you would expect:

    cd sourcelib
npm link

    Angular wrapper

    Here are the Angular CLI mands I'm executing to create 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

    Now link testlib to the Javascript library:

    cd projects/testlib
npm link sourcelib

    Generate a module and ponent inside testlib:

    cd src/lib
ng generate module test
ng generate ponent test/testp

    testp.ponent.ts:

    import { Component, OnInit } from '@angular/core';
import sourcelib from 'sourcelib';

@Component({
    selector: 'testp',
    template: '<div></div>'
})
export class TestpComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        sourcelib.doSomething();
    }
}

    public-api.ts:

    export * from './lib/test/test.module';
export * from './lib/test/testp/testp.ponent';

    Now build sourcelib:

    ng build

    Here is the 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
------------------------------------------------------------------------------

    And create an npm-link to sourcelib:

    cd ../../dist/testlib
npm link

    Angular test app

    Link testlib-app to testlib:

    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.ponent';
import { TestpComponent } from 'testlib';

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

    app.ponent.ts:

    import { Component } from '@angular/core';
import { TestpComponent } from 'testlib';

@Component({
    selector: 'app-root',
    template: '<testp></testp>'
})
export class AppComponent {
}

    Serve the app:

    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 pile.

    I've spent a lot of time troubleshooting this but have not been able to find a solution. Any help would be appreciated.

    • javascript
    • angular
    • typescript
    • npm
    • npm-link
    Share Improve this question asked Sep 5, 2019 at 13:02 ElliotElliot 4152 gold badges5 silver badges13 bronze badges
    Add a ment  | 

    1 Answer 1

    Reset to default 3

    Angular sometimes has problems building with linked modules. Usually this can be fixed by adding "preserveSymlinks": true to your angular.json under projects.yourProject.architect.build.options. For example:

    {
  "projects": {
    "yourProject": {
      "architect": {
        "build": {
          "options": {
            "preserveSymlinks": true
          }
        }
      }
    }
  }    
}

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论