Angular4 website does not work

Question

I just changed my website from angular2 into angular4. When a do ng serve it works flawless, it only warns me of a depreciated template that should be ng-template but i work with ng-bootstrap and it stopped working when i changed the template taggs to ng-template.

But fine, i did ng build and it also builed flawless without errors. But still it does not show my website anymore and i get this error:

Uncaught InvalidProviderError {_nativeError: Error: Invalid provider - only instances of Provider and Type are allowed, got: undefined
    at Inv…}message: (...)name: (...)stack: (...)_nativeError: Error: Invalid provider - only instances of Provider and Type are allowed, got: undefined
    at InvalidProviderError.BaseError [as constructor] (http://beterfysiek.nl/vendor.bundle.js:7029:27) [<root>]
    at new InvalidProviderError (http://beterfysiek.nl/vendor.bundle.js:59093:16) [<root>]
    at http://beterfysiek.nl/vendor.bundle.js:42468:19 [<root>]
    at Array.forEach (native) [<root>]
    at _normalizeProviders (http://beterfysiek.nl/vendor.bundle.js:42457:15) [<root>]
    at http://beterfysiek.nl/vendor.bundle.js:42465:13 [<root>]
    at Array.forEach (native) [<root>]
    at _normalizeProviders (http://beterfysiek.nl/vendor.bundle.js:42457:15) [<root>]
    at resolveReflectiveProviders (http://beterfysiek.nl/vendor.bundle.js:42408:39) [<root>]
    at Function.ReflectiveInjector.resolve (http://beterfysiek.nl/vendor.bundle.js:82535:127) [<root>]
    at Function.ReflectiveInjector.resolveAndCreate (http://beterfysiek.nl/vendor.bundle.js:82566:79) [<root>]
    at JitCompilerFactory.createCompiler (http://beterfysiek.nl/vendor.bundle.js:76275:107) [<root>]
    at PlatformRef_._bootstrapModuleWithZone (http://beterfysiek.nl/vendor.bundle.js:40647:57) [<root>]
    at PlatformRef_.bootstrapModule (http://beterfysiek.nl/vendor.bundle.js:40634:21) [<root>]originalStack: "Error: Invalid provider - only instances of Provider and Type are allowed, got: undefined↵    at ZoneAwareError (http://beterfysiek.nl/vendor.bundle.js:107261:33)↵    at InvalidProviderError.BaseError [as constructor] (http://beterfysiek.nl/vendor.bundle.js:7029:27)↵    at new InvalidProviderError (http://beterfysiek.nl/vendor.bundle.js:59093:16)↵    at http://beterfysiek.nl/vendor.bundle.js:42468:19↵    at Array.forEach (native)↵    at _normalizeProviders (http://beterfysiek.nl/vendor.bundle.js:42457:15)↵    at http://beterfysiek.nl/vendor.bundle.js:42465:13↵    at Array.forEach (native)↵    at _normalizeProviders (http://beterfysiek.nl/vendor.bundle.js:42457:15)↵    at resolveReflectiveProviders (http://beterfysiek.nl/vendor.bundle.js:42408:39)↵    at Function.ReflectiveInjector.resolve (http://beterfysiek.nl/vendor.bundle.js:82535:127)↵    at Function.ReflectiveInjector.resolveAndCreate (http://beterfysiek.nl/vendor.bundle.js:82566:79)↵    at JitCompilerFactory.createCompiler (http://beterfysiek.nl/vendor.bundle.js:76275:107)↵    at PlatformRef_._bootstrapModuleWithZone (http://beterfysiek.nl/vendor.bundle.js:40647:57)↵    at PlatformRef_.bootstrapModule (http://beterfysiek.nl/vendor.bundle.js:40634:21)"zoneAwareStack: "Error: Invalid provider - only instances of Provider and Type are allowed, got: undefined↵    at InvalidProviderError.BaseError [as constructor] (http://beterfysiek.nl/vendor.bundle.js:7029:27) [<root>]↵    at new InvalidProviderError (http://beterfysiek.nl/vendor.bundle.js:59093:16) [<root>]↵    at http://beterfysiek.nl/vendor.bundle.js:42468:19 [<root>]↵    at Array.forEach (native) [<root>]↵    at _normalizeProviders (http://beterfysiek.nl/vendor.bundle.js:42457:15) [<root>]↵    at http://beterfysiek.nl/vendor.bundle.js:42465:13 [<root>]↵    at Array.forEach (native) [<root>]↵    at _normalizeProviders (http://beterfysiek.nl/vendor.bundle.js:42457:15) [<root>]↵    at resolveReflectiveProviders (http://beterfysiek.nl/vendor.bundle.js:42408:39) [<root>]↵    at Function.ReflectiveInjector.resolve (http://beterfysiek.nl/vendor.bundle.js:82535:127) [<root>]↵    at Function.ReflectiveInjector.resolveAndCreate (http://beterfysiek.nl/vendor.bundle.js:82566:79) [<root>]↵    at JitCompilerFactory.createCompiler (http://beterfysiek.nl/vendor.bundle.js:76275:107) [<root>]↵    at PlatformRef_._bootstrapModuleWithZone (http://beterfysiek.nl/vendor.bundle.js:40647:57) [<root>]↵    at PlatformRef_.bootstrapModule (http://beterfysiek.nl/vendor.bundle.js:40634:21) [<root>]"message: "Invalid provider - only instances of Provider and Type are allowed, got: undefined"stack: "Error: Invalid provider - only instances of Provider and Type are allowed, got: undefined↵    at InvalidProviderError.BaseError [as constructor] (http://beterfysiek.nl/vendor.bundle.js:7029:27) [<root>]↵    at new InvalidProviderError (http://beterfysiek.nl/vendor.bundle.js:59093:16) [<root>]↵    at http://beterfysiek.nl/vendor.bundle.js:42468:19 [<root>]↵    at Array.forEach (native) [<root>]↵    at _normalizeProviders (http://beterfysiek.nl/vendor.bundle.js:42457:15) [<root>]↵    at http://beterfysiek.nl/vendor.bundle.js:42465:13 [<root>]↵    at Array.forEach (native) [<root>]↵    at _normalizeProviders (http://beterfysiek.nl/vendor.bundle.js:42457:15) [<root>]↵    at resolveReflectiveProviders (http://beterfysiek.nl/vendor.bundle.js:42408:39) [<root>]↵    at Function.ReflectiveInjector.resolve (http://beterfysiek.nl/vendor.bundle.js:82535:127) [<root>]↵    at Function.ReflectiveInjector.resolveAndCreate (http://beterfysiek.nl/vendor.bundle.js:82566:79) [<root>]↵    at JitCompilerFactory.createCompiler (http://beterfysiek.nl/vendor.bundle.js:76275:107) [<root>]↵    at PlatformRef_._bootstrapModuleWithZone (http://beterfysiek.nl/vendor.bundle.js:40647:57) [<root>]↵    at PlatformRef_.bootstrapModule (http://beterfysiek.nl/vendor.bundle.js:40634:21) [<root>]"__proto__: Object__proto__: BaseError
(anonymous) @ vendor.bundle.js:42468
_normalizeProviders @ vendor.bundle.js:42457
(anonymous) @ vendor.bundle.js:42465
_normalizeProviders @ vendor.bundle.js:42457
resolveReflectiveProviders @ vendor.bundle.js:42408
ReflectiveInjector.resolve @ vendor.bundle.js:82535
ReflectiveInjector.resolveAndCreate @ vendor.bundle.js:82566
JitCompilerFactory.createCompiler @ vendor.bundle.js:76275
PlatformRef_._bootstrapModuleWithZone @ vendor.bundle.js:40647
PlatformRef_.bootstrapModule @ vendor.bundle.js:40634
516 @ main.bundle.js:2053
__webpack_require__ @ inline.bundle.js:53
1118 @ main.bundle.js:6
__webpack_require__ @ inline.bundle.js:53
webpackJsonpCallback @ inline.bundle.js:24
(anonymous) @ main.bundle.js:1

My app.module

  import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { routing } from "./app.routing";
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { IntakeFormulierModule } from './intake-formulier/intake-formulier.module';
import { HomeModule } from './home/home.module';
import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';
import { firebaseConfig } from '../environments/firebase.config';
import { CookiesComponent } from './cookies/cookies.component';

const myFirebaseAuthConfig = {
  provider: AuthProviders.Password,
  method: AuthMethods.Password
};

@NgModule({
  declarations: [
    AppComponent,
    CookiesComponent,
  ],
  imports: [
    routing,
    HomeModule,
    IntakeFormulierModule,
    AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig),
    BrowserModule
  ],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

I used ng build --aot which gave me errors that ng build did not.

I had a problem with font awsome because it still was version 0.8.0 and it had to be 0.9.0. I updated it in my package.json file and i was back online again!