3

我正在开发一个新的 Angular（基于 cli）应用程序。在对未来项目的预期中，我试图将公共特定领域的服务拆分为一个共享包NgModule到第二个应用程序中，该应用程序是我的主应用程序的文件系统对等，如下所示：

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

当我npm serve主应用程序时，我收到错误消息：

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

我知道 的问题npm link，所以必须 - 尽我所能 - 根据Angular CLI 链接库的故事进行设置。（将共享包托管为私有 NPM 模块是可能的，但我被要求先调查其他选项。）

我已经在 SO 和 Gitub 上看到了很多关于这个问题的问题，并尝试了各种建议的解决方案。我猜我错过了一些小细节，但我对所有活动部件的理解还不够好，无法分辨出它是什么。请多看几眼！

这是我所拥有的：

共享模块

包.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"
    }
}
共享服务.module.ts 
import { NgModule } from '@angular/core';
import { SharedTestService } from './shared-test.service';

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

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

主应用

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"
    ]
}

非常感谢任何帮助、指点、线索。

4

0 回答 0