Angular 6 StaticInjectorError (Платформа: ядро) Нет поставщика для - PullRequest
0 голосов
/ 12 сентября 2018

У меня есть проект с угловой версией 4. *.\ *Я пытался обновить проект до 6 угловых версий.Я исправил все ошибки, которые сказал мне компилятор при сборке продукта.Их было много.Сейчас проект компилируется без ошибок, но он не работает в браузере.И теперь я застрял.Может ли кто-нибудь помочь мне с этой проблемой?
Я думаю, это как-то связано с отложенной загрузкой, но я долго не мог найти решение.
Добавил код, который может помочь в ответе.Если тебе нужно что-то еще, скажи мне.

Ошибка:

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);

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

У меня была похожая ошибка на prod, и я не мог понять из вывода консоли, где была ошибка.Поэтому после прочтения этой записи я запустил свое приложение с ng serve --aot, а затем консоль показала мне, что это за ошибка и где она была.

0 голосов
/ 15 сентября 2018

Включите подробный вывод, перейдя в файл angular.json и отредактировав объект production: так, чтобы: "aot": true, "optimization": false, "buildOptimizer": false.

Это позволит вам увидеть полный журнал ошибок более детально (код не будет свернут), поэтому, вероятно, это легко исправить.

Некоторые из ваших импортированных модулей, вероятно, вызывают ошибку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...