We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
ng build --prod |
|
ng eject
|
|
const fs = require('fs');
const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
. . . . .
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i;
const minimizeOptions = {
autoprefixer: false,
safe: true,
mergeLonghand: false,
discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
};
return [
postcssUrl({
. . . .
module.exports = {
. . . .
},
"entry": {
"main": [
"./src\\app\\module2.ts",
"./src\\app\\module1.ts",
"./src\\app\\app.module.ts",
"./src\\main.ts"
],
"polyfills": [
"./src\\polyfills.ts"
],
"styles": [
"./src\\styles.css",
"./node_modules\\syncfusion-javascript\\Content\\ej\\web\\material\\ej.web.all.min.css"
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
},
|
|
npm run build -e –prod |
Hi Abinaya
Thanks for this, running the eject and then build seems to have worked, my only concern is that i'm getting warnings like this
WARNING in ./~/ej-angular2/src/ej/diagram.component.js
Cannot find source file '../../ej/diagram.component.ts': Error: Can't resolve '../../ej/diagram.component.ts' in 'C:\TFS\KTA\Main\Agility\Code
\Client\Angular\Designerode_modules\ej-angular2\src\ej'
@ ./~/ej-angular2/src/index.js 10:26-59 82:9-42
@ ./src/agility/processes/process-designer/process-designer.module.ts
@ ./src async
@ ./~/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi ./src/main.ts
There's quite a number of them and it's all around the components in the ej-angular2.
Is this something to be concerned about? will the components still work if we go to run out solution when installed?
Thanks
Robert
|
module.exports = {
"resolve": {
"extensions": [
".ts",
".js"
],
"modules": [
"./node_modules",
"./node_modules"
],
"symlinks": true
},
"resolveLoader": {
"modules": [
"./node_modules",
"./node_modules"
]
},
"entry": {
"main": [
"./src\\app\\app.module.ts",
"./src\\main.ts"
],
"polyfills": [
"./src\\polyfills.ts"
],
"styles": [
"./src\\styles.css",
"./node_modules\\syncfusion-javascript\\Content\\ej\\web\\material\\ej.web.all.min.css"
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
},
"module": {
"rules": [
{
"enforce": "pre",
"test": /\.js$/,
"loader": "source-map-loader",
"exclude": [
/\ode_modules\\/
]
},
{
"test": /\.json$/,
"loader": "json-loader"
},
{
"test": /\.html$/,
"loader": "raw-loader"
},
{
"test": /\.(eot|svg)$/,
"loader": "file-loader?name=[name].[hash:20].[ext]"
},
{
"test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|cur|ani)$/,
"loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
},
{
"exclude": [
path.join(process.cwd(), "src\\styles.css"),
path.join(process.cwd(), "node_modules\\syncfusion-javascript\\Content\\ej\\web\\material\\ej.web.all.min.css")
],
"test": /\.css$/,
"use": [
"exports-loader?module.exports.toString()",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
}
]
},
|
Hi Abinaya
Replying from a new account (company account) just talked with architecture and the ng eject isn't a viable option for us with our project.
We've noticed that the problem is around the fact that we are importing all components through the EJAngular2Module.forRoot(), is there any way we can only import the components that we are using in that module?
Thanks
Robert
|
import { NgModule, enableProdMode, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
. . .. .
import { EJ_GRID_COMPONENTS } from 'ej-angular2';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { GridComponent } from './grid/grid.component';
import { rootRouterConfig } from './app.routes';
@NgModule({
imports: [
BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, { useHash: true })
],
declarations: [
AppComponent, HomeComponent, GridComponent, EJ_GRID_COMPONENTS
],
bootstrap: [AppComponent]
})
export class AppModule { } |
Hi Abinaya,
Unfortunately we've tried this already, this will work for a normal build but for a production build it will fall over because the component has been declared twice, once in our component and then once in the EJAngular2Module that is exported from the ej-angular2 node module
Thanks
Robert
|
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { EJ_GRID_COMPONENTS } from 'ej-angular2/src/ej/grid.component';
@NgModule({
declarations: [
AppComponent, EJ_GRID_COMPONENTS
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } |
Hi Abinaya,
Thanks again for you reply, the last approach fits our purposes perfectly it seems.
Thanks for your time and effect.
Robert
Hi Abinaya
I've just tested the prod build of the solution and notice now that when i attempt to browse a page it won't load and i get the following reference error
ReferenceError: ej is not defined
This doesnt occuring when testing a regular non prod build.
Thanks
Robert
|
ng build --prod
|
|
npm install http-server -g
|
|
http-server ./dist
|
Hi Abinaya
We've done a bit of investigating and determined that this is due to the way we are have been told to implement the user handles for the diagram,
We've going to go back to this thread to get it resolved but incase you are curious here is a link to an edit of your sample project with the diagram and user handles plugged in. please download the zip named SampleWithDiagramUserHandles
https://1drv.ms/u/s!AAxIdbDPqmRThVk
Thanks
Robert
