title: Angular 6 with SSR and i18n getting error "You must pass in a NgModule or NgModuleFactory to be bootstrapped"
body: <p>ERROR: <a href="https://github.com/mixalistzikas/angular-ssr-i18n" rel="nofollow noreferrer">https://github.com/mixalistzikas/angular-ssr-i18n</a></p>
  
  <pre><code>Run `npm run build:all`. Navigate to `http://localhost:4201/`.
  </code></pre>
  
  <p>I'm trying to make server side rendering with i18n. I have already done this with angular &lt;=5 but now with angular CLI 6, I'm getting trouble. </p>
  
  <p>I'm running "npm run build:all" and everyting finish without any error...</p>
  
  <p>browser files.... DONE
  server files.... DONE
  webpack..... DONE</p>
  
  <p>But when I'm trying to open the site at "listening on <a href="http://localhost:4201" rel="nofollow noreferrer">http://localhost:4201</a>" I'm always get the following error</p>
  
  <pre><code>Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped
  </code></pre>
  
  <p>Thank you.... If you need any other file tell me to upload it</p>
  
  <p>package.json</p>
  
  <pre><code>{
  "name": "frontend-admin",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:all": "node scripts/build.js &amp;&amp; node scripts/build.js --server=true &amp;&amp; webpack --mode production &amp;&amp; node ./dist/server.js",
    "build:web": "node scripts/build.js",
    "build:server": "node scripts/build.js --server=true",
    "build:webpack": "webpack --mode production",
    "start:server": "node ./dist/server.js",
    "build-i18n": "for lang in en el; do ng build --output-path=dist/$lang --aot --prod --i18n-file=src/i18n/messages.$lang.xlf --i18n-format=xlf --i18n-locale $lang --base-href /$lang/; done"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "^6.0.7",
    "@angular/common": "^6.0.7",
    "@angular/compiler": "^6.0.7",
    "@angular/core": "^6.0.7",
    "@angular/forms": "^6.0.7",
    "@angular/http": "^6.0.7",
    "@angular/platform-browser": "^6.0.7",
    "@angular/platform-browser-dynamic": "^6.0.7",
    "@angular/platform-server": "^6.0.7",
    "@angular/router": "^6.0.7",
    "@ng-bootstrap/ng-bootstrap": "^2.2.0",
    "@ng-bootstrap/schematics": "^2.0.0-alpha.1",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "@ngxs/devtools-plugin": "^3.1.3",
    "@ngxs/logger-plugin": "^3.1.3",
    "@ngxs/store": "^3.1.3",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.7",
    "moment": "^2.22.2",
    "ngx-dropzone-wrapper": "^6.1.0",
    "ngx-moment": "^3.1.0",
    "rxjs": "^6.2.0",
    "ts-loader": "^4.4.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.7",
    "@angular/language-service": "^6.0.7",
    "@types/googlemaps": "^3.30.11",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.1.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^1.2.0",
    "protractor": "~5.3.2",
    "ts-node": "^6.1.2",
    "tslint": "^5.10.0",
    "typescript": "~2.7.2",
    "webpack-cli": "^3.0.8",
    "webpack-node-externals": "^1.7.2"
  }
  }
  </code></pre>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
       "node_modules/@types"
    ],
    "lib": [
       "es2017",
       "dom"
    ],
    "paths": {
       "_components/*": [
          "src/app/core/components/*"
       ],
       "_directives/*": [
          "src/app/core/directives/*"
       ],
       "_services/*": [
          "src/app/core/services/*"
       ],
       "_pipes/*": [
          "src/app/core/pipes/*"
       ],
       "_layouts/*": [
          "src/app/core/layouts/*"
       ],
       "_shared/*": [
          "src/app/core/shared/*"
       ],
       "_layouts/*": [
          "src/app/core/layouts/*"
       ],
       "_validators/*": [
          "src/app/core/validators/*"
       ],
       "_guards/*": [
          "src/app/core/guards/*"
       ]
    }
   }
  }
  </code></pre>
  
  <p>src/tsconfig.app.json</p>
  
  <pre><code>{
  "extends": "../tsconfig.json",
  "compilerOptions": {
      "outDir": "../out-tsc/app",
      "module": "es2015",
      "types": []
  },
  "exclude": [
      "src/test.ts",
      "**/*.spec.ts"
  ]
  }
  </code></pre>
  
  <p>src/tsconfig.server.json</p>
  
  <pre><code>{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
     "entryModule": "app/app.server.module#AppServerModule"
  }
  }
  </code></pre>
  
  <p>src/main.server.ts</p>
  
  <pre><code>export { AppServerModule } from './app/app.server.module';
  </code></pre>
  
  <p>angular.json</p>
  
  <pre><code> {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
    "frontend-admin": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "app",
       "schematics": {},
       "architect": {
          "build": {
             "builder": "@angular-devkit/build-angular:browser",
             "options": {
                "outputPath": "dist/browser",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [
                   "src/favicon.ico",
                   "src/assets"
                ],
                "styles": [
                   "src/styles.scss",
                   "src/assets/css/variables.scss",
                   "src/assets/font/AvertaStd/stylesheet.css",
                   "src/assets/css/layout.scss",
                   {
                      "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
                   }
                ],
                "scripts": []
             },
             "configurations": {
                "production": {
                   "fileReplacements": [
                      {
                         "replace": "src/environments/environment.ts",
                         "with": "src/environments/environment.prod.ts"
                      }
                   ],
                   "optimization": true,
                   "outputHashing": "all",
                   "sourceMap": false,
                   "extractCss": true,
                   "namedChunks": false,
                   "aot": true,
                   "extractLicenses": true,
                   "vendorChunk": false,
                   "buildOptimizer": true
                }
             }
          },
          "serve": {
             "builder": "@angular-devkit/build-angular:dev-server",
             "options": {
                "browserTarget": "frontend-admin:build"
             },
             "configurations": {
                "production": {
                   "browserTarget": "frontend-admin:build:production"
                }
             }
          },
          "server": {
             "builder": "@angular-devkit/build-angular:server",
             "options": {
                "outputPath": "dist/app/server",
                "main": "src/main.server.ts",
                "tsConfig": "src/tsconfig.server.json"
             },
             "configurations": {
                "production": {
                   "fileReplacements": [
                      {
                         "replace": "src/environments/environment.ts",
                         "with": "src/environments/environment.prod.ts"
                      }
                   ]
                }
             }
          },
          "extract-i18n": {
             "builder": "@angular-devkit/build-angular:extract-i18n",
             "options": {
                "browserTarget": "frontend-admin:build"
             }
          },
          "test": {
             "builder": "@angular-devkit/build-angular:karma",
             "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.spec.json",
                "karmaConfig": "src/karma.conf.js",
                "styles": [
                   "styles.scss"
                ],
                "scripts": [],
                "assets": [
                   "src/favicon.ico",
                   "src/assets"
                ]
             }
          },
          "lint": {
             "builder": "@angular-devkit/build-angular:tslint",
             "options": {
                "tsConfig": [
                   "src/tsconfig.app.json",
                   "src/tsconfig.spec.json"
                ],
                "exclude": [
                   "**/node_modules/**"
                ]
             }
          }
       }
     },
     "frontend-admin-server": {
  
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "dt",
       "schematics": {},
       "architect": {
          "build": {
             "builder": "@angular-devkit/build-angular:browser",
             "options": {
                "outputPath": "dist/server",
                "index": "src/index.html",
                "main": "src/main.server.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.server.json",
                "assets": [],
                "styles": [],
                "scripts": []
             },
             "configurations": {
                "production": {
                   "fileReplacements": [
                      {
                         "replace": "src/environments/environment.ts",
                         "with": "src/environments/environment.prod.ts"
                      }
                   ],
                   "optimization": true,
                   "outputHashing": "all",
                   "sourceMap": false,
                   "extractCss": true,
                   "namedChunks": false,
                   "aot": true,
                   "extractLicenses": true,
                   "vendorChunk": false,
                   "buildOptimizer": true
                }
             }
          },
          "serve": {
             "builder": "@angular-devkit/build-angular:dev-server",
             "options": {
                "browserTarget": "frontend-admin-server:build"
             },
             "configurations": {
                "production": {
                   "browserTarget": "frontend-admin-server:build:production"
                }
             }
          },
          "extract-i18n": {
             "builder": "@angular-devkit/build-angular:extract-i18n",
             "options": {
                "browserTarget": "frontend-admin-server:build"
             }
          },
          "test": {
             "builder": "@angular-devkit/build-angular:karma",
             "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.server.spec.json",
                "karmaConfig": "src/karma.conf.js",
                "styles": [
                   "styles.scss"
                ],
                "scripts": [],
                "assets": [
                   "src/favicon.ico",
                   "src/assets"
                ]
             }
          },
          "lint": {
             "builder": "@angular-devkit/build-angular:tslint",
             "options": {
                "tsConfig": [
                   "src/tsconfig.server.json",
                   "src/tsconfig.server.spec.json"
                ],
                "exclude": [
                   "**/node_modules/**"
                ]
             }
          }
       }
     },
     "frontend-admin-e2e": {
       "root": "e2e/",
       "projectType": "application",
       "architect": {
          "e2e": {
             "builder": "@angular-devkit/build-angular:protractor",
             "options": {
                "protractorConfig": "e2e/protractor.conf.js",
                "devServerTarget": "frontend-admin:serve"
             }
          },
          "lint": {
             "builder": "@angular-devkit/build-angular:tslint",
             "options": {
                "tsConfig": "e2e/tsconfig.e2e.json",
                "exclude": [
                   "**/node_modules/**"
                ]
             }
          }
       }
    }
  },
  "defaultProject": "frontend-admin",
  "schematics": {
    "@schematics/angular:component": {
       "styleext": "scss"
    }
  }
  }
  </code></pre>
  
  <p>scripts/build.js</p>
  
  <pre><code>const execSync = require('child_process').execSync;
  const path = require('path');
  const project = require(path.join(process.cwd(), 'project.json'));
  const args = require('yargs').argv;
  
  const locales = Object.keys(project.locales);
  
  const baseCommand = args.server === 'true' ? project.server.command : 
  project.client.command;
  const folder = args.server === 'true' ? project.server.output : 
  project.client.output;
  
  function buildCommand(command, locale, output, needFile) {
   command += ` --output-path dist/${output}/${locale.toLowerCase()} --deploy-url /${locale.toLowerCase()}/ --base-href /${locale.toLowerCase()}/ --i18n-locale=${locale}`;
  if (needFile) {
    command += ` --i18n- =file=src/i18n/messages.${locale.toLowerCase()}.xlf --i18n-format=xlf`;
     }
   console.log(command);
     return command;
  }
  
  for (let i = 0; i &lt; locales.length; i++) {
     console.info(`Building for locale ${locales[i]}...`);
     execSync(buildCommand(baseCommand, locales[i], folder, 
  project.locales[locales[i]]), { cwd: process.cwd(), stdio: [0, 1, 2] });
     console.info();
  }
  
  process.exit(0);
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>const path = require('path');
  const project = require(path.join(process.cwd(), 'project.json'));
  var nodeExternals = require('webpack-node-externals');
  const webpack = require('webpack');
  
  const locales = Object.keys(project.locales);
  
  const config = {
  entry: {
    server: './server.ts'
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {}
  },
  target: 'node',
  externals: [nodeExternals({
    whitelist: [
    ]
  })],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [{
       test: /\.ts$/,
       loader: 'ts-loader'
    }]
  },
  plugins: [
    // ...
    new webpack.DefinePlugin({
       'process.env.BROWSER': JSON.stringify(true),
       'window': JSON.stringify(true)
    }),
    // ...
  ]
  };
  
   for (let i = 0; i &lt; locales.length; i++) {
     config.resolve.alias[`main.server.${locales[i].toLowerCase()}`] = path.join(__dirname, 'dist', 'server', locales[i].toLowerCase(), 'main.js')
  }
  
  module.exports = config;
  </code></pre>
  
  <p>webpack.server.config.js</p>
  
  <pre><code>const path = require('path');
  const project = require(path.join(process.cwd(), 'project.json'));
  var nodeExternals = require('webpack-node-externals');
  
  const locales = Object.keys(project.locales);
  
  const config = {
  entry: {
    server: './server.ts'
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {}
  },
  target: 'node',
  externals: [nodeExternals()],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [{
       test: /\.ts$/,
       loader: 'ts-loader'
    }]
  }
  };
  
  for (let i = 0; i &lt; locales.length; i++) {
  config.resolve.alias[`main.server.${locales[i].toLowerCase()}`] = path.join(__dirname, 'dist', 'server', locales[i].toLowerCase(), 'main.js')
  }
  
  module.exports = config;
  </code></pre>
  
  <p>project.json</p>
  
  <pre><code>{
  "locales": {
    "en": true,
    "el": true
  },
  "client": {
    "command": "ng build frontend-admin --prod --build-optimizer",
    "output": "browser"
  },
  "server": {
    "command": "ng build frontend-admin-server --aot",
    "output": "server"
  }
  }
  </code></pre>
  
  <p>src/app/app.server.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { ServerModule } from '@angular/platform-server';
  import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
  
  import { AppModule } from './app.module';
  import { AppComponent } from './app.component';
  
  @NgModule({
    imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  providers: [
  // Add universal-only providers here
  ],
  bootstrap: [ AppComponent ],
  })
  export class AppServerModule {
  constructor() {
    //const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server';
    console.log(`11111111111111111111111111111`);
  }
  }
  </code></pre>