ng serve breaks with mutliple bootstrapped modules

[snewell92]

Bug Report or Feature Request (mark with an x)

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

Versions.

Windows 10
@angular/cli: 1.3.2
node: 8.4.0
os: win32 x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

Repro steps.

• Create a new, fresh app: ng new test-app
• Create two modules to act as entry points
• In main.ts bootstrap both
• Observe failure with ng serve (not statically analyzable?)
• Comment one bootstrap out then ng serve again
• after success, comment back in, now app has two bootstraps as intended

The log given by the failure.

$ ng serve --name=dev --port=8081
Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.

Desired functionality.

ng serve should be able to see that there are two bootstraps and handle that. This is super useful in multi-page applications to have a development environment, while supporting full separate apps in production.

Mention any other details that might be useful.

Could be related to #4624

[deebloo]

@snewell92 can you just pass multiple components to bootstrap in one root module?

[filipesilva]

@hansl is this usecase supported? AFAIK we only support a single entry module.

[snewell92]

@deebloo I tried that at first, but for some reason switched to bootstrapping different modules for some reason. Trying that again...

Ah I remember

the selector "app1" did not match any elements

When specifying bootstrapped components in a module those components need their selector to exist in the DOM, but when bootstrapping a module in a main file/entry-point that is not the case.

---

@filipesilva I would like to turn this into a feature request/bug report if this usecase is not supported. Bug report because there should still be an error even when commenting out/in the bootstrapped modules, feature request because it simplifies a multi-page development workflow a ton.

My use case explained more in depth

I'm developing a full-stack multi-page application with a node backend, so each page has its own root page module. The node backend leverages SSR (with another tool, not angular) to get the skeleton of the page, with script tags pointing to either the development server ng serve starts, or the production hosting service (like netlify) in prod.

This works well when building the application (ng build --name=... / aot), as each page can be its own app, but while developing I would not like to have to open n consoles to ng serve --name=page1 ... ng serve --name=pagen - I would rather do ng serve --name=dev and that be able to serve all the pages.

---

Thanks for reading and taking the time to respond <3<3

[snewell92]

A more ''supported" way of doing this is to have a dev module in which the component is simply a router shell (template is just <router-outlet></router-outlet>) that routes to the other page components. This is much more supported with the tooling.

Regardless, ng serve should catch the same error it does on reload that it does on start up if at all possible.

[filipesilva]

I think this is a variation of #4624.

[angular-automatic-lock-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.}