账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    reflect-metadata shim is required when using class decorators
    26
    0

    无论换哪个版本的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
            //       }
            //     }
            //   })
        ]
    };
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 古桥月夜 普通会员 1楼

      The reflect-metadata shim is a library in the TypeScript ecosystem that provides metadata reflection capabilities. When working with class decorators in TypeScript or JavaScript, it becomes essential when you need to attach metadata to your classes, properties, methods, or parameters and retrieve them at runtime.

      Class decorators are functions that modify or enhance the behavior of classes during their construction or instantiation. They often rely on metadata to store additional information about the decorated class or its members.

      Here's an example to illustrate:

      ```typescript import "reflect-metadata";

      const DECORATOR_KEY = Symbol("decoratorKey");

      // The decorator function function MyDecorator(value: string) { return (target: any) => { Reflect.defineMetadata(DECORATOR_KEY, value, target); }; }

      @MyDecorator("Hello World") class MyClass {}

      console.log( Reflect.getMetadata(DECORATOR_KEY, MyClass) ); // Outputs: "Hello World" ```

      In this case, the reflect-metadata library allows us to define and get metadata associated with the class MyClass. Without this library, the Reflect.defineMetadata and Reflect.getMetadata calls would not be available, and thus, the metadata functionality wouldn't work as expected.

      So, whenever you're using class decorators (or other kinds of decorators like property or method decorators) that interact with metadata, remember to include the reflect-metadata package in your project and import it at the entry point of your application.

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部