Topic: Error configuring Universal Angular

Hector Alejandro Rodriguez free asked 5 years ago


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)


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",


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"
}

Arkadiusz Idzikowski staff answered 5 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

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

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