小编shu*_*hun的帖子

当我捆绑主文件时,我使用webpack捆绑我的角度2项目.文件太大,文件大小约为8M.然后每当我刷新页面时,浏览器都会有很长时间加载并执行javascript文件.我认为可能有太多我不需要的文件,但我怎样才能找到它并将其从我的捆绑文件中删除？谢谢你给我一些建议或帮助.

这是我的webpack配置的主要部分:webpack.common.js:

const webpack = require('webpack');
const helpers = require('./helpers');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;

module.exports = {
    baseUrl: './',
    entry: {
        // 'polyfills': './src/polyfills.ts',
        // 'vendor': './src/vendor.ts',
        'main': './src/main.ts'
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json'],
        root: helpers.root('src'),
        modulesDirectories: ['node_modules'],
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.css$/,
                loaders: ['raw-loader']
            },
            {
                test: /\.html$/,
                loader: 'raw-loader',
                exclude: [helpers.root('src/index.html')]
            },
            { …

我使用angular2 rxjs来测试它的多播功能,这是我的代码:

var source = Observable.from([1, 2, 3]);
var subject = new Subject();
var multicasted = source.multicast(subject);

// These are, under the hood, `subject.subscribe({...})`:
multicasted.subscribe({
    next: (v) => console.log('observerA: ' + v)
});
multicasted.subscribe({
    next: (v) => console.log('observerB: ' + v)
});

// This is, under the hood, `source.subscribe(subject)`:
multicasted.connect();

我收到了错误信息:

"Subject <{}>"类型的参数不能分配给类型的参数

'Subject<number> | (() => Subject<number>)'.
        Type 'Subject<{}>' is not assignable to type '() => Subject<number>'.
        Type 'Subject<{}>' provides no match for the signature '(): Subject<number>'

我只是将我的ng2应用程序从rc.4升级到rc.5.我app.html中的内容是:

<div>
    <switch-app [account]="cache.accountInfo" [app]="cache.current_app">
    <router-outlet></router-outlet>
</div>

我在app.module.ts声明SwitchAppComponent:

@NgModule({
    imports: [
    ]
    declarations: [
        SwitchAppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

然后发生了这个错误:

More than one component: AppComponent,SwitchAppComponent

[ERROR ->]<switch-app [account]="cache.accountInfo" [app]="cache.current_app"></switch-app>

我检查了我的应用程序,AppComponent和SwitchAppComponent的选择器是不同的.

这里是两个组件的简要代码:app-component:

@Component({
    selector: '[app]',
    styleUrls: ['./app.css', './custom.scss'],
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.html'
})
export class AppComponent extends CommonComponent implements OnInit {

    cache = cache;
}

switch-app组件:

@Component({
    selector: 'switch-app',
    templateUrl: './switch-app.html'
})
export class SwitchAppComponent implements OnInit {
    @Input('app') app;
    @Input('account') account;
    ngOnInit() { console.log(this.account, this.app);} …