在将我的 Angular 8 项目升级到 9 之后，我的意思是我几乎将所有东西都升级到了最新版本，发生了几件事。
1.- webpack.config.js 文件被重命名为 .bak 所以似乎不再使用 webpack 了，事实上如果我尝试重新激活 webpack 构建没有任何反应，它会创建构建但脚本没有不要跑。和node server.js一起跑进进出，什么也没说。
2.- 现在 dist 文件夹在根目录中没有 .js 文件，并且浏览器和服务器构建的文件夹像以前一样在那里，但甚至编辑 web.config 文件以指示 iisnode 运行 server/main.js 而不是server.js 不管我做什么，总是抛出 500。
3.- 一开始唯一有效的方法是在本地运行
npm run dev:ssr
这意味着在浏览器构建中对视图的引用是存在的，但它的运行方式就像它应该从根请求 dist/browser 一样运行。
我修改了angular.json中的构建路径和服务器构建路径，在./dist文件夹的根目录下创建了main.js文件。
angular.json（输出路径已修改）
architect: {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "tsconfig.app.json",
...
},
...
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
...
},
...
}
好吧，问题来了。浏览器构建生成 ./dist/browser 没有问题，服务器构建确实将 main.js 文件直接放在 ./dist 但不知何故它决定删除 ./dist/browser 文件夹并在运行节点 main.js 时（@987654329 @指点to main.js）它找不到./browser/index.html，当然不是因为服务器构建过程设法删除了浏览器文件夹。
hacky 解决方案，运行第三次构建（再次构建浏览器）
我希望这可以解决，但老实说，这根本不会打扰我，计算机运行构建，而不是我，但你知道，如果服务器构建过程不删除它可能会更好更快浏览器构建文件夹。
现在每次我部署选定的构建时，它都会直接从 AppVeyor 很好地部署到 Azure 应用服务，没有任何问题。
package.json（注意服务器构建后额外的生产构建）
{
...
"scripts": {
...
"dev:ssr": "ng run Angular-Universal:serve-ssr",
"serve:ssr": "node dist/main.js",
"build:ssr": "npm run build:universal && ng run Angular-Universal:build:production",
"start:ssr": "npm run build:ssr && npm run serve:ssr",
"build:universal": "ng run Angular-Universal:build:production && ng run Angular-Universal:server:production",
"prerender": "ng run Angular-Universal:prerender"
},
...
}
请注意，build:ssr 脚本正在执行两个构建，然后再次构建浏览器。
另请注意，serve:ssr 脚本已修改为运行 dist/main.js
最后必须修改 server.ts 文件以根据目标系统的文件夹结构从 ./browser/index.html 或 ./dist/browser/index.html 请求视图。当部署到 Azure 应用服务 main.js 请求 browser/index.html 但如果该项目在我的本地环境中使用 npm run dev:ssr 或 node main.js 提供并在 macOS 上运行它请求 dist/browser/index.html。反正一个简单的 if 就可以跳过这个障碍。
server.ts（应用功能的变化）
// The Express app is exported so that it can be used by serverless Functions.
export function app() {
const server = express();
let distFolder: string;
const path1 = join(process.cwd(), 'browser'); // Running from the deployed version (production)
const path2 = join(process.cwd(), 'dist/browser'); // Running from the source (macOS local development)
if (fs.existsSync(path1)) {
distFolder = path1;
} else if (fs.existsSync(path2)) {
distFolder = path2;
} else {
return null;
}
console.log('distFolder:', distFolder);
const indexHtml = fs.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
// server.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;
}
以防万一您想知道如何将web.config 文件复制到dist 文件夹的根目录，好吧，因为我正在使用 AppVeyor 进行 CI/CD，所以我已经修改了工件创建命令以包含 web.config （从 repo 源文件直接进入 .7z 文件）
为什么不包括我的web.config？
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<httpRuntime enableVersionHeader="false" />
</system.web>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Strict-Transport-Security" value="max-age=31536000"/>
<add name="X-Content-Type-Options" value="nosniff" />
<add name="X-Frame-Options" value="DENY" />
<add name="X-XSS-Protection" value="1; mode=block" />
<remove name="X-Powered-By" />
</customHeaders>
</httpProtocol>
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the main.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="main.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<rule name="HTTP to HTTPS redirect" stopProcessing="true">
<match url="(.*)" />
<conditions>
<add input="{HTTPS}" pattern="off" ignoreCase="true" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent" />
</rule>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^main.js\/debug[\/]?" />
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<match url="^(?!.*login).*$"></match>
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
</conditions>
<action type="Rewrite" url="main.js"/>
</rule>
</rules>
<outboundRules>
<rule name="Add Strict-Transport-Security when HTTPS" enabled="true">
<match serverVariable="RESPONSE_Strict_Transport_Security" pattern=".*" />
<conditions>
<add input="{HTTPS}" pattern="on" ignoreCase="true" />
</conditions>
<action type="Rewrite" value="max-age=31536000" />
</rule>
</outboundRules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!-- Restart the server if any of these files change -->
<iisnode watchedFiles="web.config;*.js;browser/*.*" />
</system.webServer>
</configuration>
我希望这可以在我的情况下帮助其他人，或者至少对辩论有用。没有人愿意在升级到版本 9 后尝试成功部署到 Azure 应用服务。请让我知道是否可以改进某些东西，也许是避免浏览器构建文件夹删除或其他什么的构建参数。干杯。