Question

我正在尝试使用角度CLI创建自定义Angular 2组件。

我所做的是，按照GitHub

中的说明创建一个示例组件库

Libray应用程序结构如下，

│   index.ts
│   tsconfig.app.json
│   tsconfig.spec.json
│   typings.d.ts
│
└───greeter
        greeter.component.html
        greeter.component.ts
        greeter.module.ts
        index.ts

greeter.module.ts

import {NgModule} from '@angular/core';
import {GreeterComponent} from './greeter.component';

@NgModule({
  declarations: [GreeterComponent],
  exports: [GreeterComponent]
})
export class GreeterModule {
}

greeter.component.ts

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

@Component({
  selector: 'demo-greeter',
  templateUrl: './greeter.component.html'
})
export class GreeterComponent {

}

的package.json

{
  "name": "@ns/ng-demo-lib",
  "version": "0.0.0",
  "license": "MIT",
  "main": "lib/index.ts",
  "typings": "lib/index.ts",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.2.3",
    "@angular/compiler-cli": "^4.1.0",
    "@types/jasmine": "2.5.53",
    "@types/node": "~6.0.60",
    "angular-cli-ghpages": "^0.5.0",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "protractor": "~5.1.0",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

然后我通过

将这个库导入到项目中

npm install --save D:\Test\ng-demo-lib-master

然后将其添加到package.json文件中，

 "@ns/ng-demo-lib": "file:../ng-demo-lib-master",

然后我在AppModule中导入了GreeterModule，

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { GreeterModule } from '@ns/ng-demo-lib';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    GreeterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

但是当我尝试运行应用程序时，我收到了这个错误。

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original
 .ts file), resolving symbol NgModule in D:/Test/ng-demo-app-master/node_modules/@ns/ng-demo-lib/node_modules/@angular/core/core.d.ts, resolving symbol GreeterModule in D:/Test/ng-demo-app-master/node_modules/@ns
/ng-demo-lib/lib/greeter/greeter.module.ts, resolving symbol GreeterModule in D:/Test/ng-demo-app-master/node_modules/@ns/ng-demo-lib/lib/greeter/greeter.module.ts

有什么想法吗？在此过程中我是否遗漏了任何内容，或者无法导入npm lib localy？

导入Angular 2自定义组件库Localy时出错

0 个答案: