【发布时间】：2020-06-22 03:41:37
【问题描述】：
我已经将我们的 Angular 混合项目从 8 迁移到 9。迁移很顺利，ng build / ng serve 像以前一样工作得很好。
真正的问题是，我不知道如何着手处理它，是在我为生产构建应用程序之后（ng build --prod）。项目的登陆页面完全空白，没有 JS 错误，没有控制台警告。看起来 AppModule 没有加载？我们必须做的唯一更改是与 main.aot.ts 文件有关，我们删除了该文件，因为它不再适用于 IVY 编译器。
您过去可能拥有的任何相关经验都会对我有所帮助，非常感谢！
main.ts 看起来像这样
import {enableProdMode, StaticProvider} from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import {downgradeModule} from "@angular/upgrade/static";
if (environment.production) {
enableProdMode();
}
declare var angular: any;
const bootstrapFn = (extraProviders: StaticProvider[]) => {
const platformRef = platformBrowserDynamic(extraProviders);
return platformRef.bootstrapModule(AppModule);
};
const downgradedModule = downgradeModule(bootstrapFn);
angular.bootstrap(document.getElementById('app-root'), ['angularJSModule', downgradedModule], { strictDi: true });
main.aot.ts （在 Angular9 中删除）
import {enableProdMode, StaticProvider} from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
import {AppModuleNgFactory} from './app/app.module.ngfactory';
import { environment } from './environments/environment';
import {downgradeModule} from "@angular/upgrade/static";
if (environment.production) {
enableProdMode();
}
declare var angular: any;
const bootstrapFn = (extraProviders: StaticProvider[]) => {
const platformRef = platformBrowser(extraProviders);
return platformRef.bootstrapModuleFactory(AppModuleNgFactory);
};
const downgradedModule = downgradeModule(bootstrapFn);
angular.bootstrap(document.getElementById('app-root'), ['angularJSModule', downgradedModule], { strictDi: true });
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
],
"types": ["angular"]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["angular"]
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}
package.json
{
"name": "myproj",
"version": "4.5.0",
"start": "ng serve -aot",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.5",
"@angular/cdk": "~9.1.1",
"@angular/common": "~9.0.5",
"@angular/compiler": "~9.0.5",
"@angular/core": "~9.0.5",
"@angular/fire": "^5.4.2",
"@angular/forms": "~9.0.5",
"@angular/material": "^9.1.1",
"@angular/platform-browser": "~9.0.5",
"@angular/platform-browser-dynamic": "~9.0.5",
"@angular/router": "~9.0.5",
"@angular/upgrade": "^9.0.5",
"@ng-idle/core": "^8.0.0-beta.4",
"@ng-idle/keepalive": "^8.0.0-beta.4",
"@uirouter/angular": "^6.0.1",
"@uirouter/angular-hybrid": "^10.0.1",
"@uirouter/angularjs": "^1.0.25",
"@uirouter/core": "^6.0.4",
"@uirouter/rx": "^0.6.5",
"angular": "^1.7.9",
"foundation-sites": "^6.6.1",
"install": "^0.13.0",
"ng-block-ui": "^2.1.8",
"ngx-cookie-service": "^2.4.0",
"ngx-foundation": "^1.0.8",
"ngx-pendo": "^1.2.3",
"ngx-perfect-scrollbar": "^8.0.0",
"npm": "^6.14.2",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"upgrade": "^1.1.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.5",
"@angular/cli": "~9.0.5",
"@angular/compiler-cli": "~9.0.5",
"@angular/language-service": "~9.0.5",
"@types/angular": "^1.6.57",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.2",
"protractor": "^5.4.3",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.7.5"
}
}
【问题讨论】：
-
您是否有一个
tsconfig.app.json文件，其中包含如下条目："files": ["main.ts","polyfills.ts"]？ -
是的，有一个tsconfig.app.json，我也用它的内容更新了上面的问题。
-
你是用IE浏览的吗？它可以在任何浏览器中使用吗？
-
我试过 Chrome 和 FF 都没有用。当我检查 中的 DOM 树时，看起来组件根本没有生成预期的 HTML
-
您可以暂时选择退出 Ivy，看看是否有什么不同：angular.io/guide/ivy#opting-out-of-angular-ivy