问题
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);
回答1:
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.
回答2:
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.
回答3:
Please Check that you have impotred the HttpClientModule in the app.module.ts .This may resolve
来源：https://stackoverflow.com/questions/52288263/angular-6-staticinjectorerror-platform-core-no-provider-for