Angular 2 和 Webpack 引导答案

【问题标题】：Angular2 and Webpack bootstrapingAngular 2 和 Webpack 引导
【发布时间】：2017-05-10 14:01:52
【问题描述】：

我最近开始学习 Angular2，因为我已经了解了一点 Webpack，所以我想将它们一起使用。我按照网上的一些指南和教程提出了一个相当简单的应用程序，我现在面临的唯一问题是我实际上无法运行它。我认为我做的一切都是正确的，但是尽管应该安装应用程序的组件标签仍然是空的。我的文件如下：

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';


platformBrowserDynamic().bootstrapModule(AppModule);

webpack.config.js

const webpack = require('webpack');

module.exports = {

    entry: './public/main.ts',
    output: {
        path: './dist',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'awesome-typescript-loader!angular2-template-loader'
            },
            {
                test: /\.html$/,
                loader: 'html'
            }
        ]
    },
    resolve: {
        extensions: ['', '.ts', '.js']
    },
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "experimentalDecorators": true,
        "module": "commonjs",
        "typeRoots": [
            "./node_modules/typings/"
        ],
        "types": [
            "core-js"
        ]
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

index.html

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Songs App</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script src="../node_modules/zone.js/zone.js"></script>
        <script src="../node_modules/reflect-metadata/Reflect.js"></script>
        <script src="./../dist/app.bundle.js"></script>
        <song-app></song-app>
    </body>
</html>

App 组件元素是<song-app>。任何帮助将不胜感激。

编辑 1：

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './components/App.component';
import { AppRoutingModule, routingComponents } from './app.routing';

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        routingComponents
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

编辑 2：

app.component

import { Component } from '@angular/core';

@Component({
    selector: 'song-app',
    templateUrl: './App.component.html'
})
export class AppComponent {
    title = 'Song List App';
}

我使用的模板只是一个简单的 div，里面有 title 变量。

【问题讨论】：

你考虑过使用 angular-cli 吗？
能否也将 AppModule 代码添加到问题中？
@R.Richards 编辑了问题以根据要求包含 app.module 文件。
抱歉，我应该要求提供 AppComponent 代码。你也可以加一下吗？
@R.Richards 也添加了那个。

标签： angular typescript webpack

【解决方案1】：

好吧，在尝试减少任何额外内容以查明原因后，我发现我在 html 文件中调用 zone.js，但我在 URL 中缺少 /dist/ 文件夹，因此它从来没有真正调用 zone，它打开了一系列其他问题，但现在它实际上给出了一个错误。

【讨论】：

【解决方案2】：

您的选择器标签 (<song-app>) 应该放在加载 bundle.js 文件的行上方，因为 bundle.js 应该可以使用 <song-app> 元素在其中加载您的组件模板。

在你的 index.html 中：

 <body>
            <script src="../node_modules/zone.js/zone.js"></script>
            <script src="../node_modules/reflect-metadata/Reflect.js"></script>
            <song-app></song-app>
            <script src="./../dist/app.bundle.js"></script>

        </body>

【讨论】：

我实际上是在寻找解决方案时这样做的，它也可能导致了问题。