2

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
David Deutsch
  • 17,443
  • 4
  • 47
  • 54

2 Answers2

6

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.

Anil Gupta
  • 498
  • 6
  • 9
1

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 (i.e. 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).

David Deutsch
  • 17,443
  • 4
  • 47
  • 54
  • What exactly do you mean by importing? I have this exact issue and I can't find a fix for it. Can you expand your answer with some code examples? I've tried to move the `platformBrowserDynamic().bootstrapModule(SomeModule);` into the module's own `ngOnInit()`, then import the modules inside `app.module.ts`, but I get the same error. Not really sure why I am experiencing it. – MortenMoulder Feb 21 '18 at 08:06