DEV Community

Justin J
Justin J

Posted on

Create An Angular Library And Consume it locally (with debugging)

Angular project calling a library project. To View the code, here's the github repo.

This tutorial will detail how to:

  • Create an angular library
  • Create a component in that library
  • Export that component for use in an application
  • Create an angular application
  • Import the local component library
  • Access debugging for the library from the main application.

This tutorial assumes a basic understanding of Angular/ web development and using the command prompt.

If there is just a code snippet, that assumes you are in the console.

Creating the shared library

  1. Create a folder called 'AngularTutorial', then a folder in that called 'code' somewhere on your file system.

  2. cd to the starting folder code. e.g. cd C:/AngularTutorial/code

  3. ng new ngx-my-shared-libs --create-application=false

  4. cd ngx-my-shared-libs

  5. ng generate library my-shared-components

  6. cd projects\my-shared-components\src\lib (full path {repo}\code\ngx-my-shared-libs\projects\my-shared-components\src\lib)

  7. ng g c TestView (creates new component called TestView)

  8. Find public-api.ts under code\ngx-my-shared-libs\projects\my-shared-components\src\lib

  9. Add a line for the new component (see final line of example below), so the file now looks like the following

 * Public API Surface of my-shared-components

export * from './lib/my-shared-components.service';
export * from './lib/my-shared-components.component';
export * from './lib/my-shared-components.module';

export * from './lib/test-view/test-view.component';

Enter fullscreen mode Exit fullscreen mode

[10]. Export the view component in the module (code\ngx-my-shared-libs\projects\my-shared-components\src\lib\my-shared-components.component.ts):

import { NgModule } from '@angular/core';
import { MySharedComponentsComponent } from './my-shared-components.component';
import { TestViewComponent } from './test-view/test-view.component';

  declarations: [
  imports: [
  exports: [
    TestViewComponent /* NEW! */
export class MySharedComponentsModule { }

Enter fullscreen mode Exit fullscreen mode

[11]. Open command prompt at code\ngx-my-shared-libs and run ng build --watch.

Importing Into The Angular Project

  1. In a new command prompt, cd back to the top level i.e. {repo}/code.

  2. create a new sample app using ng new ngx-sample-app --skip-tests . Answer the init questions as you wish (I said yes to routing, then CSS for style).

  3. cd ngx-sample-app

  4. now we need to reference the local library using npm install with a local link. Remember to link to the dist folder.

npm install "file://../ngx-my-shared-libs//dist//my-shared-components"

[5]. Import the component into your application module (code\ngx-sample-app\src\app\app.module.ts)

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MySharedComponentsModule } from 'my-shared-components';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Enter fullscreen mode Exit fullscreen mode

[6]. Open up code\ngx-sample-app\src\app\app.component.html

Delete the default contents and update like so:

App Component

Enter fullscreen mode Exit fullscreen mode

[7]. Go to the angular.json in ngx-sample-app (code\ngx-sample-app\angular.json) and add preserveSymLinks to the biuld options

Sample below shortened for brevity.

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "preserveSymlinks": true,
            "outputPath": "dist/ngx-sample-app",
            "index": "src/index.html",
            "main": "src/main.ts",

Enter fullscreen mode Exit fullscreen mode

[8]. To this point, we can actually build everything, but we can't actually debug those libraries, so let's go ahead and fix that. In angular.json (code\ngx-sample-app\angular.json), update serve to include options for debugging libs too.

Again, shortened for brevity - starting at line 89 in my sample $projects.ngx-sample-app.architect.serve:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true

Enter fullscreen mode Exit fullscreen mode

[9]. In the command prompt for the app ({repo/code\ngx-sample-app>}) run ng serve.

[10]. Visit https://localhost:4200 to view the results.

[11]. In chrome, you can now press F12, then go to sources, Ctrl+P to search files and type 'test-view' to get to the test-view component.

Top comments (3)

pavangayakwad profile image

After importing the library in another angular project, I am getting the following error when ng served.

ERROR in ./dist/textbox/fesm2015/textbox.mjs 43:21-43
Can't import the named export 'ɵɵngDeclareNgModule' from non EcmaScript module (only default export is available)

chitgoks profile image

Just wondering, if i change code in the shared library component, will the application refresh?

aravind-menporiyalan profile image

Tested this case. It is working. When we made changes it is reflected in the UI with auto refresh
ng build --watch is the watching file changes in the library project