Angular 6 StaticInjectorError (Platform: core) Pas de fournisseur pour
J'ai un projet avec une version angular de 4. *.\*. J'ai essayé de mettre à jour le projet en versions 6 angular. J'ai corrigé toutes les erreurs) que le compilateur m'a dit lorsque je construis un prod. Il y en avait beaucoup. Maintenant, le projet se compile sans erreur, mais il ne fonctionne pas dans le navigateur. Et maintenant je suis bloqué. Quelqu'un peut-il m'aider avec ce problème?
Je pense que cela est en quelque sorte lié au chargement paresseux, mais je n'ai pas été en mesure de trouver une solution depuis longtemps.
Ajout d'un code qui peut aider dans la réponse. Si vous avez besoin d'autre chose, dites-le-moi.
Erreur:
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);
Activez la sortie détaillée en allant dans le fichier angular.json et en éditant le production: objet pour que: "aot": true, "optimization": false, "buildOptimizer": false.
Cela vous permettra de voir le journal des erreurs complet d'une manière plus détaillée (le code ne sera pas minimisé), donc probablement une solution facile.
Certains de vos modules importés provoquent probablement une erreur.
J'ai eu l'erreur similaire sur prod et je ne pouvais pas comprendre à partir de la sortie de la console où était l'erreur. Donc, après avoir lu ceci post j'ai lancé mon application avec ng serve --aot puis la console m'a montré quelle était l'erreur et où elle était.
Veuillez vérifier que vous avez impotred le HttpClientModule dans app.module.ts. Cela peut résoudre