ng build throws error: “Tried to find bootstrap code, but could not.”

Question

When trying to build my app with ng-build , I get the following error:

Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.

My main file as specified in .angular-cli.json is pretty straightforward:

import { NgModule } from '@angular/core';
import { LoginComponent } from './login.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { HttpClientModule } from '@angular/common/http';
import { LoginService } from '../login.service'


@NgModule({
    declarations: [
        LoginComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule
    ],
    providers: [LoginService],
    bootstrap: [LoginComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

ng --version returns the following:

Angular CLI: 1.7.0
Node: 6.11.0
OS: win32 x64
Angular: 5.2.5
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.7.2
webpack-replace: 1.0.0
webpack-vendor-chunk-plugin: 1.0.0
webpack: 3.11.0

Answer 1

Taking a clue from David's answer, I tried this and worked for me.

Step 1 : Create a new file named AppModule.ts inside the same folder as you have main.ts file.

Step 2 : Move everything from main.ts file to AppModule.ts file.

Step 3: After the move, main.ts file should ONLY have this code:

import './polyfills';

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './AppModule';

platformBrowserDynamic().bootstrapModule(AppModule);

Step 4 : My AppModule.ts file has this code. Your AppModule.ts may have different code based on what you have coded.

import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {BrowserModule} from '@angular/platform-browser';
import {YOURCustomCode} from './app/YOURCustomCode';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [YOURCustomCode],
  declarations: [YOURCustomCode],
  bootstrap: [YOURCustomCode],
  providers: []
})
export class AppModule {}

Step 5 : Run command ng serve and it compiles and builds with no error bootstrap module error now.

Answer 2

Just in case anyone runs into the same problem, the issue in my case was that I was bootstrapping the app in the same file that contained the module to be bootstrapped (ie AppModule ), whereas ng build expects the module to be imported into the file where you call bootstrapModule() . The relevant code is in the function resolveEntryModuleFromMain() in node_modules\\@ngtools\\webpack\\src\\entry_resolver.js , which looks for at all of the imports declared in the file where resolveEntryModuleFromMain() is called for the module to be bootstrapped. Moving the call to bootstrapModule() to another file and importing AppModule fixed the issue (and is a better practice anyway).