Question

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

Webpack是一个模块加载器。因此，它可以通过将webpack.config.js文件指向我的角度应用程序并将其输出到我可以导入到我的HTML中的单个文件来捆绑我的整个Angular 2应用程序
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'时无法使用导入，导出或模块扩充

我做了一件非常错误的事情，还是我在这里错过了一个微妙的事情？

Answer 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加载打字稿文件..

ASP.NET MVC网站有npm，webpack和angular2吗？

1 个答案: