Question

我正在尝试为Javascript库构建Angular包装器，但出现“未找到模块”错误。 Javascript库正在开发中，尚未发布到NPM，因此我正在使用npm-link，这可能会引起问题，但我不确定。我的Angular版本是8.2.2。

JavaScript源库

sourcelib / index.js：

var sourcelib = (function () {
    var doSomething = function() {
    };
    return {
        doSomething: doSomething
    };
})();
export default sourcelib;

sourcelib 目录还包含 package.json 和 README.md 文件。如您所愿，创建了一个npm-link：

cd sourcelib
npm link

角度包装器

以下是我正在执行的用于创建Angular工作区，库和测试应用程序的Angular CLI命令：

ng new app-test --create-application=false
cd app-test
ng generate library testlib
ng generate application testlib-app

现在将 testlib 链接到Javascript库：

cd projects/testlib
npm link sourcelib

在 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';

现在构建 sourcelib ：

ng build

这是控制台输出：

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

并创建到 sourcelib 的npm链接：

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

角度测试应用

将 testlib-app 链接到 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.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 {
}

投放应用：

ng serve

结果

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.

我花了很多时间进行故障排除，但未能找到解决方案。任何帮助将不胜感激。

Answer 1

Angular有时在使用链接模块进行构建时会遇到问题。通常，可以通过在angular.json下的projects.yourProject.architect.build.options中添加{ "projects": { "yourProject": { "architect": { "build": { "options": { "preserveSymlinks": true } } } } } }来解决此问题。例如：

CREATE TABLE public.the_table
(
  id integer NOT NULL DEFAULT nextval('the_table_id_seq'::regclass),
  report_timestamp timestamp without time zone NOT NULL,
  value_id integer NOT NULL,
  text_value character varying(255),
  numeric_value double precision,
  bool_value boolean,
  dt_value timestamp with time zone,
  exported boolean NOT NULL DEFAULT false,
  CONSTRAINT the_table_fkey_valdef FOREIGN KEY (value_id)
      REFERENCES public.value_defs (value_id) MATCH SIMPLE
      ON UPDATE NO ACTION ON DELETE RESTRICT
)
WITH (
  OIDS=FALSE
);
ALTER TABLE public.the_table
  OWNER TO postgres;

Answer 2

请检查要main的软件包的package.json中的 npm link 参数。如果此类参数定位到不存在的文件夹，则导入将失败

如何使用npm链接修复Angular库中的“找不到模块”错误？

2 个答案: