Error - Githubissues

alexKnysh commented 8 years ago

Hi! I use your library and get the following error in the browser console Can't resolve all parameters for RadioComponent: (ElementRef, ?).

I use webpakk + angular2 - rc6 + typescript 2.1.0 Image error: http://prntscr.com/cf837s

I use component

<date-time-picker
                        [fgd]="f"
                        field="birthday"
                        placeholder="Birthday">
                </date-time-picker>

and imports directives import {Component} from "@angular/core"; import {MATERIAL_FORM} from "ng2-material-components/ng2-material-components"; import {REACTIVE_FORM_DIRECTIVES, FormGroup} from "@angular/forms";

@Component({
    selector: 'interview',
    template: require("./interview.component.html"),
    styles: [`
.sign-btn{
    background: #6990b3;
}
.btn {
    text-transform: none;
    font-size: 14px;
    box-shadow: none;
    border-radius: 0;
    background: #68b0b4;
}
    .btn:hover {
        background: #68c0c5;
    }
    h2 {
        font-size: 24px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.866666666666667);
    }`
    ],

    directives:[
        REACTIVE_FORM_DIRECTIVES,
        MATERIAL_FORM
    ]
})

export class InterviewComponent  {
    public fg: FormGroup;
    public Caption: string = "Опрос"
}

webpack.config.js :

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var rimraf = require('rimraf');
var NotifierWebpackPlugin = require('webpack-notifier');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    debug: true,
    context: __dirname + '/',
    entry: {
        app: './Preventive/Card/Index/app.main.ts'
    },
    output: {
      // path: '../WebHealthcare/FE/Preventive/Card',
        path: __dirname + '/FE/Preventive/Card',
        publicPath: "../FE/Preventive/Card",
        filename: '[name].js',
        library: '[name]'
    },
    devtool: 'source-map',

    //
    resolve:{
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'],
        alias: {
            'inputmask.dependencyLib': './node_modules/jquery.inputmask/extra/dependencyLibs/inputmask.dependencyLib.jqlite.js',
            'inputmask': './node_modules/jquery.inputmask/dist/inputmask/inputmask.js'
        }
    },
    // watch: true,
    watchOptions: {
        aggregateTimeout: 1
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts', 'angular2-template-loader'],
                exclude: /node_module/
            },
            {
                test: /\.html$/,
                loader: 'raw'
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loader: 'raw-loader!style-loader!css-loader!sass-loader'
            },
            {
                test: /\.css$/,
                //exclude: /node_modules/,
                loader: "style!css"
            },
            /*{
             test: /\.(jpe?g|png|gif|svg)$/i,
             loaders: [
             'file?hash=sha512&digest=hex&name=[hash].[ext]',
             'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
             ]
             },
             {
             test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
             loader: 'file?name=[name].[ext]'
             },*/
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loader: 'raw-loader!style-loader!css-loader!sass-loader'
            },
        ]
    },
    ts: {
        transpileOnly: true,
        compilerOptions: {
            declaration: false,
        },
    },

    plugins: [
        //красивое уведомление.
        new NotifierWebpackPlugin(),
        //очистка всего перед сборкой (выходных фаилов)
        {
            apply: function (compiler) {
                rimraf.sync(compiler.options.output.path);
            }
        },
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery',
            Hammer: "hammerjs/hammer",
            "window.jQuery": "jquery"
        }),
        new CleanWebpackPlugin([
            './FE'
        ]),
        new HtmlWebpackPlugin({
           template: './Preventive/Card/Index/Index.html'
        }),
        new CopyWebpackPlugin([
            {from: 'js/*', to: '../../'},
            {from: 'libs/**', to: '../../'},
            {from: 'Preventive/Card/img/*.*', to: '../../'},
            /*{from : 'node_modules/primeui/**',
                to:'../../'},*/

        ])
    ],
}

Thank you!

orlaqp commented 8 years ago

Hi @cyberat thanks for reporting this issue. I am looking into, I will get back to you soon. Can you tell me which version are you using?

orlaqp commented 8 years ago

I saw this issue in the past but I cannot reproduce it it. Is there any way you can prepare a small repo for me? At this point I am not able to reproduce it. Also please note that I have not tested the library with any version other than RC4

