Angular CLI - new application with separate angular library

Question

I'm trying to create a reusable library of components, mostly as an exercise to become familiar with the angular world. I've written a small standalone angular app for a legacy application, so I'm decidedly new to Angular, but I thought I understood the configuration well enough to do this. Apparently I'm missing something still.

I have two pieces:

an Angular Library generated with yo angular2-library.
an Angular CLI application generated with ng new <library-name>.

These are both CLEAN (no changes after running the respective generators).

In the LIBRARY, I ran:

npm run build to create the /dist directory with the sample module/component/etc
cd dist && npm link to link npm to the library as described here in the generator documentation

In the Angular CLI application, I ran:

npm link --save <library-name>
added import {SampleModule} from 'library-name' to app.module.ts
added SampleModule.forRoot() to the imports array in app.module.ts so it looks like [BrowserModule, SampleModule.forRoot()]
Added the <sample-component></sample-component> to the app.component.html template
ng serve -o to compile and run.

I get an error in Chrome Dev Tools console:

Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation.

Changing the imports array to [BrowserModule, SampleModule], I get:

Uncaught Error: Unexpected value 'SampleModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

Not sure where to go from here.

take a look here github.com/filipesilva/angular-quickstart-lib , this is most likely going to be the base structure for an angular-cli version for library creation — Jota.Toledo
– Jota.Toledo, Commented Jun 28, 2017 at 21:19

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

OK, while writing this question, I realized I missed a small, but crucial step.

Rather than discard the whole question, I figured I'd leave it here in hopes someone else who did the same thing as me and not read carefully might benefit, as the errors reported don't really describe the core issue.

What is currently step 12 of the `angular2-library` yo generator:

If you are using an Angular CLI application to consume your library, make sure to set up a path mapping in /src/tsconfig.app.json of your consuming application (not your library):

{
  "compilerOptions": {
    // ...
    // Note: these paths are relative to `baseUrl` path.
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  }
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 28, 2017 at 15:28

BLSully

5,9291 gold badge29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

Yea this works... I ran into the same issue. Thanks for posting your answer.

Collectives™ on Stack Overflow

Angular CLI - new application with separate angular library

1 Answer 1

What is currently step 12 of the `angular2-library` yo generator:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

What is currently step 12 of the angular2-library yo generator:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

What is currently step 12 of the `angular2-library` yo generator: