Angular shared package: Unexpected value '<ModuleName>' imported by the module 'AppModule'. Please add a @NgModule annotation

794 views Asked by At

I'm developing a new Angular (cli-based) application. In anticipation of future projects, I'm attempting to split out common domain-specific services into a shared package NgModule into a second app which is a filesystem peer to my main app, like this:

./my-company
    /main-app
    /shared
        /src/app/services
            index.js
            package.json
            shared-services.module.ts
            shared-test-service.ts

When I npm serve main-app, I get the error message:

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

I'm aware of the issues with npm link, so have - to the best of my abilities - set this up according to the Angular CLI Linked libraries story. (Hosting the shared package as a private NPM module is a possibility, but I've been asked to investigate other options first.)

I've seen numerous questions on this issue, both on SO and Gitub, and have tried various solutions suggested. I'm guessing I've missed some small detail, but I don't understand all the moving parts well enough yet to tell what it is. More eyes, please!

Here's what I've got:

Shared Module

package.json
{
    "name": "tt-shared-services-module",
    "version": "1.0.0",
    "description": "Description...",
    "main": "index.js",
    "scripts": { /* ... */ },
    "author": "Fnord",
    "license": "MIT",
    // per recommendation from 'Linked libraries' story
    "devDependencies": {
        "@angular/core": "4.3.5"
    },
    "peerDependencies": {
        "@angular/core": "4.3.5"
    }
}
shared-services.module.ts
import { NgModule } from '@angular/core';
import { SharedTestService } from './shared-test.service';

@NgModule({
    providers: [SharedTestService]
})
export class SharedServicesModule {}
shared-test.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class SharedTestService {
    constructor() { }
    message = 'Greetings from SharedTestService!';
}
index.js
export * from './shared-services.module';

Main App

app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { SharedServicesModule } from 'tt-shared-services-module';

import { AppComponent } from './app.component';
// ... app-specific components / services

@NgModule({
    declarations: [
        AppComponent,
        // ... app-specific components 
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        SharedServicesModule
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }
tsconfig.app.json
{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "baseUrl": "./",
        "module": "es2015",
        "types": [],
        // per recommendation from 'Linked libraries' story
        "paths": {
            "@angular/*": [
                "node_modules/@angular/*"
            ]
        }
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

Any assistance, pointers, clue-by-fours greatly appreciated.

0

There are 0 answers