Wsrtjtyk

This should be a very trivial thing, because I don't find any reference about this or I don't know where and how to look for it. Let's say I have a scoped library core

@myscope/core

Now in this library I have a folder auth for authentication workflow.

When I want to use library in my App I import it using this:

import {AuthService} from @myscope/core

What I want to achieve, is to create a sub-library so I can use like that:

import {AuthService} from @myscope/core/auth

I know this is possible by creating a new path in the tsconfig, but I don't see that as a good resolution, because once I create a package out of this library, this path won't be delivered.

What is the best way to go?

Good question. With Angular 6, I tried these commands:

ng new sublibs

cd sublibs

ng generate library @myscope/core

ng generate library @myscope/core/auth

Project name "@myscope/core/auth" is invalid.

As you can see, it didn't work. But I didn't give up. I opened VS Code and copied sublibs/projects/myscope/core and pasted it inside itself then renamed sublibs/projects/myscope/core/core to sublibs/projects/myscope/core/auth. Then I went through all of the files in sublibs/projects/myscope/core/auth and modified the paths and names everywhere. This was mostly adding /auth or another ../ where appropriate. Then I renamed all of the files in sublibs/projects/myscope/core/auth/src/lib and changed the class names that start with Core so that they start with Auth. I didn't forget to change the package.json in sublibs/projects/myscope/core/auth and to add core/auth in angular.json by copying and pasting core and modifying it. After I was satisfied everything was renamed and changed appropriately, I entered the command:

ng build @myscope/auth

Here is the output:

Robert@ROBERT-PC MINGW64 /d/Users/Robert/robertbrower.technologies/customers/robertbrower.technologies/sublibs

$ ng build @myscope/core

Building Angular Package

Building entry point '@myscope/core'

Compiling TypeScript sources through ngc

Bundling to FESM2015

Bundling to FESM5

Bundling to UMD

Minifying UMD bundle

Copying declaration files

Writing package metadata

Removing scripts section in package.json as it's considered a potential security vulnerability.

Built @myscope/core

Building entry point '@myscope/core/auth'

Compiling TypeScript sources through ngc

Bundling to FESM2015

Bundling to FESM5

Bundling to UMD

Minifying UMD bundle

Copying declaration files

Writing package metadata

Removing scripts section in package.json as it's considered a potential security vulnerability.

Built @myscope/core/auth

Built Angular Package!

 - from: D:UsersRobertrobertbrower.technologiescustomersrobertbrower.technologiessublibsprojectsmyscopecore

 - to:   D:UsersRobertrobertbrower.technologiescustomersrobertbrower.technologiessublibsdistmyscopecore



Robert@ROBERT-PC MINGW64 /d/Users/Robert/robertbrower.technologies/customers/robertbrower.technologies/sublibs

$

Then I was able to enter this command:

ng generate application my-app

After that I was able to modify my-app's app.module like this:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';



import { AppComponent } from './app.component';



import { CoreModule } from '@myscope/core';

import { AuthModule } from '@myscope/core/auth';



@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    CoreModule,

    AuthModule

  ],

  providers: ,

  bootstrap: [AppComponent]

})

export class AppModule { }

Then I built my-app:

ng build my-app

And I received this output:

Robert@ROBERT-PC MINGW64 /d/Users/Robert/robertbrower.technologies/customers/robertbrower.technologies/sublibs

$ ng build my-app



Date: 2018-11-22T22:43:33.834Z

Hash: b686631b6cb537b9519c

Time: 10255ms

chunk {main} main.js, main.js.map (main) 20.2 kB [initial] [rendered]

chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 249 kB [initial] [rendered]

chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]

chunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]

chunk {vendor} vendor.js, vendor.js.map (vendor) 3.01 MB [initial] [rendered]



Robert@ROBERT-PC MINGW64 /d/Users/Robert/robertbrower.technologies/customers/robertbrower.technologies/sublibs

$

So while I do not know how to use the Angular CLI to achieve this, I was able to do it manually.

See the repo: https://github.com/robertbrower-technologies/sublibs