angular中的进口class未定义

Question

我有一个 npm 项目，其结构如下：

app-dep
├── dist
│   ├── bundle.js
│   └── bundle.js.map
├── node_modules/
├── package.json
├── package-lock.json
├── src
│   ├── base-component.ts
│   ├── factory.ts
│   ├── app.ts
│   └── modules/
├── tsconfig.json
└── webpack.config.js

我的 app.ts 代码有一个应用 class，它利用 src/ 中的 all.ts 文件

export default class App extends HTMLElement { //some-content }

我使用 webpack 在dist/文件夹中构建一个 bundle.js。

---

我有另一个app-dep项目，我使用

npm install --save ../app-dep

当我尝试在我的 angular 组件中使用它时：

import App from 'app-renderer/dist/bundle';

ngOnInit() {
    window.customElements.define('micro-app', App);
}

我收到此错误：

无法在“CustomElementRegistry”上执行“define”：参数 2 不是“Function”类型当我尝试在控制台上记录它时，我看到的只是未定义。

似乎我什至无法导入基本功能。

你能告诉我有什么问题吗？

Answer 1

我认为问题与导入或包装有关，我在下面详细说明了要遵循的步骤。

此外，请确保您正在导出所有要从外部提供的类。

对于 TypeScript 库

您可以简单地使用“tsc”，然后使用“npm pack”将生成的代码打包到 dist 文件夹中，并使用“npm install”将依赖项安装到您的应用程序中。

由于不同的模块系统和捆绑器，这可能会变得复杂，请查看此链接以获取有关 Webpack 的更多信息：

https://marcobotto.com/blog/compiling-and-bundling-typescript-libraries-with-webpack/

https://webpack.js.org/guides/author-libraries/

对于 CSS 库

“npm pack”必须在根文件夹中执行。 您可能希望在之前使用 sass 处理您的 styles，然后只打包结果。

对于 Angular 库

默认情况下，使用 Angular CLI 构建库项目时，代码会在 /dist/mylibrary 文件夹中生成。

如果您想在其他项目中使用该代码，步骤如下：

1. 使用“ng build mylibrary”构建您的库（添加 --prod 用于生产）。
2. 从您的库中，移动到 /dist/mylibrary 文件夹，然后执行“npm pack”，这将生成一个 tgz package。
3. 从要使用库的应用程序中执行“npm install”来安装依赖项。
4. 要从库中导入代码，请使用“import * from 'mylibrary'”

其他选项是使用“npm link”，它在你的 node_nodules 和库代码之间创建一个链接，如下所述：

https://www.willtaylor.blog/complete-guide-to-angular-libraries/

这将是 go 与本地库的方式，通常这些库发布到 Npm 存储库（公共或私有）并使用“npm install”远程安装。 这些步骤仅供本地使用。