Angular 4 Universal-App mit @ Angular/CLI mit Drittanbieter (Bibliothek/Komponente) Kompilierung

Question

Ich versuche serverseitige Rendering mit angular universal zu implementieren. Mit diesem Post angular-4-universal-app-with-angular-cli und diesem cli-universal-demo Projekt, stieß ich auf ein Problem wie folgt.

Wenn der Knoten dist/server.js beginnt es zeigt einen Fehler:

(function (exports, require, module, __filename, __dirname) 
{ export * from ‘./scn-filter-builder’ 

scn-filter-builder mein Modul ist. Es ist in angular2/typescript geschrieben und node.js versteht es nicht.

Die Frage ist, kann ich auf universal so einstellen, dass es Pakete von node_module zu es5 von selbst kompilieren? Oder muss ich meine Komponente in es5 kompilieren?

Answer 1

Also habe ich etwas Ähnliches angepackt, indem ich es mit Webpack kompiliert habe. Habe ich nur noch eine webpack.config.js mit dem folgenden:

const path = require('path'); 
const nodeExternals = require('webpack-node-externals'); 

module.exports = { 
    entry: { 
    server: './src/server.ts' 
    }, 
    resolve: { 
    extensions: ['.ts', '.js'] 
    }, 
    target: 'node', 
    externals: [nodeExternals({ 
    whitelist: [ 
     /^ngx-bootstrap/ 
    ] 
    })], 
    node: { 
    __dirname: true 
    }, 
    output: { 
    path: path.join(__dirname, 'server'), 
    filename: '[name].js', 
    libraryTarget: 'commonjs2' 
    }, 
    module: { 
    rules: [ 
     { test: /\.ts$/, loader: 'ts-loader' } 
    ] 
    } 
} 

die Bibliothek hinzufügen, die in dem nodeExternals kompiliert werden muss -> Weiße Liste Bereich. In meinem Fall war es ngx-bootstrap. Dann führe einfach webpack aus, um deine Datei zu kompilieren.