Webpack 2未加载Angular2 Typescript应用程序的导入

Droxx

我正在尝试在使用打字稿的中等大小的angular2项目上实现webpack。但是,当我运行webpack时,它只会捆绑我在配置文件中指定的2个文件。它从不遍历导入树并加载其余模块。

我已经建立了一个相当简单的配置。我想让它只是捆绑打字稿开始。然后,我将继续捆绑更多的文件。

当我将import {}从“ x”语法更改为var {} = require(“ x”)时webpack可以工作,但是会抛出数百个错误,因为它无法解析从@ angular2目录导入的任何内容。

如何使webpack遍历“导入”语句并将多个文件捆绑到结果中?

我的配置如下。

webpack.config.js

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

module.exports = {
    context: path.join(__dirname, 'wwwroot/app'),
    entry: {
        'vendor': './vendor',
        'app': './main'
    },
    resolve: {
        extensions: ['', '.ts', '.js']
    },
    output: {
        path: path.join(__dirname, 'wwwroot/built'),
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loaders: ['ts', 'angular2-template-loader']
            }
        ]
    }
};

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "wwwroot/lib",
    "bin"
  ]
}

主要

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

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

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    disableDeprecatedForms(),
    provideForms()
]).catch(err => console.error(err));

正在运行的webpack上的控制台输出:

10% building modules 0/2 modules 2 active ...\src\wwwroot\app\main.tsts-loader: Using [email protected] and C:\BitBucket\src\tsconfig.json
8831ms building modules
1ms sealing
1ms optimizing
0ms basic module optimization
1ms module optimization
1ms advanced module optimization
0ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
1ms module reviving
0ms module order optimization
1ms module id optimization
1ms chunk reviving
0ms chunk order optimization
1ms chunk id optimization
8ms hashing
0ms module assets processing
5ms chunk assets processing
4ms additional chunk assets processing
2ms recording
0ms additional asset processing
1ms chunk asset optimization
1648ms asset optimization
10ms emitting
Hash: 8a864382625d5d236939
Version: webpack 2.1.0-beta.21
Time: 10640ms
           Asset     Size  Chunks             Chunk Names
vendor.bundle.js  3.21 kB       0  [emitted]  vendor
   app.bundle.js  3.81 kB       1  [emitted]  app
    + 2 hidden modules
萧敬腾

尝试module更改systemcommonjs,如下所示:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs", // <--- from 'system' to 'commonjs'
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "wwwroot/lib",
    "bin"
  ]
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何提高Angular2应用程序的加载性能?

如何从webpack angular2应用程序中的node_modules导入CSS

如何部署Angular 2 + Typescript + Webpack应用

如何在Angular 2 Webpack应用程序中导入jQuery ui touch Punch?

在Angular2中禁用应用程序加载/路由

无法使用Angular2和Webpack加载静态图像

将Automapper导入angular2 Webpack项目

如何部署到Azure上的Angular2 +的WebPack应用程序?

Angular2,Angular-cli,Webpack-产品部署后,图像资产未加载到github:页面上

使用Webpack优化Angular 2应用程序的构建时间

如何在webpack中使用angular-cli在angular2应用程序中导入xml2js

Angular2应用程序:由于Google未加载页面内容而获取

如何在Angular + Webpack + Heroku应用程序中加载应用程序之前包括CSS

如何在webpack应用程序中包含对angular 2材质进行主题设置。(JHipster)?

使用Webpack在TypeScript React应用程序中导入SVG

无法加载Vue Webpack内置应用程序的辅助脚本

直接在应用程序(webpack)的入口点导入文件加载器。感叹号是什么?

Angular2未在Cordova应用程序中加载

在MVC 5 Angular 2应用程序中使用Webpack

使用Webpack将PrimeNG添加到Angular2应用程序

使用Webpack加载在TypeScript中导入angular

在公共服务器上使用webpack应用程序发布angular2

带有Webpack的Angular2预引导程序加载屏幕(启动屏幕)

更改后无法加载 Angular2 webpack/hmr

Webpack 2 / TypeScript 2 升级到 Angular 1 TypeScript 1.8 应用程序 - 视图无法正确显示

Webpack - CommonsChunkPlugin(lib 构建),common.js 未加载到父应用程序中

Django 应用程序尚未加载:如何导入模型

使用 webpack 构建 angular 6 应用程序时出错

Bootstrap-vue 不加载 CSS webpack 应用程序