CODEWITHSUNDEEP
angulartypescript
bbane
bbane

Reputation: 11

Local External Component Library in Angular 2/4/x and Typescript

I am trying to create a directory full of reusable Angular components and modules. In my case I set up a module named 'SharedComponentsModule', that exports all the components in this directory. 

import {SharedComponentsModule} from 'sharedLibrary/sharedcomponent.module';
...

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    FirstComponent,
    SecondComponent,
    ThirdComponent
  ],
  exports: [
    CommonModule,
    SecondComponent,
    ThirdComponent
  ],
  providers: [],
})
export class SharedComponentsModule {}

Since this directory will be shared between various angular applications, it will exist outside the application directory (i.e. C:\shared_tools). The shared module and all shared components will be in this directory. I tried to set up paths in the tsconfig.json to directly access this directory, but had no luck. Neither my IDE nor the angular application recognizes the reference. I have a feeling I may be misunderstanding how to set this up. How do I correctly reference an external directory. Thank you in advance.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "sharedLibrary": ["C:\\shared_tools\\*"]
   },

Upvotes: 0

Views: 358

Answers (1)

Tiberiu Popescu
Tiberiu Popescu

Reputation: 4524

Typescript doesn't support absolute paths.

You can use directly relative paths import shared from '../../../shared_tools' in each file.

Or use the paths as you suggested, but still with relative paths like : 

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "sharedLibrary": ["../../../shared_tools"]
   },

A common pattern is to publish the module to a private/local npm repository and then install it as a third party module from package.json in node_modules.

Upvotes: 1

Related Questions