Ошибка: не удается разрешить все параметры для местоположения: (?) В приложении angular7 webpack
В моем браузере появляется следующая ошибка при локальном запуске приложения node.js-angular7-webpack4.21, которое я НЕ создал с помощью angular-cli:
Error: Can't resolve all parameters for Location: (?).
Я тщательно исследовал проблему. Во-первых, у меня нет какого-либо компонента, службы или другого объекта с именем "Location", поэтому я понятия не имею, с какими параметрами объекта компилятор сталкивается с трудностями при разрешении. Во-вторых, у меня всего 4 приложения во всем приложении, ни один из которых не указывает друг на друга, так что это не проблема круговой зависимости. Я также не забыл правильно поместить декоратор @Injectable() в любой служебный файл. Действительно, после тройной и восьмикратной проверки это не проблема.
Более того, я воспроизвел эту проблему с пустым проектом angular6, состоящим из 0 сервисов и только 1 компонента, содержащего только слова внутри div в его шаблоне, и в этом случае я получаю ту же ошибку только о "ApplicationModule" вместо "Location". Поэтому, даже если у меня нет ошибок веб-пакетов, я предполагаю, что проблема заключается в конфигурации моего веб-пакета, поэтому я приведу ниже файлы 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
}
)
]
};
Спасибо вам, ребята.
2 ответа
У меня была эта проблема при обновлении углового 6.1.10
в 7.0.6
и веб-пакет 4.19.1
, Я сделал некоторые изменения, описанные в этом ответе, и это сработало. Короткий:
Добавьте к вашему polyfill.ts
import 'core-js/es7/reflect';
Надеюсь, это поможет.
Попробуйте удалить или обновить
reflect-metadata
из пакета.json
В моем случае я удалил его из файла и переустановил модули узлов с нуля. Обратите внимание, что для предотвращения артефактов конфликтующих модулей вам, возможно, придется удалить
package.json.lock
также
rimraf node_modules
npm i