Error configuring Universal Angular


Topic: Error configuring Universal Angular
I have the following error when configuring  universal angular  with mdbootstrap. apply all the steps of the following link https://mdbootstrap.com/angular/angular-universal/. I would greatly appreciate your help, the problem is that I have my app with wordpress rest api, but I can not apply metaTags for SEO. https://www.dropbox.com/s/izaqgpkreorf8dq/ERRO-ANGULAR-UNIVERSAL.JPG?dl=0
Start your code here
Project 'project-name' could not be found in workspace.
Error: Project 'project-name' could not be found in workspace.
    at Workspace.getProject (C:UserscriacaoDocumentsprojecturocentrolognode_modules@angularclinode_modules@angular-devkitcoresrcworkspaceworkspace.js:83:19)    at Architect.getBuilderConfiguration (C:UserscriacaoDocumentsprojecturocentrolognode_modules@angularclinode_modules@angular-devkitarchitectsrcarchitect.js:96:41)
    at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (C:UserscriacaoDocumentsprojecturocentrolognode_modules@angularclimodelsarchitect-command.js:64:55)
    at MergeMapSubscriber._tryNext (C:UserscriacaoDocumentsprojecturocentrolognode_modulesrxjsinternaloperatorsmergeMap.js:122:27)
    at MergeMapSubscriber._next (C:UserscriacaoDocumentsprojecturocentrolognode_modulesrxjsinternaloperatorsmergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (C:UserscriacaoDocumentsprojecturocentrolognode_modulesrxjsinternalSubscriber.js:103:18)
    at TapSubscriber._next (C:UserscriacaoDocumentsprojecturocentrolognode_modulesrxjsinternaloperatorstap.js:109:26)
    at TapSubscriber.Subscriber.next (C:UserscriacaoDocumentsprojecturocentrolognode_modulesrxjsinternalSubscriber.js:103:18)
    at MergeMapSubscriber.notifyNext (C:UserscriacaoDocumentsprojecturocentrolognode_modulesrxjsinternaloperatorsmergeMap.js:141:26)
    at InnerSubscriber._next (C:UserscriacaoDocumentsprojecturocentrolognode_modulesrxjsinternalInnerSubscriber.js:30:21)

Arkadiusz Idzikowski staff answered 6 years ago

Dear Hector, Did you change 'project-name' placeholder to your actual project name in all files? Please show me your code from server.ts, webpack.server.config.js, package.json and angular.json files. Best, Arek

Hello, here I leave my server.ts, webpack.server.config.js, package.json and angular.json, I would appreciate a lot of your help. Thank you

./server.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
const domino = require('domino');
const fs = require('fs');
const path = require('path');
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const app = express();
const PORT = process.env.PORT || 4201;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['Node'] = win.Node;
global['navigator'] = win.navigator;
global['Event'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['document'] = win.document;
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
app.engine('html', (_, options, callback) => {
renderModuleFactory(AppServerModuleNgFactory, {
// Our index.html
document: template,
url: options.req.url,
// DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => {
callback(null, html);
});
});
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Server static files from dist folder
app.get('*.*', express.static(DIST_FOLDER));
// 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}`);
});

./webpack.server.config.js

// Work around for https://github.com/angular/angular-cli/issues/7200
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'none',
entry: {
// This is our Express server for Dynamic universal
server: './server.ts',
// This is an example of Static prerendering (generative)
},
target: 'node',
resolve: { extensions: ['.ts', '.js'] },
// Make sure we include all node_modules etc
externals: [/node_modules/, nodeExternals({
whitelist: [
/^@agm/core/,
/^hammerjs/
]
})],
output: {
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /.ts$/, loader: 'ts-loader' },
{
// Mark files inside `@angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
test: /[/\]@angular[/\]core[/\].+.js$/,
parser: { system: true },
},
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\|/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?express(\|/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
}

package.json

{
"name": "mdb-angular-free",
"version": "6.1.1",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:client-and-server-bundles": "ng build --prod && ng run project-name:server:production",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/animations": "^6.0.4",
"@angular/common": "^6.0.0-rc.1",
"@angular/compiler": "^6.0.0-rc.1",
"@angular/core": "^6.0.0-rc.1",
"@angular/forms": "^6.0.0-rc.1",
"@angular/http": "^6.0.0-rc.1",
"@angular/platform-browser": "^6.0.0-rc.1",
"@angular/platform-browser-dynamic": "^6.0.0-rc.1",
"@angular/platform-server": "^6.0.9",
"@angular/pwa": "^0.7.1",
"@angular/router": "^6.0.0-rc.1",
"@angular/service-worker": "^6.0.0",
"@nguniversal/express-engine": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"angular-mgl-timeline": "^0.1.8",
"chart.js": "^2.5.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"ng2-sticky-kit": "^5.3.0",
"ngx-pagination": "^3.1.1",
"ngx-spinner": "^6.0.0",
"ngx-toastr": "^8.8.0",
"node-sass": "^4.9.1",
"rxjs": "^6.0.0-rc.1",
"ts-loader": "^4.4.2",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.5.7",
"@angular/cli": "^6.0.0-rc.1",
"@angular/compiler-cli": "^6.0.0-rc.1",
"@angular/language-service": "^6.0.0-rc.1",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}

angular.json

{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mdb-angular-free": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "favicon.ico",
"input": "src",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
},
{
"glob": "robots.txt",
"input": "src",
"output": "/"
},
{
"glob": "sitemap.xml",
"input": "src",
"output": "/"
}
],
"styles": [{
"input": "node_modules/font-awesome/scss/font-awesome.scss",
"input": "node_modules/ngx-toastr/toastr.css"
},
{
"input": "angular-bootstrap-md/scss/bootstrap/bootstrap.scss"
},
{
"input": "angular-bootstrap-md/scss/mdb-free.scss"
},
{
"input": "src/styles.scss"
}
],
"scripts": [{
"input": "node_modules/chart.js/dist/Chart.js"
},
{
"input": "node_modules/hammerjs/hammer.min.js"
}
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "mdb-angular-free:build"
},
"configurations": {
"production": {
"browserTarget": "mdb-angular-free:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "mdb-angular-free:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "styles.scss"
}
],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}]
}
}
}
}
},
"mdb-angular-free-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "mdb-angular-free:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"defaultProject": "mdb-angular-free"
}

Solved the error, it must also change in the package.json, change the project name
"build:client-and-server-bundles": "ng build --prod && ng run PROJECT-NAME:server:production",

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes