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';

[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';



@NgModule({
  declarations: [
    MySharedComponentsComponent,
    TestViewComponent
  ],
  imports: [
  ],
  exports: [
    MySharedComponentsComponent,
    TestViewComponent /* NEW! */
  ]
})
export class MySharedComponentsModule { }

[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';


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

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

Delete the default contents and update like so:

App Component

<lib-test-view></lib-test-view>

[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",

[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
            }
          },

[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.

Comments

[#/home/pavan]

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]

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

[Aravind]

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