angularjs – Angular 2 – 将模块移动到他们自己的项目中
我正在尝试使用angular 2创建门户功能,它将提供基本导航和全局服务(如身份验证),但允许其他开发人员创建自己的模块,从根本上插入门户.
我正在使用angular-cli,并且已经通过路由器(使用loadChildren)在app.module中延迟加载的项目内部创建的模块(参见下面的树)快速进行了概念验证.每个子模块都有自己的路由器,从根本上与父门户(app.module)分离. 我最终希望将这些子模块移动到他们自己的项目中,但绝对不知道从哪里开始,似乎很少有关于这个在线的信息.如果有人知道一个例子或者可以证明如何设置它,我将非常感激. 编辑:如果可能的话,我想继续使用Angular-CLI功能来执行此操作. 这是我的目录结构.模块1,2和& 3需要进入自己的项目. +-- app │ +-- app.component.css │ +-- app.component.html │ +-- app.component.spec.ts │ +-- app.component.ts │ +-- app.module.ts │ +-- module1 │ │ +-- dataflows │ │ │ +-- dataflows.component.css │ │ │ +-- dataflows.component.html │ │ │ -- dataflows.component.ts │ │ +-- module1.component.css │ │ +-- module1.component.html │ │ +-- module1.component.ts │ │ +-- module1.module.ts │ │ -- other │ │ +-- other.component.css │ │ +-- other.component.html │ │ -- other.component.ts │ +-- index.ts │ +-- module2 │ │ +-- module2.component.css │ │ +-- module2.component.html │ │ +-- module2.component.ts │ │ -- module2.module.ts │ -- module3 │ +-- dummy1 │ │ +-- dummy1.component.css │ │ +-- dummy1.component.html │ │ -- dummy1.component.ts │ +-- module3.component.css │ +-- module3.component.html │ +-- module3.component.ts │ +-- module3.module.ts │ -- dummy2 │ +-- dummy2.component.css │ +-- dummy2.component.html │ -- dummy2.component.ts +-- index.html
您可以拥有以下目录结构:
angular | ---- common_files | | | ----- package.json | | | ----- index.ts | | | ----- catalog1 | | | ---- package.json | | | ---- some_file_with_service_model_comopnent.ts | | | ---- index.ts - this is regular barrel file | | | ----- catalog2 | ---- app1 | ------ package.json | ---- app2 | ------ package.json /角度/ common_files / { "name": "common-modules","version": "0.0.1","description": "","main": "index.js","scripts": { "test": "echo "Error: no test specified" && exit 1","dev": "tsc -w","tsc": "tsc","tsc:w": "tsc -w","pack": "webpack" },"typings": "./index.d.ts","author": "Maciej Sobala","license": "UNLICENSED","dependencies": { "@angular/common": "2.0.0","@angular/compiler": "2.0.0","@angular/core": "2.0.0","@angular/forms": "2.0.0","@angular/http": "2.0.0","@angular/material": "2.0.0-alpha.9-3","@angular/router": "3.0.0","ng2-cookies": "^1.0.2","rxjs": "5.0.0-beta.12","typescript": "2.0.0","typescript-collections": "^1.2.3","zone.js": "^0.6.12" },"private": "true","devDependencies": { "@types/body-parser": "0.0.29","@types/compression": "0.0.29","@types/cookie-parser": "^1.3.29","@types/express": "^4.0.32","@types/express-serve-static-core": "^4.0.33","@types/hammerjs": "^2.0.32","@types/mime": "0.0.28","@types/node": "^6.0.38","@types/core-js": "^0.9.34","webpack": "^1.13.2","webpack-merge": "^0.14.0","angular2-template-loader": "^0.4.0","awesome-typescript-loader": "~1.1.1" } } /angular/common_files/index.ts: export * from './catalog1/index'; export * from './catalog2/index'; /angular/common_files/catalog1/package.json: { "name": "common-modules/catalog1","main": "index.js" } 现在,您可以使用npm run tsc编译公共文件.之后,您可以在app1和app2中重用它们: npm install ../common/ --save 这将在你的app1 package.json中创建条目: "dependencies": { "common-modules": "file:///Users/my_name/Documents/work/my_project/angular/common_files",} 之后,您可以从app1和/或app2导入模块,从’common-modules / catalog1’导入{something}; 您还应该查看此链接:https://docs.npmjs.com/private-modules/intro (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |