我的回购非常类似于this one。我知道这是最前沿的，因为它使用Angular import { Component, ElementRef } from '@angular/core'
@Component({
selector: 'my-component'
})
export class MyComponent {
constructor(elem: ElementRef) {
const tagName = elem.nativeElement.tagName.toLowerCase();
}
}
。
Webpack在4.0.0-rc.1文件夹中构建了两个包，名为dist和server.js。
我的webpack配置：
client.js现在，我想添加一个非常简单的const webpack = require('webpack');
const ngtools = require('@ngtools/webpack');
const path = require('path');
const webpackMerge = require('webpack-merge');
const serverConfig = {
entry: path.join(__dirname, 'src/main.server.ts'),
devtool: 'source-map',
context: __dirname,
resolve: {
extensions: ['.ts', '.js']
},
target: 'node',
output: {
path: 'dist',
filename: 'server.js'
},
plugins: [
new ngtools.AotPlugin({
tsConfigPath: path.join(__dirname, 'tsconfig.json'),
})
],
module: {
rules: [
{
test: /\.ts$/,
loader: '@ngtools/webpack',
},
{
test: /\.html$/,
use: 'raw-loader'
},
{
test: /\.scss$/,
exclude: [
/\.unit.scss$/,
path.join(__dirname, 'src', 'assets')
],
use: [
{
loader: 'raw-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve(__dirname, "./src/assets/styles")]
}
}
]
}
]
}
};
const clientConfig = webpackMerge({}, serverConfig, {
entry: path.join(__dirname, 'src/main.browser.ts'),
output: {
filename: 'client.js'
},
target: 'web'
});
module.exports = [clientConfig, serverConfig];
服务器并提供express文件，以便Angular可以从那里获取所有内容（通常使用SPA＆＃39; s） ）。
所以我像这样建立我的快递服务器：
index.html但是因为webpack将所有内容捆绑到我的两个包中，所以我的dist文件夹中没有import * as express from 'express';
import * as path from 'path';
let app = express();
app.set('view engine', 'html');
app.set('views', 'src');
app.use('/', express.static('dist', { index: false }));
app.get('*', (req, res, next) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(8000, () => {
console.log("listening on localhost:8000 (non-universal)");
});
个文件。
我如何从Express中提供Webpack包中的index.hml？