Muh*_*ish 5 typescript server-side-rendering angular-universal angular
{
"$schema":"./node_modules/@angular/cli/lib/config/schema.json",
"version":1,
"newProjectRoot":"projects",
"projects":{
"new-asasa":{
"projectType":"application",
"schematics":{
},
"root":"",
"sourceRoot":"src",
"prefix":"app",
"architect":{
"build":{
"builder":"@angular-devkit/build-angular:browser",
"options":{
"outputPath":"dist/new-asasa/browser",
"index":"src/index.html",
"main":"src/main.ts",
"polyfills":"src/polyfills.ts",
"tsConfig":"tsconfig.app.json",
"aot":true,
"assets":[
"src/favicon.ico",
"src/assets"
],
"styles":[
"src/styles.scss",
"node_modules/intl-tel-input/build/css/intlTelInput.css",
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
],
"scripts":[
"node_modules/intl-tel-input/build/js/intlTelInput.min.js",
"node_modules/jquery/dist/jquery.min.js"
],
"allowedCommonJsDependencies":[
"rxjs-compat",
"lodash"
]
},
"configurations":{
"production":{
"fileReplacements":[
{
"replace":"src/environments/environment.ts",
"with":"src/environments/environment.prod.ts"
}
],
"optimization":true,
"outputHashing":"all",
"sourceMap":false,
"namedChunks":false,
"extractLicenses":true,
"vendorChunk":false,
"buildOptimizer":true,
"budgets":[
{
"type":"initial",
"maximumWarning":"4mb",
"maximumError":"7mb"
},
{
"type":"anyComponentStyle",
"maximumWarning":"20kb",
"maximumError":"20kb"
}
]
}
}
},
"serve":{
"builder":"@angular-devkit/build-angular:dev-server",
"options":{
"browserTarget":"new-asasa:build"
},
"configurations":{
"production":{
"browserTarget":"new-asasa:build:production"
}
}
},
"extract-i18n":{
"builder":"@angular-devkit/build-angular:extract-i18n",
"options":{
"browserTarget":"new-asasa:build"
}
},
"test":{
"builder":"@angular-devkit/build-angular:karma",
"options":{
"main":"src/test.ts",
"polyfills":"src/polyfills.ts",
"tsConfig":"tsconfig.spec.json",
"karmaConfig":"karma.conf.js",
"assets":[
"src/favicon.ico",
"src/assets"
],
"styles":[
"src/styles.scss"
],
"scripts":[
"node_modules/intl-tel-input/build/js/intlTelInput.min.js"
]
}
},
"lint":{
"builder":"@angular-devkit/build-angular:tslint",
"options":{
"tsConfig":[
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json",
"tsconfig.server.json"
],
"exclude":[
"**/node_modules/**"
]
}
},
"e2e":{
"builder":"@angular-devkit/build-angular:protractor",
"options":{
"protractorConfig":"e2e/protractor.conf.js",
"devServerTarget":"new-asasa:serve"
},
"configurations":{
"production":{
"devServerTarget":"new-asasa:serve:production"
}
}
},
"server":{
"builder":"@angular-devkit/build-angular:server",
"options":{
"outputPath":"dist/new-asasa/server",
"main":"server.ts",
"tsConfig":"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":"new-asasa:build",
"serverTarget":"new-asasa:server"
},
"configurations":{
"production":{
"browserTarget":"new-asasa:build:production",
"serverTarget":"new-asasa:server:production"
}
}
},
"prerender":{
"builder":"@nguniversal/builders:prerender",
"options":{
"browserTarget":"new-asasa:build:production",
"serverTarget":"new-asasa:server:production",
"routes":[
"/"
]
},
"configurations":{
"production":{
}
}
}
}
}
},
"defaultProject":"new-asasa",
"cli":{
"analytics":false
}
}
npm run dev:ssr工作正常，还显示浏览器中加载的 ssr 内容。但是当我运行 npm run build:ssr && npm run serve:ssr生产版本时，ssr 不起作用。
"dev:ssr": "ng run new-asasa:serve-ssr",
"serve:ssr": "node dist/new-asasa/server/main.js",
"build:ssr": "ng build --prod && ng run new-asasa:server:production",
"prerender": "ng run new-asasa:prerender" "dev:ssr": "ng run new-asasa:serve-ssr",
"serve:ssr": "node dist/new-asasa/server/main.js",
"build:ssr": "ng build --prod && ng run new-asasa:server:production",
"prerender": "ng run new-asasa:prerender"`
我不明白你的任务背后的逻辑serve:ssr，似乎你还没有理解 Angular Universal 的基础知识及其设置方式。
此处提供的已编译 SSR 代码node dist/new-asasa/server/main.js只是应用程序代码。如果您尝试直接使用 Node 运行它，它不会执行任何操作。该编译文件将用作服务器视图引擎的基础。每当有人调用您的服务器时，您都必须使用此代码在服务器上呈现 HTML 页面，然后将它们发回。这是需要设置的，它不是开箱即用的，因为 Angular 不知道您将提前使用哪个服务器。
该serve-ssr任务看起来像是最近添加的一个便利实用程序，这可能会让您误以为事情比实际情况更简单。
总之这里解释的太多了，请按照官方教程进行操作。