angular - Webpack generated file error : "t.replace is not a function" -
i'm working on sample angular 2 app webpack generates js , css files. ran app web application on jboss 7.1 successfully, when tried use portlet application on websphere portal 7, following error occurred:
my guess replace
function not called on string variable (as should), have no idea, why happening (only on portal).
can me understand stacktrace above?
here's webpack configuration if helps:
var webpack = require('webpack'); var htmlwebpackplugin = require('html-webpack-plugin'); var extracttextplugin = require('extract-text-webpack-plugin'); var helpers = require('./helpers'); module.exports = { entry : { 'polyfills' : './src/polyfills.ts', 'vendor' : './src/vendor.ts', 'app' : './src/main.ts' }, resolve : { extensions : [ '', '.js', '.ts' ] }, devtool: 'source-map', output: { path: helpers.root('dist'), publicpath: '/.angularportlet/dist/', filename: '[name].[hash].js', chunkfilename: '[id].[hash].chunk.js' }, htmlloader: { minimize: false // workaround ng2 }, module : { loaders : [ { test : /\.ts$/, loader : 'ts' }, { test : /\.html$/, loader : 'html' }, { test : /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader : 'file?name=assets/[name].[hash].[ext]' }, { test : /\.css$/, exclude : helpers.root('src', 'app'), loader : extracttextplugin.extract('style', 'css?sourcemap') }, { test : /\.css$/, include : helpers.root('src', 'app'), loader : 'raw' } ] }, plugins : [ new webpack.optimize.commonschunkplugin({ name : [ 'app', 'vendor', 'polyfills' ] }), new htmlwebpackplugin({ xhtml : true, minify : { keepclosingslash : true }, template : 'src/index.html', favicon : 'public/images/favicon.ico', filename : 'index.html' }), new webpack.noerrorsplugin(), new webpack.optimize.dedupeplugin(), new webpack.optimize.uglifyjsplugin(), new extracttextplugin('[name].[hash].css'), new webpack.defineplugin({ 'process.env': { 'env': json.stringify(env) } }) ] };
configuration web application same except publicpath
webpack output files different.
xhtml code (i'm including generated index.html code):
<div xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:portlet="http://java.sun.com/portlet_2_0" xmlns:p="http://primefaces.org/ui"> <h:form id="formmain"> <ui:include src="../dist/index.html" /> </h:form>
index.html
<!doctype html> <html> <head> <base href="/" /> <title>angular webpack</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="stylesheet" type="text/css" href="/.angularportlet/node_modules/primeui/primeui-ng-all.min.css" /> <link rel="stylesheet" type="text/css" href="/.angularportlet/node_modules/primeui/themes/omega/theme.css" /> <link href="/.angularportlet/node_modules/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" type="text/css" /> <link href="/.angularportlet/node_modules/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="/.angularportlet/dist/favicon.ico" /> <link href="/.angularportlet/dist/app.f16840a33ca242ab101a.css" rel="stylesheet" /> </head> <body> <my-app>loading...</my-app> <script type="text/javascript" src="/.angularportlet/dist/polyfills.f16840a33ca242ab101a.js"></script> <script type="text/javascript" src="/.angularportlet/dist/vendor.f16840a33ca242ab101a.js"></script> <script type="text/javascript" src="/.angularportlet/dist/app.f16840a33ca242ab101a.js"></script> </body> </html>
Comments
Post a Comment