title: Angular 6 StaticInjectorError (Platform: core) No provider for
body: <p>I have a project with a angular version of 4. *. \ *.
  I tried to update the project to 6 angular versions.
  I fixed all the errors that the compiler told me when I build a prod. There were a lot of them.
  Now the project compiles without errors, but it does not work in the browser.
  And now I'm stuck. Can someone help me with this problem?<br>
  I think this is somehow connected with lazy loading, but I have not been able to find a solution for a long time.<br>
  Added a code that can help in the answer. If you need something else, tell me.
  <br><br>
  <strong>Error:</strong></p>
  
  <pre><code>Uncaught Error: StaticInjectorError(Platform: core)[t]: 
    NullInjectorError: No provider for t!
      at t.get (app.cc6edb9a8a038b005e52.bundle.js:1)
      at O (app.cc6edb9a8a038b005e52.bundle.js:1)
      at C (app.cc6edb9a8a038b005e52.bundle.js:1)
      at t.get (app.cc6edb9a8a038b005e52.bundle.js:1)
      at t.bootstrapModule (app.cc6edb9a8a038b005e52.bundle.js:1)
      at Object.&lt;anonymous&gt; (app.cc6edb9a8a038b005e52.bundle.js:1)
      at n (polyfills.cc6edb9a8a038b005e52.bundle.js:1)
      at window.webpackJsonp (polyfills.cc6edb9a8a038b005e52.bundle.js:1)
      at app.cc6edb9a8a038b005e52.bundle.js:1
  </code></pre>
  
  <p><strong>webpack.config:</strong></p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  const fse = require('fs-extra')
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var CopyWebpackPlugin = require('copy-webpack-plugin');
  var CleanWebpackPlugin = require('clean-webpack-plugin');
  
  try {
      fse.copySync(
          './node_modules/primeng/components',
          './aot/node_modules/primeng/components',
          {
              overwrite: false,
              errorOnExist: false
          }
      );
  } 
  catch (err) {
      console.error(err)
  }
  
  module.exports = {
  
      entry: {
          'vendor': './angularApp/vendor.ts',
          'polyfills': './angularApp/polyfills.ts',
          'app': './angularApp/main-aot.ts' // AoT compilation
      },
  
      output: {
          path: path.resolve(__dirname, 'wwwroot'),
          filename: 'dist/[name].[hash].bundle.js',
          chunkFilename: 'dist/[id].[hash].chunk.js',
          publicPath: '/'
      },
  
      resolve: {
          extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
      },
  
      devServer: {
          historyApiFallback: true,
          stats: 'minimal',
          outputPath: path.join(__dirname, 'wwwroot/')
      },
  
      module: {
          rules: [
              {
                  test: /\.ts$/,
                  loaders: [
                      'awesome-typescript-loader',
                      'angular-router-loader'
                  ]
              },
              {
                  test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
                  loader: 'file-loader?name=assets/[name]-[hash:6].[ext]'
              },
              {
                  test: /favicon.ico$/,
                  loader: 'file-loader?name=/[name].[ext]'
              },
              {
                  test: /\.css$/,
                  loader: 'style-loader!css-loader'
              },
              {
                  test: /\.scss$/,
                  exclude: /node_modules/,
                  loaders: ['style-loader', 'css-loader', 'sass-loader']
              },
              {
                  test: /\.html$/,
                  loader: 'raw-loader'
              }
          ],
          exprContextCritical: false
      },
  
      plugins: [
          new CleanWebpackPlugin(
              [
                  './wwwroot/dist',
                  './wwwroot/assets'
              ]
          ),
          new webpack.NoEmitOnErrorsPlugin(),
          new webpack.optimize.UglifyJsPlugin({
              compress: {
                  warnings: false
              },
              output: {
                  comments: false
              },
              sourceMap: false
          }),
          new webpack.optimize.CommonsChunkPlugin(
              {
                  name: ['vendor', 'polyfills']
              }),
  
          new HtmlWebpackPlugin({
              filename: 'index.html',
              inject: 'body',
              template: 'angularApp/index.html'
          }),
  
          new CopyWebpackPlugin([
              { from: './angularApp/images/*.*', to: 'assets/', flatten: true }
          ]),
  
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery",
              'window.jQuery': 'jquery',
              'window.Tether': 'tether',
              tether: 'tether',
              Tether: 'tether',
              Popper: ['popper.js', 'default']
          })
      ]
  };
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>"dependencies": {
      "@angular/common": "^6.1.3",
      "@angular/compiler": "^6.1.3",
      "@angular/compiler-cli": "^6.1.3",
      "@angular/platform-server": "^6.1.3",
      "@angular/core": "^6.1.3",
      "@angular/forms": "^6.1.3",
      "@angular/http": "^6.1.3",
      "@angular/platform-browser": "^6.1.3",
      "@angular/platform-browser-dynamic": "^6.1.3",
      "@angular/router": "^6.1.3",
      "@angular/upgrade": "^6.1.3",
      "@angular/animations": "^6.1.3",
      "angular-in-memory-web-api": "0.6.1",
      "core-js": "^2.5.0",
      "reflect-metadata": "^0.1.10",
      "rxjs": "^6.2.2",
      "zone.js": "0.8.26",
      "ie-shim": "~0.1.0"
    },
    "devDependencies": {
      "@types/node": "7.0.22",
      "@types/jasmine": "2.5.47",
      "@types/file-saver": "0.0.0",
      "alertify.js": "^1.0.12",
      "file-saver": "^1.3.3",
  
      "angular2-template-loader": "0.6.2",
      "angular-router-loader": "^0.6.0",
      "awesome-typescript-loader": "^3.2.2",
      "clean-webpack-plugin": "^0.1.16",
      "concurrently": "^3.5.0",
      "copy-webpack-plugin": "^4.0.1",
      "css-loader": "^0.28.4",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.30.1",
  
      "json-loader": "^0.5.7",
      "node-sass": "^4.5.3",
      "raw-loader": "^0.5.1",
      "rimraf": "^2.6.1",
      "sass-loader": "^6.0.6",
      "source-map-loader": "^0.2.1",
  
      "style-loader": "^0.18.2",
      "ts-helpers": "^1.1.2",
      "tslint": "^5.5.0",
      "tslint-loader": "^3.5.3",
      "typescript": "2.7.2",
      "url-loader": "^0.5.9",
      "webpack": "^3.4.1",
      "webpack-dev-server": "^2.6.1",
      "jasmine-core": "^2.7.0",
      "karma": "^1.7.0",
      "karma-chrome-launcher": "^2.2.0",
      "karma-jasmine": "^1.1.0",
      "karma-sourcemap-loader": "0.3.7",
      "karma-spec-reporter": "^0.0.31",
      "karma-webpack": "^2.0.4",
  
      "bootstrap": "4.0.0-beta",
      "popper.js": "^1.12.5",
      "jquery": "^3.2.1",
      "jquery-ui-dist": "^1.12.1",
      "tether": "^1.4.0",
      "primeng": "^6.1.2",
      "font-awesome": "^4.7.0",
      "ng2-file-upload": "^1.2.1",
      "fs-extra": "7.0.0"
    }
  </code></pre>
  
  <p><strong>main-aot.ts:</strong></p>
  
  <pre><code>import { platformBrowser } from '@angular/platform-browser';
  import { enableProdMode } from '@angular/core';
  import { AppModule } from "./app/app.module";
  
  enableProdMode();
  const platform = platformBrowser();
  platform.bootstrapModule(AppModule);
  </code></pre>
  
  <p><strong>app.module.ts:</strong></p>
  
  <pre><code>// modules ------------------
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpModule } from '@angular/http';
  import { HttpClientModule } from '@angular/common/http';
  import { AppRoutes } from './app.routes';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { MainPipeModule } from './common/mainPipe.module';
  import { FilterModule } from './filter/filter.module';
  
  // components
  import { Configuration } from './app.constants';
  import { AppComponent } from './app.component';
  
  // services ----------------
  import { MembershipService } from './services/membership.service';
  import { DataService } from './services/data.service';
  import { NotificationService } from './services/notification.service';
  import { UtilityService } from './services/utility.service';
  import { User1cService } from './services/user1c.service';
  import { UserSystemService } from './services/userSystem.service';
  import { SchetFactureService } from './services/schetFacture.service';
  import { GraphicPaymentService } from './services/graphicPayment.service';
  
  @NgModule({
      imports: [
          BrowserModule,    
          BrowserAnimationsModule,
          FormsModule,
          AppRoutes,
          HttpModule,
          HttpClientModule,
          MainPipeModule,
          FilterModule,
      ],
      declarations: [
          AppComponent
      ],
      providers: [
          MembershipService, NotificationService,
          UtilityService, DataService, UserSystemService,
          User1cService,
          SchetFactureService,
          GraphicPaymentService,
          Configuration
      ],
      bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.routes.ts:</strong></p>
  
  <pre><code>import { Routes, RouterModule } from '@angular/router';
  
  const routes: Routes = [
      {
          path: '',
          redirectTo: '/zayavki',
          pathMatch: 'full'
      },
      { path: 'account', loadChildren: './account/account.module#AccountModule' },
      { path: 'zayavki', loadChildren: './zayavka/zayavka.module#ZayavkaModule' },
      { path: 'scheta', loadChildren: './schet/schet.module#SchetModule' },
      { path: 'graphic-payment', loadChildren: './graphicPayment/graphicPayment.module#GraphicPaymentModule' },
      { path: 'schet-facture', loadChildren: './schetFacture/schetFacture.module#SchetFactureModule' },
      { path: 'report', loadChildren: './reports/report.module#ReportModule' },
      { path: 'about', loadChildren: './about/about.module#AboutModule' },
      { path: 'realisation', loadChildren: './realisation/realisation.module#RealisationModule' },
      { path: 'storage', loadChildren: './storage/storage.module#StorageModule' },
  ];
  export const AppRoutes: any = RouterModule.forRoot(routes);
  </code></pre>