“Tried to find bootstrap code, but could not” when bootstrapping multiple components in Angular 5, but it kind of works?

Question

So I'm experiencing a very, very weird issue. I am trying to bootstrap multiple components in my Angular 5 project, so I can simply do:

<body>
    <awesome-component></awesome-component>
    <cool-component></cool-component>
</body>

It works fine, but there's an issue: I cannot build the project with multiple modules in my main.ts file, except when I ng build --watch and add the second module afterwards . This is extremely weird.

Take a look at these two modules:

AwesomeModule

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AwesomeComponent } from "./awesome.component";

@NgModule({
    declarations: [AwesomeComponent],
    imports: [BrowserModule],
    bootstrap: [AwesomeComponent]
})
export class AwesomeModule {}

CoolComponent

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { CoolComponent } from "./cool.component";

@NgModule({
    declarations: [CoolComponent],
    imports: [BrowserModule],
    bootstrap: [CoolComponent]
})
export class CoolModule {}

If I bootstrap these inside main.ts like this:

platformBrowserDynamic().bootstrapModule(AwesomeModule);
platformBrowserDynamic().bootstrapModule(CoolModule);

I get this error when running ng build :

ERROR in Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
    at Object.resolveEntryModuleFromMain (C:\test\node_modules\@ngtools\webpack\src\entry_resolver.js:121:15)
    at Promise.resolve.then.then (C:\test\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:241:54)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

If I remove one of them like this:

platformBrowserDynamic().bootstrapModule(AwesomeModule);
// platformBrowserDynamic().bootstrapModule(CoolModule);

and I run ng build again, it works just fine. Here is the weird part : If I add --watch to ng build , it will listen for file changes and build the files affected. If I run ng build --watch with ONE module, it works fine (as I said before), but if I then add in the second module (remove the comment), it builds and works just fine.

So the issue is, I simply cannot get it to build from scratch with ng build , while I have two modules (with two components) in my main.ts file.

Anyone else experienced this issue before? Did I mess up something?

Here's one of my components just for good measure:

cool.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "cool-component",
    templateUrl: "./cool.component.html"
})
export class CoolComponent {
    public title = "Cool stuff";
}

Answer 1

from https://angular.io/guide/architecture "bootstrap - the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property."

you can make a app-root and put in the html of this app-root

//index.html
<body>
<app-root>
</body>

//app-root.component.html
<awesome-component></awesome-component>
<cool-component></cool-component>

“Tried to find bootstrap code, but could not” when bootstrapping multiple components in Angular 5, but it kind of works?

Question

1 answers

solution1
-1 2018-02-21 08:48:29

“Tried to find bootstrap code, but could not” when bootstrapping multiple components in Angular 5, but it kind of works?

Question

1 answers

solution1 -1 2018-02-21 08:48:29

solution1
-1 2018-02-21 08:48:29