Angular CLI - new application with separate angular library

0
votes

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:

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.

1
angularangular-cli
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

1 Answers

1
votes

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:

  1. 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/*"
      ]
    }
  }
}