reflect-metadata shim is required when using class decorators

lightman0215
  • 49

无论换哪个版本的angular,就一直报这个错,polyfills.ts明明Import了reflect-metadata还是报这个错

package.json:

"dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@angular/router": "^4.4.6",
    "core-js": "^2.5.1",
    "rxjs": "5.4.3",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^4.0.0",
    "@angularclass/hmr-loader": "3.0.4",
    "@types/jasmine": "2.5.43",
    "@types/node": "6.0.45",
    "angular2-template-loader": "0.6.2",
    "autoprefixer-loader": "3.2.0",
    "awesome-typescript-loader": "3.0.4",
    "css-loader": "0.26.1",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "0.9.0",
    "font-awesome": "4.7.0",
    "html-loader": "0.4.3",
    "html-webpack-plugin": "2.28.0",
    "image-webpack-loader": "3.4.2",
    "postcss-loader": "1.3.1",
    "raw-loader": "0.5.1",
    "reflect-metadata": "^0.1.10",
    "style-loader": "0.13.1",
    "to-string-loader": "1.1.5",
    "ts-helpers": "1.1.2",
    "tslint": "5.3.2",
    "typescript": "2.3.3",
    "uglify-es": "3.2.0",
    "uglify-js": "3.2.0",
    "uglifyjs-webpack-plugin": "1.0.0-rc.0",
    "url-loader": "0.5.7",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.5",
    "webpack-merge": "4.1.1"
  }

polyfills.ts:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js';
import 'reflect-metadata';

webpack.config.js

const webpack = require('webpack');
const path = require("path");
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ROOT_PATH = path.resolve(__dirname);
const BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
    entry: {
        'polyfills.vendor': './src/polyfills.ts',
        'app.vendor': './src/vendor.ts',
        'app.bundle': './src/app/main.ts'
    },
    output: {
        path: path.resolve(BUILD_PATH),
        filename: 'js/[name].js'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.json$/,
                use: 'json-loader'
            },
            {
                test: /\.styl$/,
                loader: 'css-loader!stylus-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: "css-loader"
                })
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: "file-loader?name=./images/[name].[ext]"
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: "url-loader?limit=10000&minetype=application/font-woff?name=./fonts/[name].[ext]"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: "file-loader?name=./fonts/[name].[ext]"
            },
            {
                test: /\.html$/,
                loader: "raw-loader"
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery'
        }),
        new CommonsChunkPlugin({
            name: ['polyfills.vendor','app.vendor']
        }),
        new ExtractTextPlugin("./css/[name].css"),
        new HtmlWebpackPlugin({
            template: './src/app/index.html'
        }),
        // new UglifyJsPlugin({
        //     sourceMap:false,
        //     uglifyOptions: {
        //       ie8: false,
        //       ecma: 8,
        //       output: {
        //         comments: false,
        //         beautify: false,
        //       },
        //       compress:{
        //         warnings: false,
        //         drop_debugger: true,
        //         drop_console: true
        //       }
        //     }
        //   })
    ]
};
回复
阅读 3.3k
2 个回答

最终还是自己解决了

main.ts里面没有引入polyfills.ts

宣传栏