我正在尝试使用webpack运行Angular应用程序，但是在应用程序启动过程中始终在浏览器控制台中出现此错误（似乎来自compile.js）：
Error: Can't resolve all parameters for ApplicationModule: (?)
我使用Angular CLI开始了我的解决方案，然后添加了自定义的webpack配置。我已经做了很多阅读，搜索，调整和反复试验的尝试，但是仍然不确定问题出在哪里。可能与开发服务器，我的webpack配置，babel或可能与core-js之类的东西有关，或者与我正在使用的依赖项有关。
我使用以下命令运行该应用程序：
webpack-dev-server --open --config webpack.dev.js
以下是我认为最重要的文件。我以为我的webpack配置可能是问题所在，但我不确定。
main.ts：
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'myapp';
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpack = require('webpack');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
webpack.common.js
const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
resolve: {
extensions: ['.ts', '.js', '.json']
},
module: {
rules: [
{
include: [path.resolve(__dirname, 'src')],
loader: 'babel-loader',
options: {
plugins: ['syntax-dynamic-import'],
presets: [
[
'@babel/preset-env',
{
modules: false
}
]
]
},
test: /\.js$/
},
{
test: /\.ts$/,
loader: 'ts-loader'
},
{
test: /\.(scss)$/,
use: [
'to-string-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
],
},
{
test: /\.(woff2?|ttf|eot|svg)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url-loader?limit=25000'
}
]
},
entry: {
app: './src/main.ts',
vendor: './src/vendor.ts',
polyfills: './src/polyfills.ts',
styles: './src/assets/app-theme.scss'
},
output: {
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].js',
publicPath: '/'
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
priority: -10,
test: /[\\/]node_modules[\\/]/
}
},
chunks: 'all',
minChunks: 1,
minSize: 30000,
name: true
},
minimizer: [new OptimizeCSSAssetsPlugin({})],
noEmitOnErrors: true
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'MyApp',
template: './src/indexTemplate.html',
inject: 'body',
favicon: './src/favicon.ico',
meta: { viewport: 'width=device-width, initial-scale=1' },
chunksSortMode: 'dependency'
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
]
};
polyfills.ts
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';
import 'core-js/es/promise';
import 'classlist.js';
import 'core-js/es/reflect';
import 'web-animations-js';
import 'zone.js/dist/zone';
package.json
{
"name": "myapp",
"version": "1.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/cdk": "^7.3.7",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/flex-layout": "^7.0.0-beta.24",
"@angular/forms": "~7.2.0",
"@angular/http": "^7.2.13",
"@angular/material": "^7.3.7",
"@angular/material-moment-adapter": "^7.3.7",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/platform-server": "^7.2.13",
"@angular/router": "~7.2.0",
"classlist.js": "^1.1.20150312",
"core-js": "3.0.1",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"rxjs": "~6.4.0",
"underscore": "^1.9.1",
"zone.js": "~0.9.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.8",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@types/jasmine": "~3.3.12",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~11.13.5",
"angular-router-loader": "^0.8.5",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^2.0.1",
"codelyzer": "~5.0.0",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"mini-css-extract-plugin": "^0.6.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"protractor": "~5.4.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.2.3",
"to-string-loader": "^1.1.5",
"ts-loader": "^5.3.3",
"ts-node": "~8.1.0",
"tslib": "^1.9.0",
"tslint": "~5.16.0",
"typescript": "3.2.2",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1",
"webpack-merge": "^4.2.1"
}
}