我已经将我们的 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"]
? - user2846469