Webpack - 选择器“my-app”与任何元素都不匹配

时间:2018-04-12 18:46:14

标签: angular visual-studio typescript webpack

我正在尝试在Visual Studio for Angular app中实现Webpack。

自从我在这里发布之前几周以来,我一直在苦苦挣扎。

Webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const source = path.resolve(__dirname, 'src', 'index.ts');
const destination = path.resolve(__dirname, 'dist');

module.exports = {
    entry: source,
    output: {
        filename: 'index.js',
        path: destination
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.(css|html)$/,
                loader: 'raw-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
    ]
};

的index.html

   <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="index.js"></script>
</head>
<body>
    <my-app>Loading...</my-app>
    <script src="index.js"></script>
<script type="text/javascript" src="index.js"></script></body>
</html>

Solution Explorer structure

我可以通过运行webpack命令来构建bundle文件,但是当我运行visual studio并直接指向index.html时,它会抛出错误:

选择器“my-app”与任何元素都不匹配

我不确定我缺少什么,我已经查看了所有的互联网SO,git,Webpack doccs等,但没有找到任何有用的东西。

感谢任何帮助。

感谢。

1 个答案:

答案 0 :(得分:1)

您的html模板有三次加载 File file = new File("txt file here"); try (Scanner in = new Scanner(file)) { int count = 0; while (in.hasNext()) { int a = in.nextInt(); String trash1 = in.next(); String trash2 = in.next(); String trash3 = in.next(); int b = in.nextInt(); int c = in.nextInt(); int d = in.nextInt(); //This continues but I realize this will eventually throw an //exception at some points in the text file because //some rows will have more "words with spaces" than others } } catch (FileNotFoundException fnf) { System.out.println(fnf.getMessage()); } 文件的原因是什么?我认为上面的错误来自于文档头部首次包含脚本。

index.js

我测试了将Angular的脚本移动到头部并收到了相同类型的错误。