web-dev-qa-db-ja.com

Angular 6 StaticInjectorError（プラットフォーム：コア）のプロバイダーなし

angularバージョン4のプロジェクトがあります。*。\ *。プロジェクトを6 angularバージョンに更新しました。すべてのエラーを修正しましたprodをビルドしたときにコンパイラーが教えてくれたものです。多くのものがありました。プロジェクトはエラーなしでコンパイルされましたが、ブラウザーでは機能しません。そして、スタックしました。誰かがこの問題を手伝ってくれませんか？
これは遅延読み込みに何らかの形で関連していると思いますが、長い間解決策を見つけることができませんでした。
回答に役立つコードを追加しました。他に必要な場合は教えてください。

エラー：

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);
angulartypescriptlazy-loadingaot
4
Valentin Karpov

angular.jsonファイルに移動し、production:オブジェクトを編集して詳細な出力を有効にします："aot": true、"optimization": false、"buildOptimizer": false。

これにより、完全なエラーログをより詳細に確認できるようになり（コードは最小化されません）、したがっておそらく簡単に修正できます。

インポートしたモジュールの一部がエラーを引き起こしている可能性があります。

13
Milan Velebit

Prodで同様のエラーが発生し、コンソール出力からエラーの場所を理解できませんでした。したがって、これを読んだ後 postng serve --aotその後、コンソールにエラーの内容と場所が表示されました。

6
Roman

App.module.tsにHttpClientModuleが埋め込まれていることを確認してください。これで解決する場合があります

1
Harsh Garg