我在使用Angular 9和Universal时遇到麻烦。升级到v9并运行npm时，运行build：ssr脚本会引发错误：
程序不包含... src / src / main.server.ngfactory.ts
它在v8中有效，但是在升级core和cli之后，出现了问题。如果运行服务或构建，则可以使用它，但是，如果要运行SSR，则不起作用。我还可以从问题git-> angular / universal的帖子中看到其他开发人员也有同样的问题。这些文档还不清楚如何使用@ nguniversal / module-map-ngfactory-loader。我们是否应该使用它。在阅读文档时，升级到v9时会自动将其删除，因为它已被弃用。无论如何，错误说需要它吗？还是我错了。
这里有一些代码片段，我的配置文件等：
打包json文件：
{
"name": "app-universal",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc",
"dev:ssr": "ng run app-universal:serve-ssr",
"serve:ssr": "node dist/app-universal/server/main.js",
"build:ssr": "ng build --prod && ng run app-universal:server:production",
"prerender": "ng run app-universal:prerender"
},
"dependencies": {
"@angular/animations": "~9.1.0",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/forms": "~9.1.0",
"@angular/platform-browser": "~9.1.0",
"@angular/platform-browser-dynamic": "~9.1.0",
"@angular/platform-server": "~9.1.0",
"@angular/router": "~9.1.0",
"@nguniversal/express-engine": "^9.0.2",
"bootstrap": "^4.4.1",
"chart.js": "^2.9.3",
"core-js": "^2.6.11",
"express": "^4.15.2",
"ng2-charts": "^2.3.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
}
app.server.module.ts文件：
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
AppModule,
ServerModule,
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
main.server.ts文件：
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
export { AppServerModule } from './app/app.server.module';
export { renderModule, renderModuleFactory } from '@angular/platform-server';
tsconfig.server.json文件：
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"outDir": "../out-tsc/app-server",
"module": "commonjs",
"types": [
"node"
]
},
"files": [
"src/main.server.ts",
"server.ts"
],
"angularCompilerOptions": {
"entryModule": "./app/app.server.module#AppServerModule"
}
}
server.ts文件：
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
// The Express app is exported so that it can be used by serverless Functions.
export function app() {
const server = express();
const distFolder = join(process.cwd(), 'dist/app-universal/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
return server;
}
function run() {
const port = process.env.PORT || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
angular.json文件：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app-angular": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/app-angular/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/robots.txt",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []
},
"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,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app-angular:build"
},
"configurations": {
"production": {
"browserTarget": "app-angular:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app-angular: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": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/robots.txt",
"src/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/app-angular/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "app-angular:build",
"serverTarget": "app-angular:server"
},
"configurations": {
"production": {
"browserTarget": "app-angular:build:production",
"serverTarget": "app-angular:server:production"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "app-angular:build:production",
"serverTarget": "app-angular:server:production",
"routes": [
"/"app-angular
]
},
"configurations": {
"production": {}
}
}
}
},
"app-angular-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app-angular:serve"
},
"configurations": {
"production": {
"devServerTarget": "app-angular:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "app-angular"
}
这是我的完整堆栈跟踪，但有错误：
> [email protected] build:ssr /Users/dmdeveloper/app-universal-frontend-angular/app-universal
> ng build --prod && ng run app-universal:server:production
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {2} polyfills-es2015.28b264071c0a6503d0b4.js (polyfills) 36.1 kB [initial] [rendered]
chunk {3} polyfills-es5.d58c77c3e4e6875be71a.js (polyfills-es5) 129 kB [initial] [rendered]
chunk {1} main-es2015.b90be8c0d934accf4a89.js (main) 1.12 MB [initial] [rendered]
chunk {1} main-es5.b90be8c0d934accf4a89.js (main) 1.21 MB [initial] [rendered]
chunk {0} runtime-es2015.373942d2a2bfd7c0992a.js (runtime) 2.33 kB [entry] [rendered]
chunk {0} runtime-es5.373942d2a2bfd7c0992a.js (runtime) 2.33 kB [entry] [rendered]app-universal
chunk {5} 5-es2015.aa4d0b9984d3a16c4b30.js () 7.92 kB [rendered]
chunk {5} 5-es5.aa4d0b9984d3a16c4b30.js () 8.52 kB [rendered]
chunk {6} 6-es2015.84898a6e53a31813b9e4.js () 3.59 kB [rendered]
chunk {6} 6-es5.84898a6e53a31813b9e4.js () 4.06 kB [rendered]
chunk {9} 9-es2015.802c953e13629d5d4d58.js () 31.6 kB [rendered]
chunk {9} 9-es5.802c953e13629d5d4d58.js () 32.3 kB [rendered]
chunk {8} 8-es2015.754ae391c85ccd4b25ed.js () 4.69 kB [rendered]
chunk {8} 8-es5.754ae391c85ccd4b25ed.js () 5.19 kB [rendered]
chunk {7} 7-es2015.7fffde32d1027b060b4a.js () 4.32 kB [rendered]
chunk {7} 7-es5.7fffde32d1027b060b4a.js () 5.06 kB [rendered]
chunk {4} styles.e3d326e6f5a9793facb9.css (styles) 199 kB [initial] [rendered]
Date: 2020-03-29T11:19:52.719Z - Hash: 8c33a9ce794546362630 - Time: 41217ms
Hash: 7a6fe79632181b437acb
Time: 1326ms
Built at: 03/29/2020 13:20:00
Asset Size Chunks Chunk Names
main.js 1.75 KiB 0 main
Entrypoint main = main.js
chunk {0} main.js (main) 28 bytes [entry] [rendered]
ERROR in Program does not contain "/Users/dmdeveloper/app-universal-frontend-angular/app-universal/src/src/main.server.ngfactory.ts" - available files are /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es5.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2016.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2017.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2018.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.dom.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.core.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.collection.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.generator.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.iterable.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.promise.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.proxy.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.reflect.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.symbol.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2016.array.include.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2017.object.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2017.string.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2017.intl.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2018.intl.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2018.promise.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.es2018.regexp.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.esnext.intl.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/typescript/lib/lib.esnext.bigint.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/tslib/tslib.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/src/__ng_typecheck__.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/globals.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/assert.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/async_hooks.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/buffer.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/events/index.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/child_process.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/cluster.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/console.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/constants.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/crypto.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/dgram.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/dns.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/domain.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/events.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/fs.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/http.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/http2.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/https.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/inspector.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/module.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/net.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/os.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/path.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/perf_hooks.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/process.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/punycode.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/querystring.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/readline.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/repl.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/stream.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/string_decoder.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/timers.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/tls.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/trace_events.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/tty.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/url.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/util.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/v8.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/vm.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/worker_threads.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/zlib.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/base.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/ts3.2/fs.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/ts3.2/util.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/ts3.2/globals.d.ts, /Users/dmdeveloper/app-universal-frontend-angular/app-universal/node_modules/@types/node/ts3.2/index.d.ts
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:ssr: `ng build --prod && ng run app-universal:server:production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/dmdeveloper/.npm/_logs/2020-03-29T11_20_01_056Z-debug.log
有人遇到同样的问题，还是看到我想念的东西？正如我所说，在更新到新版本之前，它运行良好。任何帮助将是最欢迎的！
[发生了什么：在服务器部分的angula.json中，我更改了main的路径，即“ main”："server.ts", instead of main.server.ts.
第二件事，在tsconfig.server.json中，路径错误：现在是
"files": [
"./main.server.ts",
"../server.ts"
],
现在，它将构建浏览器和服务器并在端口4000上运行！