orlaqp commented 8 years ago

Hello @cyberat I just refactored the way radio button groups work. At this point I do not rely in ForwardRef any more. Please get latest and give it a try.

Thanks!

alexKnysh commented 8 years ago

Hi! I have use version library "ng2-material-components": "0.0.18". I install yesterday comands:

npm i ng2-material-components

My packege.json view:

{
  "name": "application-name",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack --progress",
    "build:prod": "webpack -p --progress",
    "postinstall": "typings install",
    "serve": "webpack-dev-server --inline  --progress"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.5",
    "@types/hammerjs": "^2.0.32",
    "angular2-materialize": "^5.1.0",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "hammerjs": "^2.0.8",
    "jquery": "^2.2.4",
    "materialize": "^1.0.0",
    "materialize-css": "^0.97.7",
    "ng2-bootstrap": "^1.0.24",
    "ng2-datetime": "^1.1.5",
    "ng2-material": "^0.6.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "@angular2-material/button": "^2.0.0-alpha.8-1",
    "@angular2-material/button-toggle": "^2.0.0-alpha.8-1",
    "@angular2-material/card": "^2.0.0-alpha.8-1",
    "@angular2-material/checkbox": "^2.0.0-alpha.8-1",
    "@angular2-material/core": "^2.0.0-alpha.8-1",
    "@angular2-material/grid-list": "^2.0.0-alpha.8-1",
    "@angular2-material/icon": "^2.0.0-alpha.8-1",
    "@angular2-material/input": "^2.0.0-alpha.8-1",
    "@angular2-material/list": "^2.0.0-alpha.8-1",
    "@angular2-material/menu": "^2.0.0-alpha.8-1",
    "@angular2-material/progress-bar": "^2.0.0-alpha.8-1",
    "@angular2-material/progress-circle": "^2.0.0-alpha.8-1",
    "@angular2-material/radio": "^2.0.0-alpha.8-1",
    "@angular2-material/sidenav": "^2.0.0-alpha.8-1",
    "@angular2-material/slide-toggle": "^2.0.0-alpha.8-1",
    "@angular2-material/slider": "^2.0.0-alpha.8-1",
    "@angular2-material/tabs": "^2.0.0-alpha.8-1",
    "@angular2-material/toolbar": "^2.0.0-alpha.8-1",
    "@angular2-material/tooltip": "^2.0.0-alpha.8-1",
    "@types/hammerjs": "^2.0.32",
    "angular2-materialize": "^5.1.0",
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.1",
    "clean-webpack-plugin": "^0.1.10",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.23.1",
    "css-raw-loader": "^0.1.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.17.0",
    "image-webpack-loader": "^2.0.0",
    "materialize-css": "^0.97.7",
    "ng2-bootstrap": "^1.0.24",
    "ng2-datetime": "^1.1.5",
    "ng2-material-components": "0.0.18",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.2",
    "tsd": "^0.6.5",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-notifier": "^1.4.0"
  }
}

The test project will do a little bit later.

Thanks!

orlaqp commented 8 years ago

I released a new version yesterday. Can you install latest and give it a try? Thanks.

orlaqp commented 8 years ago

I hope your issue has been fixed. In the meantime I am closing it because I have not received any more feedback from you. Please contact me back if the issue is still happening.

alexKnysh commented 8 years ago

Hi!Im sorry, all right, this problem has been resolved. There was another error. I tried to connect your library but I do not why that does not come out. The project is attached.https://github.com/cyberat/testNg2.git or https://github.com/cyberat/testNg2. Please tell me what I'm doing wrong. Thanks! 12.09.2016, 15:26, "Orlando Quero" notifications@github.com:I hope your issue has been fixed. In the meantime I am closing it because I have not received any more feedback from you. Please contact me back if the issue is still happening.—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread. --С уважением,Кныш Александрмоб. +7 (951)-766-17-07knysh.sasha@yandex.ru

orlaqp commented 8 years ago

Hi @cyberat please create a template from a tested template, maybe this one: https://github.com/AngularClass/angular2-webpack-starter and try the library again. The issue you are having there looks like a configuration issue with your webpack config and missing packages. Use the template I pasted above and try again. It should work

orlaqp / ng2-material-components

Error #1