npmからどのようにカスタム角度モジュールを定義しますか？

Question

私はnpmモジュールを作成し、それを正常に公開しました。 今私はそれを私のアプリにどのように含めるかを考えようとしています。 コンパイルにwebpackを使用していますが、それを正しく取得できないようです。 角度ユニバーサルセットアップです。

角度普遍的なためのレポがある：私はapp.module.tsに私のプロジェクトで https://github.com/ChrisTarasovs/angular2-ui-kit

ん：モジュールのためのGitのレポここ

https://github.com/angular/universal-starter/tree/master/custom-webpack

です

import { BoxModule } from 'ng-universal-ui-kit'; 

@NgModule({ 
    imports: [BoxModule ], 
    declarations: [ AppComponent, HomeView ], 
    exports: [ AppComponent ] 
}) 
export class AppModule {} 

私が手にエラーがある：

Error: Cannot find module 'ng-universal-ui-kit' 
    at Function.Module._resolveFilename (module.js:469:15) 
    at Function.Module._load (module.js:417:25) 
    at Module.require (module.js:497:17) 
    at require (internal/module.js:20:19) 
    at Object.defineProperty.value (/Users/christarasovs/Desktop/Projects/ng2-uni-webpack/custom-webpack/dist/server.js:72955:18) 
    at __webpack_require__ (/Users/christarasovs/Desktop/Projects/ng2-uni-webpack/custom-webpack/dist/server.js:26:30) 
    at Object.<anonymous> (/Users/christarasovs/Desktop/Projects/ng2-uni-webpack/custom-webpack/dist/server.js:72874:78) 
    at __webpack_require__ (/Users/christarasovs/Desktop/Projects/ng2-uni-webpack/custom-webpack/dist/server.js:26:30) 
    at Object.<anonymous> (/Users/christarasovs/Desktop/Projects/ng2-uni-webpack/custom-webpack/dist/server.js:69632:70) 
    at __webpack_require__ (/Users/christarasovs/Desktop/Projects/ng2-uni-webpack/custom-webpack/dist/server.js:26:30) 
[nodemon] app crashed - waiting for file changes before starting... 

マイPackage.JSONファイルは次のとおりです。

{ 
    "name": "ng-universal-demo", 
    "version": "4.0.0", 
    "main": "dist/server.js", 
    "repository": { 
    "type": "git", 
    "url": "https://github.com/angular/universal-starter.git" 
    }, 
    "contributors": [ 
    "AngularClass <hello@angularclass.com>", 
    "PatrickJS <patrick@angularclass.com>", 
    "Jeff Whelpley <jeff@gethuman.com>", 
    "Jeff Cross <crossj@google.com>", 
    "Mark Pieszak <mpieszak84@gmail.com>", 
    "Jason Jean <jasonjean1993@gmail.com>" 
    ], 
    "scripts": { 
    "start": "npm run build && npm run server", 
    "build": "webpack", 
    "build:aot": "webpack --env.aot --env.client & webpack --env.aot --env.server", 
    "build:prod": "webpack --env.aot --env.client -p & webpack --env.aot --env.server", 
    "prebuild": "npm run clean", 
    "prebuild:aot": "npm run clean", 
    "prebuild:prod": "npm run clean", 
    "clean": "rimraf dist", 
    "server": "nodemon dist/server.js", 
    "watch": "webpack --watch" 
    }, 
    "engines": { 
    "node": ">=6.0.0" 
    }, 
    "license": "MIT", 
    "dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/platform-server": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@nguniversal/express-engine": "^1.0.0-beta.2", 
    "express": "^4.15.2", 
    "ng-universal-ui-kit": "^1.1.0", 
    "rxjs": "^5.4.0", 
    "serialize-javascript": "^1.3.0", 
    "xhr2": "^0.1.4", 
    "zone.js": "^0.8.10" 
    }, 
    "devDependencies": { 
    "@angular/compiler-cli": "^4.0.0", 
    "@ngtools/webpack": "^1.3.1", 
    "@types/express": "^4.0.35", 
    "@types/node": "^7.0.18", 
    "html-webpack-plugin": "^2.28.0", 
    "nodemon": "^1.11.0", 
    "raw-loader": "^0.5.1", 
    "rimraf": "^2.6.1", 
    "script-ext-html-webpack-plugin": "^1.7.1", 
    "typescript": "^2.3.2", 
    "webpack": "3.3.0", 
    "webpack-merge": "^4.1.0", 
    "webpack-node-externals": "^1.6.0" 
    } 
} 

私のアプリのコンポーネントは次のとおりです。

import { Component, OnInit } from '@angular/core'; 
import { TransferState } from '../modules/transfer-state/transfer-state'; 
import { REQUEST } from '@nguniversal/express-engine/tokens'; 

@Component({ 
    selector: 'demo-app', 
    template: ` 
    <Box>Lovely Wuhuu</Box> 
    <h1>Universal Demo using Angular</h1> 
    <a routerLink="/">Home</a> 
    <a routerLink="/lazy">Lazy</a> 
    <router-outlet></router-outlet> 
    `, 
    styles: [ 
    `h1 { 
     color: green; 
    }` 
    ] 
}) 
export class AppComponent implements OnInit { 
    constructor(private cache: TransferState) { } 

    ngOnInit() { 
    // This is an example 
    this.cache.set('message', 'Hello World'); 
    } 
} 

Answer 1

あなたがになっていませんAppModuleに宣言してください。 npmに公開したモジュールのBoxは、BoxModuleのexportsに記載されています。

次に、BoxModuleをインポートすると、このコンポーネントを使用できるようになります。

これはエラーメッセージの状態を示しています。あなたがまだそれを試していないかどうかは分かりません。