Ошибка: не удается разрешить все параметры для местоположения: (?) В приложении angular7 webpack - PullRequest
Новая
       27

Ошибка: не удается разрешить все параметры для местоположения: (?) В приложении angular7 webpack

0 голосов
/ 20 октября 2018

В моем браузере появляется следующая ошибка при локальном запуске приложения 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
            }
        )
    ]

};

Спасибо, ребята.

1 Ответ

0 голосов
/ 19 ноября 2018

У меня была эта проблема при обновлении углового 6.1.10 до 7.0.6 и вебпак 4.19.1.Я сделал некоторые изменения, описанные в этом ответе, и это сработало.Короче говоря:

Добавьте к вашему polyfill.ts

import 'core-js/es7/reflect';

Надеюсь, это поможет.

...