How do you define a custom angular module from npm?

I've created an npm module and published it successfully. Now I'm trying to figure out how to include it into my app. I am using webpack to compile and can't seem to get it right. It is an angular universal setup.

The repo for Angular universal is :

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

Here is the git repo for the module: https://github.com/ChrisTarasovs/angular2-ui-kit

In my project in app.module.ts I do

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

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

The error I get is :

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...

My Package.JSON file is:

{
  "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"
  }
}

My App Component is:

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');
  }
}

---

You're not supposed to declare it in the AppModule . Your module which you've published to npm is supposed to have Box listed in the exports of the BoxModule .

Then, when you import BoxModule , as you did, you'll be able to use this component.

This is pretty much what the error message states, though; so not sure if/why you haven't tried that already.

链接地址: http://www.djcxy.com/p/31324.html

上一篇: WebSockets与服务器

下一篇: 你如何从npm定义一个自定义的角度模块？