Angular-cli: Multiple entry points with ng serve

[jraadt]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ x] feature request

Versions.

@angular/cli: 1.0.4
node: 7.9.0
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/material: 2.0.0-beta.5
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.4
@angular/compiler-cli: 4.0.2

Desired functionality.

Is it possible to have multiple entry points available from ng serve? I'm building an application that has multiple urls. My main app is index.html and is working great. I would like to add a minimal mobile version of my app with reduced functionality at mobile.html that shares a lot of the code, but I don't want to load all the features used in my main app. So along with main.ts I would like to create a mobile.ts that bootstraps my MobileModule instead of AppModule if mobile.html is called instead of index.html. I just want to call ng serve on my project and have it use the different entry points depending on if I call index.html or mobile.html. Is that possible or do I have to eject?

[Brocco]

You can use the multiple apps feature.

In .angular-cli.json duplicate the first (and only) app entry and then update the main value to point at your new entry point.

[jraadt]

The problem I'm having is when I run ng serve http://localhost:4200/index.html works but http://localhost:4200/mobile.html does not.

I added another "app" to .angular-cli .json. It's identical to my first app except "index": "mobile.html", "main": "main.mobile.ts". Under my src directory I added main.mobile.ts and mobile.html and a new mobile directory with my mobile.module.ts and mobile.component.ts files in it.

It seems to compile everything, but ng serve only serves index.html.

[Brocco]

@jraadt in order to serve the other (mobile) app, you will need to use the --app option...

So ng serve is essentialy running ng serve --app=0 and in order to run the mobile app you would need to run ng serve --app=1.

Note that the 0 and 1 are indexes to the apps array in .angular-cli.json

[jraadt]

I guess what I was trying to do is running both apps at the same time through ng serve. ng serve would have to do some "server side" routing so if I type index.html into the browser it loads my index.html page/app and if I type mobile.html it would load my mobile app.

[mathertel]

This is exactly what I need as well.
How can I vote for this feature ?

[ramakrishna-y]

Is this feature available in now - Angular5? building & running multiple apps using ng build & ng serve?

I am building an enterprise application with multiple applications. In the main application, I want to handle authentication & authorization and other common stuff for all other application. Then I will add multiple applications (with their own routes) as the development is complete. When it comes to the deployment, we would build applications that need to go into Production and then build and deploy accordingly.

Is this achievable in the latest version of angular? I understood how to create multiple apps and angular.cli.json. But I got stuck at the build and serve stage.
and create routs for each application (module).

[izogfif]

I heard that in Angular 6 there will be something about "ng serve" working for multiple apps. Quote from
https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

Update. The angular team is working on the Angular Elements module that will allow you to create Angular widgets that you’ll be able to embed into any HTML app. This should allow you to have multiple apps on the same HTML page as well. This feature should be available in the upcoming Angular 6 releases.

Angular 6 is out, but I can't find step-by-step guide on how to do that.

Meanwhile there is an article about serving multiple Angular 5 apps which share Angular base JavaScript engine and components (i.e. you don't need to load Angular framework JavaScripts twice if you have two Angular apps on the same page): https://it.artindustrial.com/2017/06/06/making-angular2-a-team-player-multiple-apps-on-a-single-page/

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}