angular-cli を使用せずに作成した node.js-angular7-webpack4.21 アプリをローカルで実行すると、ブラウザーに次のエラーが表示されます。
Error: Can't resolve all parameters for Location: (?).
私はこの問題を広範囲に調査しました。まず、「場所」という名前のコンポーネント、サービス、またはその他の名前がないため、コンパイラがどのエンティティのパラメーターを解決するのに苦労しているのかわかりません。2 つ目は、アプリ全体でサービスが 4 つしかないことです。これらのサービスはいずれも相互に関連していないため、これは循環依存の問題ではありません。「@Injectable()」デコレータをどちらのサービス ファイルにも正しく配置することを忘れませんでした。実際、3 重と 8 重のチェックの後では、これは問題ではありません。
さらに、0 個のサービスで構成される空の angular6 プロジェクトと、テンプレートの div 内に単語だけを持つ 1 つのコンポーネントのみで構成される空の angular6 プロジェクトでこの問題を再現しました。この場合、「Location」ではなく「ApplicationModule」についてのみ同じエラーが発生します。したがって、webpackエラーはありませんが、問題はwebpack構成にあると想定しているため、webpack.config.jsおよびtsconfig.jsファイルを以下に配置します。誰かがそれらについて非常にばかげたことを見つけることができることを願っています.
ここに私の tsconfig.json があります:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "es2017", "es5", "es6", "es7"],
"outDir": "dist",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false,
"typeRoots": ["types"],
"types": ["node"]
},
"exclude": ["node_modules"]
}
そして、ここに私のwebpack.config.jsがあります:
var webpack = require('webpack');
var helpers = require('./helpers');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path'); // needed ?
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: {
'main': helpers.root('app/main.ts'),
'vendor': helpers.root('vendor.ts'),
'polyfills': helpers.root('polyfills.ts')
},
output: {
path: helpers.root('dist'),
filename: '[name].js'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [{
test: /\.ts$/,
use: [{
loader: 'awesome-typescript-loader',
options: {
configFileName: helpers.root('tsconfig.json')
}
}, 'angular2-template-loader?keepUrl=true']
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
// 'to-string-loader',
'css-loader'
],
exclude: [helpers.root('stylesheets')]
},
{
test: /\.css$/,
use: 'raw-loader',
include: [helpers.root('stylesheets')]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "main.css"
}),
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
// For Angular 5, see also https://github.com/angular/angular/issues/20357#issuecomment-343683491
/\@angular(\\|\/)core(\\|\/)fesm5/,
helpers.root('app'), // location of your src
{
// your Angular Async Route paths relative to this root drectory
}
)
]
};
君たちありがとう。