Javascript ASP.NET MVC网站，包括npm、网页包和angular2？

随着所有这些javascript模块加载器的出现，我正试图了解在我的ASP.NET MVC web应用程序中使用Webpack设置Angular 2所需的配置。以下是我所知道的（有待更正）：

• Webpack是一个模块加载器。因此，通过将

  webpack.config.js

  文件指向我的Angular应用程序，它将能够捆绑我的整个Angular 2应用程序，并让它输出一个文件，我可以导入我的HTML
• npm使我能够在

  package.json

  文件中管理Angular 2的所有组件，该文件将Angular 2的所有依赖项粘贴在

  节点模块下的子文件/文件夹中

我已经将

Typescript

之类的东西运行并下载到Visual Studio中，并且安装了

node

和

npm

。

任务运行器资源管理器

还获取了

webpack.config.js

文件，我可以运行它并查看一个构建的javascript文件。这是我的基本文件结构（减去不相关的文件夹/文件）

我的

webpack.config.js

文件如下所示

var path = require("path");

module.exports = {
    context: path.join(__dirname, "Scripts"),
    entry: "./main.ts",
    output: {
        path: path.join(__dirname, "Scripts-Build"),
        filename: "[name].bundle.js"
    }
}

---

打嗝

我遇到的问题是，当我尝试为Angular 2编写hello world风格的应用程序时，从我的

node\u modules

文件夹导入模块时遇到问题。下面是

app.component.ts

的外观

import { Component } from "../../node_modules/@angular/core/index.js"

我看到的错误是当“--module”为“none”时，无法使用导入、导出或模块扩充。

我是做错了什么，还是遗漏了一个细节？

当我发现我需要做什么来解决这个问题时，这将被更新

运行

npm install@types/es6 shim--save dev

（修复构建解决方案时缺少的

Promise

、

Map

和

设置
类型）

将import语句从“./../node_modules/@angular/core”更改为

import{Component}（修复从
node_modules导入的路径）

在解决方案的根目录中添加一个

tsconfig.js

文件，其中包含以下内容

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "moduleResolution": "node"
    },
    "include": [
        "Scripts"
    ],
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}

---

2017年1月29日编辑，我想我需要webpack来加载typescript文件。

几周前用MVC Core构建了相同的环境（不确定您的版本？）：查看此链接：您可以使用此链接创建一个新项目，并检查您的项目中可能缺少的内容。

import { Component } from "../../node_modules/@angular/core/index.js"

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "moduleResolution": "node"
    },
    "include": [
        "Scripts"
    ],
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}