在 Ionic 和 Angular 应用程序之间共享代码答案

【问题标题】：Sharing code between Ionic and Angular application在 Ionic 和 Angular 应用程序之间共享代码
【发布时间】：2019-01-29 10:10:40
【问题描述】：

我有一个项目，其中有多个 Angular 应用程序和一个离子应用程序。我有许多类（模型）以及可以在所有应用程序之间共享的服务。

我的第一个想法是将共享文件放到他们自己单独的目录/文件夹中并创建一个符号链接。我已尝试启动 ionic 应用程序，但收到以下信息：

模块构建失败：错误： /home/norman/Work/vem-shared/shared-services/table/table.service.ts TypeScript 编译中缺少。请确保它在您的 tsconfig 通过 'files' 或 'include' 属性。

在搜索此错误消息后，我遇到了following，但是，这是针对较低角度的版本（我使用的是 Angular 6 和 Ionic 4）。我还注意到一些关于符号链接在 angular cli 中不起作用的帖子——这似乎是针对旧版本的。

我想知道是否有人知道如何解决这个错误，以及符号链接是否在角度应用程序/离子应用程序中工作？

谢谢

【问题讨论】：

考虑到他们都使用的结构，我认为这几乎是不可能的。你能分享一些代码或@merlin你想分享什么样的模块。
不确定这是否是您可以接受的解决方案，但您是否考虑过使用 Nrwl Nx monorepo？
另外，您可以阅读这篇文章，了解 Angular7 Web 应用和 Ionic4 移动应用之间的共享（基于 Ngrx）逻辑medium.com/agorapulse-stories/…

标签： angular ionic-framework

【解决方案1】：

对于 Angular webapp，通过添加 "preserveSymlinks": true 到 angular.json 文件。

angular.json

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "my-project": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                       "outputPath": "target",
                       "index": "src/index.html",
                       "main": "src/main.ts",
                       "tsConfig": "src/tsconfig.app.json",
                       "polyfills": "src/showcase/polyfills.ts",
                       "preserveSymlinks": true,
...

现在，如果您想创建带有保留符号链接的库，那么您必须在 tsconfig.lib.json 中添加相同的功能，因为对于库您没有 angular.json

tsconfig.lib.json

"angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true,
    "preserveSymlinks": true   },

对于 IONIC 应用程序，符号链接问题是一个长期悬而未决的问题，似乎解决方案仍在公开 PR 中。您可以追踪progress here。

【讨论】：

【解决方案2】：

您可以使用可共享的服务/类创建 Angular 模块并将其放到 NPM 上。然后在所有应用程序上安装该模块并使用它。您可以更新模块并在所有应用程序代码库上保持更新。

【讨论】：

你也可以阅读这篇文章medium.com/agorapulse-stories/…
不需要在 NPM 上发布。您还可以在 package.json 中使用本地文件引用：“@yourapp/yourmodule”：“file:dist/yourapp/yourmodule”，请记住，在将其添加到 package.json 后，您需要运行 npm i .
使用 NPM 对版本控制和更新非常有帮助。是的，这当然是可能的@NicoTimmerman