3

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.

Stuart Updegrave
  • 687
  • 5
  • 25
  • 1
    `SharedTestService` is a service why do you need to create a module for that , just put in in app.module `providers` – Rahul Singh Aug 30 '17 at 09:08
  • @RahulSingh : I'll quote my first paragraph: "In anticipation of future projects, I'm attempting to split out common domain-specific services into a shared package..." My intention is for these services to be implemented as abstract classes, so that only truly common functionality will be there, and consuming apps will provide concrete implementations. – Stuart Updegrave Aug 30 '17 at 12:53
  • @RahulSingh Besides, telling me something I already know - which has nothing at all to do with my clear and detailed question - is in no way helpful. – Stuart Updegrave Aug 30 '17 at 12:55
  • there is nothing called as true modules in anagular, everything boils down to the app module when you compile you can keep this service sepearted in the app module and create other services for diverse tasks – Rahul Singh Aug 30 '17 at 12:55
  • 1
    That's simply wrong. https://angular.io/guide/ngmodule Repeatedly telling me "just put it in app.module" leads me to believe that you don't understand the problem I'm trying to solve. – Stuart Updegrave Aug 30 '17 at 12:58
  • i might be wrong but this is what i have come to know so far , i will try and check but i dnt think putting it in shared module is a good idea – Rahul Singh Aug 30 '17 at 12:59

0 Answers0