Angular Local Lib StaticInjectorError (AppModule) [HttpHandler -> Injector] - PullRequest
Новая
       30

Angular Local Lib StaticInjectorError (AppModule) [HttpHandler -> Injector]

0 голосов
/ 22 марта 2019

У меня уже несколько месяцев есть работающее приложение без проблем.Я пытаюсь переместить некоторые общие службы в библиотеку, которая может использоваться другими приложениями.

Я пытаюсь сделать это без 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 с указанным выше, проблем нет, и я вижу каталог и файлы core-lib в папке ui-site> node_modules

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!

1 Ответ

1 голос
/ 22 марта 2019

Вам не хватает, чтобы позвонить forRoot? В вашем примере у вас есть 

SharedModule.forRoot

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

export class AppModule { }

После обновления

Если вы используете Windows 10 и службу из npm linked библиотек, попробуйте добавить 

"preserveSymlinks": true

в

angular.json в проектах / * / architect / build / options

...