是否可以不使用npm导入Angular库?

时间:2019-08-12 20:59:24

标签: angular

我有管理层的要求,我们有一个Angular应用程序,我们正在尝试在一个单独的项目中构建一个新应用程序,但我们希望将其集成到主应用程序中。 目标是拥有一个独立的新应用程序,该应用程序可以与主应用程序独立开发和部署。

我考虑过创建一个库项目的选项,以便我们可以导入到主应用程序中,并且如果想使用npm软件包分发应用程序库也可以使用,但是这不允许我们独立部署新应用程序无需部署主应用程序。

有没有办法以我可以执行的任何方式将单独的应用程序(角度)导入主应用程序(角度)。

我试图在库的dist文件夹中部署到Github,然后将其导入angular-cli.json中的脚本中,但是没有用。

任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

有几个选项,但是没有“完美”的选择,因为您必须确切地确定要使用的路线,等等,看看是否可行。例如,如果您想要SPA,则两个应用程序都将尝试处理“ /”。

我将假设一个示例,尽管您在文档中有一个主应用程序,例如Tour of Heroes应用程序,但是您想添加一个Wiki应用程序。根据您的规范,我假设您希望Wiki应用在主应用中运行时位于/wiki下,并且在/下运行。例如,当Wiki独立运行时,主应用程序中的主应用程序/wiki/pages/tutorial将与/pages/tutorial相同。

选项1:完全分离应用程序,在主应用程序中使用编译的Wiki

我认为这就是您想要做的。这些应用程序将不会共享任何服务或组件,并且会分别进行编译。我能想到的唯一方法是将它们编译成单独的应用程序,并将其中一个托管在另一个应用程序的子文件夹中。您的服务器无法重写所有URL,但是根据哪种类型,您应该能够将/wiki路由到第二个应用程序。您将必须在SPA中捕获指向“ / wiki”的所有链接,并强制重新加载整个页面,以便浏览器选择Wiki的index.html。可能还有一些问题需要克服,但它应该可以正常工作。

选项2:在一个仓库中分离应用

This page对此做了很好的概述。 Angular的最后几个版本使您可以在同一文件夹中创建单独的模块和应用程序。无耻地复制:

App1模块

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

App1SharedModule

export class App1SharedModule{
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AppModule,
      providers: []
    }
  }
}

组合应用

imports: [
  BrowserModule,
  AppRoutingModule,
  App1SharedModule.forRoot(),
  App2SharedModule.forRoot()
],

每个人都可以单独运行,但也可以一起运行。不过,您的路由可能会受阻,因此您必须为两个应用程序创建一个子路由,这些应用程序可以单独运行,也可以与相同的URL一起运行。即即使单独运行,第一个应用程序中的所有内容都将位于app1/下。

选项3:库

您可以使用Wiki服务和组件创建a library。然后,您可以将npm将其安装到您的主应用程序和骨架应用程序中,以使Wiki自行运行。您可以公开Routes对象,并在主应用程序中使用forChild,在Wiki应用程序中使用forRoot

答案 1 :(得分:0)

如果其他人不知道如何执行此操作,在这种情况下,我可以使用Github Tag解决该问题。

我跑步了:npm install github:org/lib