6

概要

Angular 6 ライブラリを作成しましたが、それを作成したプロジェクトの外部で使用しようとするとエラーが発生します。これは大量のコードのように見えますが、ほとんどが CLI によって生成されたボイラープレートです。

最小限の作業テスト ケース

Angular 6 CLI を使用して非常に基本的なライブラリを作成しました。

ng new mylib 
cd mylib
ng generate library example
ng build --prod example

次に、 に追加 <lib-example></lib-example>してsrc/app/app.component.htmlを実行ng serveし、サンプル コンポーネントが期待どおりに動作することを確認できます。

次に、タグprojects/example/src/lib/example.component.tsに an を追加するように編集します。*ng-if="true"<p>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'lib-example',
  template: `
    <p *ng-if="true"> <!-- this line was changed -->
      example works!
    </p>
  `,
  styles: []
})
export class ExampleComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

ngIfディレクティブを取得するには、 import をインポートBrowserModuleするので、projects/example/src/lib/example.module.ts次のようになります。

import { NgModule } from '@angular/core';
import { ExampleComponent } from './example.component';
import { BrowserModule } from '@angular/platform-browser'; // added

@NgModule({
  imports: [
    BrowserModule // added
  ],
  declarations: [ExampleComponent],
  exports: [ExampleComponent]
})
export class ExampleModule { }

再構築:

ng build --prod example

私のコンポーネントはまだ何も役に立ちませんが、作成に使用したのと同じプロジェクト内で使用する限り機能します。

動作しない最小限のテスト ケース

別のアプリでライブラリを使用してみましょう。ライブラリを含むアプリと同じディレクトリにある新しいアプリを生成することから始めます。

ng new myapp

次に、ライブラリを に追加<lib-example></lib-example>しmyapp/src/app/app.component.htmlてインポートすると、myapp/src/app/app.module.ts次のようになります。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { ExampleModule } from "../../../mylib/dist/example"; // added

@NgModule({
  declarations: [AppComponent],
  imports: [
     BrowserModule,
     ExampleModule // added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

エラーメッセージ

アプリを参照すると、コンソールに次のエラーが表示されます。

Error: StaticInjectorError(AppModule)[ApplicationRef -> NgZone]: 
  StaticInjectorError(Platform: core)[ApplicationRef -> NgZone]: 
    NullInjectorError: No provider for NgZone!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1060)
    at resolveToken (core.js:1298)
    at tryResolveToken (core.js:1242)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139)
    at resolveToken (core.js:1298)
    at tryResolveToken (core.js:1242)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139)
    at resolveNgModuleDep (core.js:8377)
    at _createClass (core.js:8430)
    at _createProviderInstance (core.js:8394)

私は何を間違っていますか？

4

2 に答える 2

4

ファイルに以下を追加しようとしましたかtsconfig.json:

"paths": {
      "@angular/*": [
        "./node_modules/@angular/*"
      ]
    },

パスが であることに注意してください./node_modules。いくつかの提案がありますが../node_modules、後者は私にとってはうまくいきませんでした。

これが誰かを助けることを願っています。解決策にたどり着くまでに非常に長い時間がかかりました。ありがとう: https://github.com/angular/angular-cli/issues/11883

于 2019-10-09T12:13:10.997 に答える