0
我創建了一個npm模塊併成功發佈。 現在我試圖弄清楚如何將它包含到我的應用程序中。 我正在使用webpack進行編譯,似乎無法正確完成。 這是一個角度通用設置。如何從npm定義一個自定義角度模塊?
對角通用回購是:
https://github.com/angular/universal-starter/tree/master/custom-webpack
下面是該模塊的混帳回購協議:在app.module.ts我做 https://github.com/ChrisTarasovs/angular2-ui-kit
在我的項目
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 <[email protected]>",
"PatrickJS <[email protected]>",
"Jeff Whelpley <[email protected]>",
"Jeff Cross <[email protected]>",
"Mark Pieszak <[email protected]>",
"Jason Jean <[email protected]>"
],
"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');
}
}
我已經更新了我剛剛嘗試過的內容以及錯誤。我已經完成了導入:[BoxModule],但是應用程序無法編譯。 –
什麼是錯誤?你的npm模塊是否導出你正在尋找的組件?你甚至'npm安裝'你的模塊嗎?你有沒有適當的類型? –
我已經更新了上面的註釋,請查看我的pacakage.json,它顯示我已經安裝了它。我試圖在angular-cli上設置它,它的工作原理,但不是當我用上面列出的環境的webpack進行編譯時。 –