is It possible to import an Angular library without use npm?

Question

I have this request from management, we have an Angular application and we are trying to build a new application in a separate project but we would like to have it integrated into the main app. The goal is to have a separate new application that can be developed and deployed independently from the main application.

I thought about the option of creating a library project so we can imported into the main app, and that works if wanted to use npm packages to distribute the app library, but that doesn't allow us to independently deploy the new app without having to deploy the main application.

Is there any way to have a separate app (angular) imported into the main app (angular too) in any way that I could do this.

I tried to make a deployment to Github of the dist folder of the library and import it into the script in the angular-cli.json but it didn't work.

Any help will be appreciated.

Answer 1

There are a couple options, nothing 'perfect' though as you would have to figure out exactly what routes, etc you want to use and see if that is possible. For instance if you want an SPA, then both apps will be trying to handle '/'.

I'm going to assume an example though where you have a main app like the Tour of Heroes app in the docs, but you want to add a Wiki app. For your specifications I'll assume you want the wiki app to live under /wiki when running inside the main app and under / on it's own. For example the main app /wiki/pages/tutorial in the main app will run the same as /pages/tutorial when the wiki is running on its own.

Option 1: Separate apps completely, use compiled wiki in main app

I think this is what you were trying to do. The apps will not share any services or components and be compiled separately. The only way I can think of to do this is compile them into separate apps and host one in a sub-folder of the other. Your server cannot re-write all urls, but depending on what type you should be able to route /wiki to your second app. You will have to trap any links to '/wiki' in your SPA and force a full page reload so the browser picks up the wiki's index.html. There might be some issues to conquer with the base href also, but it should work.

Option 2: Separate apps in one repo

This page has a good overview of doing this. The last few version of Angular let you create separate modules and apps in the same folder. Shamelessly copying:

App1 module

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

App1SharedModule

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

Combined App

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

Each one will run separately on their own, but they would also run together. Your routing might be hamstrung though so that you have to create a sub-route for both apps that they would run in on their own and when together with the same urls. Ie everything in the first app would be under app1/ even when running solo.

Option 3: Library

You can create a library with your wiki services and components. You could then npm install it into both your main app and a skeleton app for the wiki to run on it's own. You could expose the Routes object and use forChild in your main app and forRoot in your wiki app.

Answer 2

If anyone else have wonder how to do this, in this case I solved the issue using Github Tag.

I runned: npm install github:org/lib