Question

这是针对角度（rc4）的最新版本。我一直在遵循指南，使用带有角度2的webpack Angular 2 Webpack intro。使用webpack打包时没有明显的错误。关于删除未使用变量的一些警告。该网站确实似乎在我的许多组件加载时引导，但并非所有组件都正确加载。我收到以下错误

未捕获的ReferenceError：未定义系统

除了许多没有任何意义的REST错误。我在端口8080上本地运行webpack-dev-server，但我不确定它为什么要尝试对它执行REST调用。我正在某些组件中对另一台机器进行休息调用，但这些没有被解雇。

POST http://localhost:8080/undefinedsession 404（未找到）

我的webpack配置与angular doc中的示例非常相似。我已经在使用

了

"module": "commonjs",

在我的tsconfig.json中（如建议的here）。请注意，在我的vendor.ts中，我已经注释掉了许多对systemjs模块的引用。来自angular doc的例子说他们被移除而不是webpack。当我包含它们时，我仍然看到系统未定义错误，以及其他错误

./〜/ systemjs / DIST / system.src.js 关键依赖关系：1642：42-49要求函数以某种方式使用哪些依赖项无法静态提取

其他人有这个问题吗？

这是我的webpack.common.js：

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

module.exports = {
    entry: {
        'polyfills': './app/polyfills.ts',
        'vendor': './app/vendor.ts',
        'app': './app/main.ts'
    },

    resolve: {
        extensions: ['', '.js', '.ts', '.config'],
        root: [path.resolve('./')]
    },

    node: {
        fs: "empty"
    },

    module: {
        loaders: [
          {
              test: /\.ts$/,
              loaders: ['ts', 'angular2-template-loader']
          },
          {
              test: /\.html$/,
              loader: 'html'
          },
          {
              test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
              loader: 'file?name=assets/[name].[hash].[ext]'
          },
          {
              test: /\.config$/,
              loader: 'file'
          },
          {
              test: /\.css$/,
              exclude: helpers.root('src', 'app'),
              loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
          },
          {
              test: /\.css$/,
              include: helpers.root('src', 'app'),
              loader: 'raw'
          }
        ]
    },

    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name: ['app', 'vendor', 'polyfills']
      }),

      new HtmlWebpackPlugin({
          template: 'index.html'
      })
    ]
};

这是webpack.dev.js：

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: helpers.root('dist'),
        publicPath: 'http://localhost:8080/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
      new ExtractTextPlugin('[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

请注意，我已经设置了三个与angular doc一致的条目文件。以下是完整性

Main.ts：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { HTTP_BINDINGS, HTTP_PROVIDERS } from '@angular/http';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import 'rxjs/Rx';

import { enableProdMode, provide, PLATFORM_DIRECTIVES } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { Title } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppSettingsService } from './app.settings';
import { APP_ROUTER_PROVIDERS } from './app.routes';

// css
import 'css/material.blue_grey-blue.min.css';
import 'css/styles.css';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_BINDINGS,
    HTTP_PROVIDERS,
    Title,
    AppSettingsService,
    disableDeprecatedForms(),
    provideForms(),
    provide(PLATFORM_DIRECTIVES, { useValue: [ROUTER_DIRECTIVES], multi: true })
]).catch((err: any) => console.error(err));

polyfills.ts：

import 'core-js/es6';
import 'reflect-metadata';

require('zone.js/dist/zone');

if (process.env.ENV === 'production') {
    // Production
} else {
    // Development
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

vendor.ts：

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs';

// From index.html
import 'js/material.js';

//import 'node_modules/core-js/client/shim.min.js';
//import 'node_modules/zone.js/dist/zone.js';
//import 'node_modules/reflect-metadata/Reflect.js';
//import 'node_modules/systemjs/dist/system.src.js';
//import 'systemjs.config.js';

Angular 2 with webpack - Uncaught ReferenceError：未定义系统

0 个答案: