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

Well, I don't know why. But the problem is with importing the BrowserModule. Do not import it into your library module and it should work.

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

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

I have been in this for a very long time and removed the imports in my library module one by one. It was the BrowserModule.

I think this should answer your other question.

于 2018-08-01T15:11:58.063 回答
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 回答