Question

我有一个工作正常的应用程序几个月了，没有任何问题。我正在尝试将一些常用服务移至可以供其他应用程序使用的库中。

我正在尝试不使用Angular CLI（仅出于学习目的）进行此操作。我正在使用角度7.1.1

项目结构：

- site
    .gitlab-ci.yml
    - core-lib
        package.json
        tsconfig.json
        - src
            index.ts
            core
                my.service.js

    - ui-site
        package.json
        tsconfig.json
        - app
            app.modules.ts
            - table
                table.component.ts
                table.module.ts

core-lib> package.json

{
  "name": "core-lib",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "core-js": "^2.5.7",
    "lodash": "^4.17.11",
    "moment": "^2.22.2",
    "rxjs": "6.3.3",
    "zone.js": "0.8.11"
  },
  "devDependencies": {
    "@angular/common": "7.1.1",
    "@angular/compiler": "7.1.1",
    "@angular/core": "7.1.1",
    "@angular/forms": "7.1.1",
    "@angular/platform-browser": "7.1.1",
    "@angular/platform-browser-dynamic": "7.1.1",
    "@angular/router": "7.1.1",
    "@types/core-js": "0.9.35",
    "@types/jasmine": "7.2.48",
    "@types/node": "7.0.5",
    "typescript": "3.3"
  }
  "peerDependencies": {
    "@angular/common": "7.1.1",
    "@angular/compiler": "7.1.1",
    "@angular/core": "7.1.1",
    "@angular/forms": "7.1.1",
    "@angular/router": "7.1.1",
    "rxjs": "6.3.3",
    "zone.js": "0.8.11"
  }
}

core-lib> tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "es6",
        "lib": ["es6", "es2016", "dom"],
        "moduleResolution": "node",
        "sourceMap": true,
        "rootDir": "src",
        "baseUrl": "src",
        "sourceMap": true,
        "experimentalDecorators": true,
        "allowJs": true,
        "preserveSymlinks": true,
        "typeRoots": ["./node_modules/@types"],
        "paths": {
            "@angular/*": [
                "../node_modules/@angular/*"
            ]
        },            
    },
    "include": [
        "./src/**/*"
    ]
}

core-lib> src> index.ts

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { MyService } from './core/my.service';


@NgModule({
    imports: [CommonModule, HttpClientModule],
    exports: [HttpClientModule]
})

export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return { 
        ngModule: SharedModule, 
        providers: [MyService]
    };
  }
}

MyService非常简单，它使用httpClient获取本地.json文件，如下所示：https://stackblitz.com/edit/angular-chcpcx

运行tsc.cmd时，可以看到编译器已成功创建.js和.sourcmap文件。

ui-site> package.json

{
  "name": "ui-site",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/common": "7.1.1",
    "@angular/compiler": "7.1.1",
    "@angular/core": "7.1.1",
    "@angular/forms": "7.1.1",
    "@angular/platform-browser": "7.1.1",
    "@angular/platform-browser-dynamic": "7.1.1",
    "@angular/router": "7.1.1",
    "@types/core-js": "0.9.35",
    "@types/jasmine": "7.2.48",
    "@types/node": "7.0.5",
    "core-js": "^2.5.7",
    "lodash": "^4.17.11",
    "moment": "^2.22.2",
    "rxjs": "6.3.3",
    "zone.js": "0.8.11",
    "d3": "3.5.12",
    "jquery": "3.1.0",
    "core-lib": "file:../core-lib"
  },
  "devDependencies": {
    "@types/core-js": "0.9.35",
    "@types/jasmine": "7.2.48",
    "@types/node": "7.0.5",
  }
}

当我使用上述命令运行npm install时，没有任何问题，并且可以在ui-site> node_modules文件夹中看到core-lib目录和文件

ui-site> app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { TableModule } from './table/table.module';
import { SharedModule } from '../node_modules/core-lib/src/index';

@NgModule({
  imports:      [ BrowserModule, RouterModule, HttpClientModule, SharedModule.forRoot(), TableModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

ui-site> app> table> table.component

  import { Component } from '@angular/core';
  import { MyService } from '../../../node_modules/core-lib/src/core/my.service'

  @Component({
      template: `hi`
  })

  export class TableComponent {

      constructor(private myService: MyService) {
          this.myService..requestConfig()
              .subscribe((config) => {        
                  console.log(config);
              },
              (err) => {
                 console.log(err)
              });
      }

  }

浏览器错误：

Error: StaticInjectorError(AppModule)[HttpHandler -> Injector]: 
   StaticInjectorError(Platform: core)[HttpHandler -> Injector]: 
      NullInjectorError: No provider for Injector!

Answer 1

您是否想打forRoot？在您的示例中，您有

SharedModule.forRoot

@NgModule({
  imports:      [ ..., SharedModule.forRoot, TableModule ],
  //                                       ^
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

更新后

如果您使用Windows 10和npm linked库中的服务，请尝试添加

"preserveSymlinks": true

进入

angular.json ，位于 projects / * / architect / build / options

角局部库StaticInjectorError（AppModule）[HttpHandler-> Injector]

1 个答案:

更新后