[英]How to Create Multiple applications in one Angular 6 project with multiple dist folders?
How to Create Multiple applications in one Angular 6 project with multiple dist folders?如何在具有多个 dist 文件夹的一个 Angular 6 项目中创建多个应用程序? so you can deploy applications independently.
因此您可以独立部署应用程序。
I am creating a project and inside the project I am creating two applications with the command: ng g application app1 ng g application app2我正在创建一个项目,并在项目内部使用以下命令创建两个应用程序:ng g application app1 ng g application app2
if I build them independently I get two different distribution folders ng build app1 --prod ng build app2 --prod如果我独立构建它们,我会得到两个不同的分发文件夹 ng build app1 --prod ng build app2 --prod
But I want to be able to route app1 to app2 through a link, if I build the whole project as in: ng build --prod但是我希望能够通过链接将 app1 路由到 app2,如果我按照以下方式构建整个项目: ng build --prod
both applications are compacted into one dist folder and I want to have two folders app1 and app2 as independent dist folders, so I can deploy them independently, so the issue I am facing is being able to route to app2 from app1.两个应用程序都被压缩到一个 dist 文件夹中,我希望有两个文件夹 app1 和 app2 作为独立的 dist 文件夹,所以我可以独立部署它们,所以我面临的问题是能够从 app1 路由到 app2。
In NGIR Project i'm creating two project(one for client side and second for server side)在NGIR项目中,我正在创建两个项目(一个用于客户端,第二个用于服务器端)
check the angular.json there you can change outputPath
to any directory you like检查angular.json ,您可以将
outputPath
更改为您喜欢的任何目录
you can do the same for your project你可以为你的项目做同样的事情
hope it helps.希望能帮助到你。
I believe this is now achievable using the built-in tools;我相信现在可以使用内置工具实现这一点; you can have multiple projects configured in the
"projects"
node of the angular.json
file.您可以在
angular.json
文件的"projects"
节点中配置多个项目。
Here is a snippet of the file:这是文件的一个片段:
"newProjectRoot": "projects",
"projects": {
"my-angular-project": {
"root": "",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
So rather than having a single src
directory, you could have multiple, each with their own Angular project inside.因此,与其只有一个
src
目录,还可以有多个,每个目录都有自己的 Angular 项目。
Not sure how it was in Angular 6, but in Angular 8 and newer you have basically two options:不确定它在 Angular 6 中的情况,但在 Angular 8 和更新版本中,您基本上有两个选择:
Create Angular workspace and multiple applications under it.在其下创建 Angular 工作区和多个应用程序。 Also you can have libraries under this workspace, so except package.json you can also share common stuff between (components, services, assets, ...) these applications.
您还可以在此工作区下拥有库,因此除了 package.json 之外,您还可以在(组件、服务、资产等)这些应用程序之间共享公共内容。 Eg:
例如:
ng new PlaygroundWorkspace --create-application=false ng new PlaygroundWorkspace --create-application=false
ng generate application app-one --routing=true ng generate application app-two --routing=true ng 生成应用程序应用程序一 --routing=true ng 生成应用程序应用程序二 --routing=true
ng generate library lib-mylib ng 生成库 lib-mylib
PROS: Applications are independent - you get two builds (dist/app-one & dist/app-two)优点:应用程序是独立的——你有两个版本(dist/app-one & dist/app-two)
CONS: You can not have "common" routing.缺点:您不能拥有“通用”路由。 Let's say, you would like to have one common menu (then ideally put in lib), so the same menu (using routerLink) will be displayed in both applications:
比方说,您想要一个通用菜单(然后最好放在 lib 中),因此相同的菜单(使用 routerLink)将显示在两个应用程序中:
APP ONE - page 1 ... url:port/app-one/page1
APP ONE - page 2 ... url:port/app-one/page2
APP TWO - page 1 ... url:port/app-two/page1
APP TWO - page 2 ... url:port/app-two/page2
But since Angular is SPA (request is not sent to server thanks to Routing & routerLink), the routing is working just in "actual" application you have open.但是由于 Angular 是 SPA(由于 Routing & routerLink,请求不会发送到服务器),路由仅在您打开的“实际”应用程序中工作。 So eg if you are in /app-one/, navigation (between page1 and page2) is working just there, click on links (routerLink) for app-two does not work.
因此,例如,如果您在 /app-one/ 中,导航(在 page1 和 page2 之间)就在那里工作,单击 app-2 的链接 (routerLink) 不起作用。 If you manually enters url to app-two, then you will be in app-two and app-one links (routerLink) will not work.
如果您手动将 url 输入到 app-2,那么您将进入 app-2,而 app-1 链接 (routerLink) 将不起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.