Topic: Unable to create universal build with latest zip ng-uikit-pro-standard
Gaurav Garg pro asked 7 years ago
Start your code here import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { FormsModule } from ‘@angular/forms’; import { HttpClientModule } from ‘@angular/common/http’; import { AppRoutingModule } from ‘./app-routing.module’; import { AppComponent } from ‘./app.component’; import { PLATFORM_ID, APP_ID, Inject } from ‘@angular/core’; import { isPlatformBrowser } from ‘@angular/common’; import {MDBBootstrapModulesPro} from ‘./../../ng-uikit-pro-standard’; import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’; @NgModule({ imports: [ BrowserModule.withServerTransition({ appId:’tour-of-heroes’ }), FormsModule, BrowserAnimationsModule, AppRoutingModule, HttpClientModule,MDBBootstrapModulesPro.forRoot()
], declarations: [ AppComponent ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { constructor( @Inject(PLATFORM_ID) private platformId: Object, @Inject(APP_ID) private appId: string) { constplatform=isPlatformBrowser(platformId) ? ‘in the browser’:’on the server’; console.log(`Running ${platform} with appId=${appId}`); } }—————————————————————————————– I am testing it with one component only carousel. When i am running ng serve then it is working absolutely fine but when i am running npm run build:ssr then it is giving above error. ——————————————————————————————- tsconfig.json :
Start your code here { “compileOnSave”: false, “compilerOptions”: { “outDir”: “./dist/out-tsc”, “sourceMap”: true, “declaration”: false, “moduleResolution”: “node”, “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “target”: “es5”, “skipLibCheck”: true, “typeRoots”: [ “node_modules/@types” ], “lib”: [ “es2017”, “dom” ] } }——————————————————————————————————- server.ts // These are important and needed before anything else
Start your code here import ‘zone.js/dist/zone-node’; import ‘reflect-metadata’; import { enableProdMode } from ‘@angular/core’; import * as express from ‘express’; import { join } from ‘path’; var compression = require(‘compression’) const domino = require(‘domino’); const fs = require(‘fs’); const template = fs.readFileSync(join(process.cwd(), ‘dist’, ‘browser’, ‘index.html’)).toString(); console.log(“join(process.cwd(), ‘dist’, ‘browser’, ‘index.html’) is “, join(process.cwd(), ‘dist’, ‘browser’, ‘index.html’)) const win = domino.createWindow(template); global[‘window’] = win; global[‘document’] = win.document; global[‘navigator’] = win.navigator; global[‘XMLHttpRequest’] = require(‘xmlhttprequest’).XMLHttpRequest; global[‘Node’] = win.Node; global[‘Event’] = win.Event; global[‘Event’][‘prototype’] = win.Event.prototype; // Faster server renders w/ Prod mode (dev mode never needed) enableProdMode(); // Express server const app = express(); const PORT = process.env.PORT || 4000; const DIST_FOLDER = join(process.cwd(), ‘dist’); // * NOTE :: leave this as require() since this file is built Dynamically from webpack const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(‘./dist/server/main’); // Express Engine import { ngExpressEngine } from ‘@nguniversal/express-engine’; // Import module map for lazy loading import { provideModuleMap } from ‘@nguniversal/module-map-ngfactory-loader’; app.use(compression()) app.engine(‘html’, ngExpressEngine({ bootstrap:AppServerModuleNgFactory, providers: [ provideModuleMap(LAZY_MODULE_MAP) ] })); app.set(‘view engine’, ‘html’); app.set(‘views’, join(DIST_FOLDER, ‘browser’)); // TODO: implement data requests securely app.get(‘/api/*’, (req, res) => { res.status(404).send(‘data requests are not supported’); }); // Server static files from /browser app.get(‘*.*’, express.static(join(DIST_FOLDER, ‘browser’), { maxAge: 31536000000 })); // All regular routes use the Universal engine app.get(‘*’, (req, res) => { res.render(‘index’, { req }); }); // Start up the Node server app.listen(PORT, () => { console.log(`Node server listening on http://localhost:${PORT}`); });—————————————————————————————–
Gaurav Garg pro answered 7 years ago
Damian Gemza staff commented 7 years ago
Dear Guarav Garg, Problems with setTimeout and setInterval in carousel will be fixed in next release of MDB Angular. For now you're able to fix it by installing ng-uikit-pro-standard package from dev branch of our GitLab repo. Best Regards, Damiansyondevelopment pro answered 7 years ago
... AppServerModuleNgFactory = _a.AppServerModuleNgFactory, LAZY_MODULE_MAP = _a.LAZY_MODULE_MAP; ^ TypeError: Cannot read property 'AppServerModuleNgFactory' of undefined at Object.<anonymous> (server.js:117:83) at __webpack_require__ (server.js:20:30) at Object.defineProperty.value (server.js:69:18) at Object.<anonymous> (server.js:72:10) at Module._compile (internal/modules/cjs/loader.js:702:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10) at Module.load (internal/modules/cjs/loader.js:612:32) at tryModuleLoad (internal/modules/cjs/loader.js:551:12) at Function.Module._load (internal/modules/cjs/loader.js:543:3) at Function.Module.runMain (internal/modules/cjs/loader.js:744:10) ...
syondevelopment pro commented 7 years ago
resolved using dev branch and dominoDamian Gemza staff commented 7 years ago
So everything is fine now? Please let me know. Best Regards, DamianFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Damian Gemza staff commented 7 years ago
Dear Guarav Garg, Could you please try with version installed from GitLab repository instead of zip? We'll check this problem in zip package. Best Regards, Damian