angular - NG6 : library-provided service is undefined

标签 angular typescript angular6 angular-cli-v6

我正在寻求帮助/指导/指导来调试/理解派生类的问题,该派生类扩展了 Angular 6 项目中库提供的服务。

我正在尝试将现有的 Angular 5.x 项目移动到 Angular 6 项目中 angular.json 的新工作区格式。

我现有的项目由一个 Angular 应用程序和一个单独的共享 NgModule 组成,后者提供服务和其他功能。共享模块将在多个应用程序中使用,结构如下:

project-root/
    library/
    main-app/
    other-app/

在我现有的 NG5 代码中,共享库作为 TS 源文件被npm link'ed 到主应用程序中(尽管 CLI 团队明确不推荐,这对我团队的工作流程很有效).

在 NG6 应用程序中,libraryangular.json 中的一个库项目,如此构建,并通过 tsconfig 中的路径定义拉入项目。 json.工作区是标准的 NG6 布局:

workspace-root/
    dist/...
    node_modules/...
    projects/
        library/
            src/lib/...
        main-app/
            src/app/...
        other-app/
    ...

在大多数情况下,库中提供的服务按原样使用,但可以在主应用程序(或其他应用程序)中扩展以提供特定于应用程序的功能。这在 Angular 5 中工作正常,但在 Angular 6 中,当我尝试加载页面时(使用 ng serve 运行)我在控制台中收到以下错误:

对象原型(prototype)只能是一个 Object 或 null

警告发生在这里:

export class FooService extends FooBaseService { // ...
--------------------------------^

当引导进程实例化 FooService 时,FooBaseService 将作为“未定义”进入。

根据研究,此错误通常与循环依赖问题有关,但我不认为这是正在发生的事情。我在构建库时没有收到任何 circ-dep 警告,也没有在构建主应用程序时收到任何问题。此外,运行 madge -c (link)dist/librarydist/main-app 中都没有找到任何 circ-deps。

我对如何继续调试这个问题有点困惑。任何对 Angular 6 如何处理模块提供的服务有更深入了解的人都可以为我指明正确的方向吗?

最佳答案

我猜你的 FooBarService 位于图书馆内。
使用 ng6 提供的新工作区结构,需要在使用之前构建库。您应该“ng build --prod”(prod 因为 AOT)库,然后将其作为库直接导入,而不是从其源代码导入。例如:从“foobar-service-library”导入 FooBarService

您可以在这里阅读更多相关信息:https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5

关于angular - NG6 : library-provided service is undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50365921/

相关文章:

javascript - 如何在 Angular2 中使用 Cookie 服务?

javascript - angular2 - 将 json 文件内容放入我的类属性中

javascript - Typescript 中的泛型 - 未定义的 T

angular - Angular 6 中 jquery 的 $.each 的替代品

angular - 如何订阅响应式(Reactive) FormGroup 并映射值变化( Angular 6)

angular - 我从 GET 方法收到的数据没有在 html 页面上更新

node.js - 从 TypeScript 初始化 Firebase Admin SDK 失败

javascript - 解析字符串以提取JSON数组

Angular - Google map API - 未捕获的 ReferenceError : google is not defined - only sometimes?

angular - 进入生产模式 Angular 4 时,类型 {} 上不存在属性 'address'