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.tsimport { 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.