Question

我最近开始学习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';
}

我正在使用的模板只是一个带有title变量的简单div。

Answer 1

那么在尝试减少任何额外的东西以确定原因后我发现我在html文件中调用了zone.js但是我错过了URL中的/dist/文件夹，所以它从来没有真正调用区域，它打开了一系列其他问题，但现在它实际上给出了一个错误。

Answer 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>

Angular2和Webpack引导

2 个答案: