These are chat archives for AngularClass/angular2-webpack-starter

20th
May 2016
Yannick
@LPalmito
May 20 2016 09:28
This is an extract of my package.json @TheLarkInn (in order for you to see my webpack version):
    "webpack": "^1.12.11",
    "webpack-dev-server": "^1.14.1",
    "webpack-stream": "^3.1.0",
    "webpack-vendor-chunk-plugin": "^1.0.0”

I’m not sure to understand what you mean by "setting up CommonsChunkPlugin incorrectly”, what are the things I can set in CommonsChunkPlugin, and how can I do that?
Anyway, in the meantime I’ve changed my webpack.config.js to this:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        app: './app/boot.ts',
        vendor: './vendor.ts'
    },
    output: {
        path: 'bin',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor', 'deps.js'),
        new webpack.optimize.UglifyJsPlugin({
            // disable mangling due to bug in beta.1, beta.2, beta.3
            comments: false,
            compress: {
                screw_ie8 : true,
                warnings: false
            },
            sourceMap: false
        })
    ],
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' },
            { test: /\.html$/, loader: 'raw-loader' },
            { test: /\.css$/, loader: 'raw-loader' }
        ],
        noParse: [
            path.join(__dirname, 'node_modules', 'angular2', 'bundles')
        ]
    }
};

and I don’t have the webpackJsonp is not defined error, but this one instead:

Uncaught reflect-metadata shim is required when using class decorators

Thanks a lot for your help!

yjaaidi
@yjaaidi
May 20 2016 10:29
Hi all !
It would be nice to have an example using angular2 from cloudflare CDN for example.
is anyone able to do this?
Sean Larkin
@TheLarkInn
May 20 2016 13:35
@LPalmito when you use CommonsChunkPlugin the strings you pass it must be the string key names of your entry property. So deps.js Disney exist as an entry. What happens if you remove it. Do you still get that error?
Yannick
@LPalmito
May 20 2016 13:38

In the meantime I’ve modified my webpack.config.json as following:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: {
        'polyfills': './polyfills.ts',
        'vendor': './vendor.ts',
        'app': './app/boot.ts'
    },
    output: {
        path: 'bin',
        publicPath: 'http://localhost:8080/',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    module: {
        loaders: [
            {test: /\.ts$/, loader: 'ts'},
            {test: /\.html$/, loader: 'html'},
            {test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file?name=assets/[name].[hash].[ext]'},
            {test: /\.css$/, exclude: helpers.root('app'), loader: ExtractTextPlugin.extract('style', 'css?sourceMap')},
            {test: /\.css$/, include: helpers.root('app'), loader: 'raw'}
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: ['app', 'vendor', 'polyfills']}),
        new HtmlWebpackPlugin({template: './index.html'}),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('[name].css')
    ],
    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
};

and I’m not getting this error anymore @TheLarkInn (so it’s progressing, I guess!), but this one is appearing instead:

Cannot resolve all parameters for 'DeviceService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'DeviceService' is decorated with Injectable.

It looks like it’s coming from the way I’m importing my services but I’m not sure about it, what do you think I’m missing here?

Sean Larkin
@TheLarkInn
May 20 2016 13:51
Can you show me the DeviceService class
Yannick
@LPalmito
May 20 2016 13:53
Sure, but I don’t think it’s coming from here:
@Injectable()
export class DeviceService  {
    devices: Observable<Array<Device>>;

    constructor(private http:Http) {
        this.devices = checkBeforeRequest(Observable.interval(500)
            .switchMapTo(this.http.get(server))
            .map(res => (<Response>res).json()));
    }

    getDevices() {
        return this.devices;
    }

//… And other stuffs not here for the sake of brevity
Here is my boot:
bootstrap(App, [
    provide(APP_BASE_HREF, {useValue: BASE_URL}),
    ROUTER_PROVIDERS, HTTP_PROVIDERS, MATERIAL_PROVIDERS,
    DeviceService, AggregatorService, SplitterService, MeterService,
    provideStore({
        aggregators,
        splitters,
        counters,
        areas,
        selectedArea,
        selectedBuilding,
        selectedMeter,
        moreSplitters,
        selectedCounterId,
        evenMoreSplitters,
        countersMeters
    }),
    localStorageMiddleware([
        'aggregators',
        'splitters',
        'counters',
        'areas',
        'selectedArea',
        'selectedBuilding',
        'selectedMeter',
        'moreSplitters',
        'selectedCounterId',
        'evenMoreSplitters',
        'countersMeters'
    ], true)
])
    .catch(err => console.error(err));
I’m showing you the boot because according to the things I’ve found it looks like my error is coming from the boot
If I delete DeviceService from the boot, I’ve got a similar error on the AggregatorService, so I think it’s only because it’s the first in my list of arguments @TheLarklnn
Sean Larkin
@TheLarkInn
May 20 2016 14:52
Hmmm. Is there a component it references that is using the DeviceService?
Well I guess like you said its not specific to the Device Service really. I guess you could try pulling out service until you find the "turd in the punchbowl" or the "bad apple".