在开发模式(APS-WebAPI)下,构建工作完美,没有错误(ng b --watch)。当更改为生产模式(ng b --aot 或 ng b --prod)时,页面加载时不会出现错误,但会导致空页面。 Index.cshtml 将通过从 Homecontroller 搜索文件夹中的 *.js 文件来生成。自从我们从 Angular-6 升级到 Angular-8 后,就会出现此问题。
我们希望发布我们的更改和环境升级(Angular-8 和 TypeScript 3.4.5)。在开发模式(ng b --watch)中,我们将 main.js / polyfills.js / runtime.js / styles.css /vendor.js /modules*.js 渲染到 Index.cshtml。这非常有效。
当使用 --aot 或 --prod 发布时,我们会获得 ES5 和 ES2015 的所有文件。在同一方案中,我们将其渲染到 Index.cshtml。加载页面后,找到所有文件,但页面为空白,没有错误。这些文件都像 Angular 生成的 index.html 一样加载
我们使用以下 Index.cshtml,它对于开发模式和生产模式通常是相同的。
ConfigurationViewModel model = new ConfigurationViewModel();
var webPath = HttpRuntime.AppDomainAppVirtualPath;
var localPath = HostingEnvironment.MapPath(webPath);
var angularPath = Path.Combine(localPath ?? throw new InvalidOperationException(), "Map");
var angularDirectory = new DirectoryInfo(angularPath);
产品模式
model.RuntimeJsEs5 = angularDirectory.GetFiles("runtime-es5*.js").Single().Name;
model.RuntimeJsEs2015 = angularDirectory.GetFiles("runtime-es2015*.js").Single().Name;
model.PolyfillsJsEs5 = angularDirectory.GetFiles("polyfills-es5*.js").Single().Name;
model.PolyfillsJsEs2015 = angularDirectory.GetFiles("polyfills-es2015*.js").Single().Name;
model.MainJsEs5 = angularDirectory.GetFiles("main-es5*.js").Single().Name;
model.MainJsEs2015 = angularDirectory.GetFiles("main-es2015*.js").Single().Name;
model.StylesCss = angularDirectory.GetFiles("styles.css").Single().Name;
<head>
....
<link rel="stylesheet" href="@Model.ConfigurationViewModel.StylesCss">
....
</head>
<body>
....
<script type="module" #src="@Model.ConfigurationViewModel.RuntimeJsEs2015"></script>
<script type="module" src="@Model.ConfigurationViewModel.PolyfillsJsEs2015"></script>
<script nomodule src="@Model.ConfigurationViewModel.RuntimeJsEs5"></script>
<script nomodule" src="@Model.ConfigurationViewModel.PolyfillsJsEs5"></script>
<script type="module" src="@Model.ConfigurationViewModel.MainJsEs2015"></script>
<script nomodule src="@Model.ConfigurationViewModel.MainJsEs5"></script>
....
</body>
Dev-Mode
model.RuntimeJsEs2015 = angularDirectory.GetFiles("runtime.js").Single().Name;
model.PolyfillsJsEs2015 = angularDirectory.GetFiles("polyfills.js").Single().Name;
model.MainJsEs2015 = angularDirectory.GetFiles("main.js").Single().Name;
model.StylesCss = angularDirectory.GetFiles("styles.css").Single().Name;
model.VendorJsEs2015 = angularDirectory.GetFiles("vendor.js").Single().Name;
<head>
....
<link rel="stylesheet" href="@Model.ConfigurationViewModel.StylesCss">
....
</head>
<body>
....
<script type="module" src="@Model.ConfigurationViewModel.RuntimeJsEs2015"></script>
<script type="module" src="@Model.ConfigurationViewModel.PolyfillsJsEs2015"></script>
<script type="module" src="@Model.ConfigurationViewModel.VendorJsEs2015"></script>
<script type="module" src="@Model.ConfigurationViewModel.MainJsEs2015"></script>
....
</body>
如果有必要,我稍后也会发布 angular.json 。