角9工程不在生产环境中工作
我已经将我们的角度混合项目从8迁移到9。迁移变得很顺利，ng构建/ ng服务也像以前一样运行良好。
真正的问题，我不知道如何开始工作，是在我为生产而构建应用程序之后(比如build )。该项目的着陆页面是完全空白的，没有JS错误，没有控制台警告。看起来AppModule没有加载吗？我们唯一需要做的更改是与main.aot.ts文件相关，我们删除了该文件，因为它不再适用于常春藤编译器。
任何相关的经验，你可能在过去将帮助我，非常感谢！
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"
}
}回答 4
Stack Overflow用户
发布于 2020-06-17 05:59:21
我也有同样的问题。
首先，我尝试在tsconfig.app.json中禁用常春藤，它运行得很好。得出的结论是艾薇的问题。感谢@ Thanks 2846469
"angularCompilerOptions": {
"enableIvy": false
}Github问题在后面的注释中清楚地描述了问题和解决方案。
如果降级组件仅在AngularJS模板中使用，则常春藤不将降级组件包含到生产构建中--它将随着产品构建而从树中分离出来--这体现在组件本身，只是没有呈现。默默地。没有错误警告什么的。
import './downgrade.component';或者像上面那样导入组件，或者考虑在与NgModule相同的文件中注册降级的组件。
Stack Overflow用户
发布于 2020-07-24 20:36:09
我也有同样的问题，在我的例子中，它是在启用严格模式之后发生的。我通过从"sideEffects": false中删除package.json来修复它
Stack Overflow用户
发布于 2020-09-05 19:50:50
我有一个类似的问题，但与一个非混合应用程序-一个全新的从零角度10构建的应用程序，所以我在这里记录它，以防其他开发人员结束了类似的问题。
正如@viral所指出的，禁用常春藤也解决了我的问题：
在tsconfig.base.json中向angularCompilerOptions添加设置"enableIvy": false
因此，问题似乎类似:启用了常春藤之后，一些组件在生产构建中被从树中移出(但在dev运行中没有)，因此，组件完全无法以静默方式呈现，没有错误或生成视图。
在我的例子中，问题是组件A的文件中有一些微小的助手组件(每个代码不超过20行，包括模板和样式)，这些组件被用来呈现组件A的模板，并且工作得很好。当组件B试图在其模板中使用相同的辅助组件时(只在模板中使用它们，而没有在其他地方提及)--虽然它在开发中运行良好，但在生产中失败:组件B完全不能呈现任何内容。
将助手组件直接导入B的文件--这是病毒的答案所建议的解决办法--没有做任何事情。
对我来说，解决方案是将助手组件移动到它们自己的文件中，并在从自己的文件中导入它们之后在NgModule中注册它们。组件A或B不需要更改(除了从A的文件中删除重复行外)。
https://stackoverflow.com/questions/60614292
复制相似问题
腾讯云开发者
