Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 6 StaticInjectorError (Platform: core) No provider for

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?
I think this is somehow connected with lazy loading, but I have not been able to find a solution for a long time.
Added a code that can help in the answer. If you need something else, tell me.

Error:

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.<anonymous> (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

webpack.config:

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']
        })
    ]
};

package.json

"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"
  }

main-aot.ts:

import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModule } from "./app/app.module";

enableProdMode();
const platform = platformBrowser();
platform.bootstrapModule(AppModule);

app.module.ts:

// 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 { }

app.routes.ts:

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);
like image 222
Valentin Karpov Avatar asked Sep 12 '18 05:09

Valentin Karpov


2 Answers

Enable the detailed output by going into angular.json file and editing the production: object so that: "aot": true , "optimization": false, "buildOptimizer": false.

This will enable you to see the full error log in a more detailed manner (the code won't be minimized), hence probably an easy fix.

Some of your imported modules are probably causing an error.

like image 98
Milan Velebit Avatar answered Sep 20 '22 04:09

Milan Velebit


I had the similar error on prod and I couldn't understand from the console output where was the error. So after I had read this post I launched my app with ng serve --aot and then console showed me what the error was and where it was.

like image 39
Roman Avatar answered Sep 20 '22 04:09

Roman