Topic: Unable to create universal build with latest zip ng-uikit-pro-standard

Gaurav Garg pro asked 6 years ago


Hi Team, I am not able to create the SSR build because i am getting this error. Please help me to solve this issue. I am not using gitlab. I am using zip file. ERROR in ./ng-uikit-pro-standard/ng-uikit-pro-standard.ngfactory.js Module not found: Error: Can’t resolve ‘ng-uikit-pro-standard’ in ‘E:devmigrationng-uikit-pro-standard’ ERROR in ./src/app/app.module.ngfactory.js Module not found: Error: Can’t resolve ‘ng-uikit-pro-standard’ in ‘E:devmigrationsrcapp’ ERROR in ./src/app/app.component.ngfactory.js Module not found: Error: Can’t resolve ‘ng-uikit-pro-standard’ in ‘E:devmigrationsrcapp’ ———————————————————————————– My app.module.ts is
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}`);
});
—————————————————————————————–

Damian Gemza staff commented 6 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

syondevelopment pro answered 6 years ago


Dear Damian, i tried using the dev branch but it is still not working. Everthing went fine with the free version but with the pro version the build fails even if I only import the components of the free version (MDBBootstrapModule.forRoot()). I am getting the following error:
... 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 6 years ago

resolved using dev branch and domino

Damian Gemza staff commented 6 years ago

So everything is fine now? Please let me know. Best Regards, Damian

Gaurav Garg pro answered 6 years ago


Hi Damian, We have tried with Gitlab repository. But you guys are using setInterval and setTimeout methods which is creating problem in SSR rendering. Now tell me how to solve it ?

Damian Gemza staff commented 6 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, Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags