带有 npm、webpack 和 angular2 的 ASP.NET MVC 网站？答案

【问题标题】：ASP.NET MVC website with npm, webpack and angular2?带有 npm、webpack 和 angular2 的 ASP.NET MVC 网站？
【发布时间】：2017-01-29 19:29:08
【问题描述】：

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

Webpack 是一个模块加载器。因此，它将能够通过将webpack.config.js 文件指向我的 Angular 应用程序来捆绑我的整个 Angular 2 应用程序，并让它输出一个我可以导入到我的 HTML 中的文件
npm 让我能够在 package.json 文件中管理我的所有 Angular 2 组件，这会将 Angular 2 的所有依赖项粘贴在 node_modules 下的子文件/文件夹中

我已经运行并下载了诸如 Typescript 之类的东西到 Visual Studio 中，并且我已经安装了 node 和 npm。 Task Runner Explorer 还获取了 webpack.config.js 文件，我可以运行它并查看构建的 javascript 文件。这是我的基本文件结构（减去不相关的文件夹/文件）

Solution
    node_modules
        @angular
        core-js
        es6-shim
        rxjs
        reflect-metadata
        ...
    Scripts
        app
            component-1
            component-2
            ...
        shared
            directives
            interfaces
            services
            ...
        app.component.ts <-- Should have the root level angular 2 component
        main.ts <-- should be entry point into angular 2 application
    Scripts-Build
        main.bundle.js <-- Webpack places my bundled js file here
    package.json
    webpack.config.js

我的package.json 文件看起来像这样

{
    "version": "1.0.0",
    "name": "aspnet",
    "private": true,
    "dependencies": {
        "@angular/common": "^2.4.5",
        "@angular/compiler": "^2.4.5",
        "@angular/core": "^2.4.5",
        "@angular/forms": "^2.4.5",
        "@angular/http": "^2.4.5",
        "@angular/platform-browser": "^2.4.5",
        "@angular/platform-browser-dynamic": "^2.4.5",
        "@angular/router": "^3.4.5",
        "angular-in-memory-web-api": "~0.2.4",
        "core-js": "^2.4.1",
        "rxjs": "5.0.1",
        "systemjs": "0.19.40",
        "zone.js": "^0.7.4"
    }
}

我的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_modules 文件夹中导入模块。这是app.component.ts 的样子

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

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

我是做错了什么还是我错过了一些微妙之处？

【问题讨论】：

几周前用 MVC Core 构建了相同的环境（不确定你的版本？）：看看这个链接：blog.stevensanderson.com/2016/10/04/…你可以用这个创建一个新项目并检查什么可以在你的世界里不见了。

标签： javascript asp.net angularjs node.js asp.net-mvc

【解决方案1】：

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

运行npm install @types/es6-shim --save-dev（修复在构建解决方案时缺少Promise、Map 和Set 类型）
将导入语句更改为import { Component } from "../../node_modules/@angular/core"（修复从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"
    ]
}

1/29/2017 编辑，我想我需要 https://github.com/TypeStrong/ts-loader 让 webpack 加载打字稿文件..

【讨论】：