升级到Angular 6后,应用程序显示空白屏幕
我遵循了
https://update.angular.io/给出的步骤
升级到Angular 6后,应用程序显示所有路径的空白屏幕.并且浏览器控制台中也没有显示错误.每个路由重定向到默认路径 http://localhost:4200. 但 http://localhost:4200/admin工作正常. 任何人都可以帮忙,可能是什么问题? 以下是依赖项列表: "dependencies": { "@angular/animations": "6.0.3","@angular/cdk": "^6.2.0","@angular/common": "6.0.3","@angular/compiler": "6.0.3","@angular/core": "6.0.3","@angular/forms": "6.0.3","@angular/http": "6.0.3","@angular/material": "^6.2.0","@angular/material-moment-adapter": "^6.2.0","@angular/platform-browser": "6.0.3","@angular/platform-browser-dynamic": "6.0.3","@angular/router": "6.0.3","@ng-bootstrap/ng-bootstrap": "^2.0.0","@ngx-translate/core": "^10.0.2","@ngx-translate/http-loader": "^3.0.1","@swimlane/ngx-charts": "^8.0.2","@types/lodash": "^4.14.87","bootstrap": "4.0.0","chart.js": "^2.7.2","classlist.js": "^1.1.20150312","codelyzer": "^4.3.0","core-js": "^2.5.1","font-awesome": "^4.7.0","lodash": "^4.17.4","moment": "^2.19.3","ng2-charts": "^1.6.0","ng2-dragula": "^1.3.1","ng2-file-upload": "^1.3.0","ng4-charts": "^1.0.2","rxjs": "^6.2.0","web-animations-js": "^2.2.5","zone.js": "^0.8.19" },"devDependencies": { "@angular-devkit/build-angular": "~0.6.6","@angular/cli": "^6.0.7","@angular/compiler-cli": "6.0.3","@types/jasmine": "2.5.38","@types/node": "^6.0.92","jasmine-core": "~2.5.2","jasmine-spec-reporter": "~3.2.0","karma": "~1.4.1","karma-chrome-launcher": "~2.0.0","karma-cli": "~1.0.1","karma-coverage-istanbul-reporter": "^0.2.0","karma-jasmine": "^1.1.1","karma-jasmine-html-reporter": "^0.2.2","node-sass": "^4.7.2","protractor": "~5.1.0","ts-node": "~2.0.0","tslint": "~5.10.0","typescript": "^2.7.2" } angular.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": { "bcare": { "root": "","sourceRoot": "src","projectType": "application","architect": { "build": { "builder": "@angular-devkit/build-angular:browser","options": { "outputPath": "dist","index": "src/index.html","main": "src/main.ts","tsConfig": "src/tsconfig.app.json","polyfills": "src/polyfills.ts","assets": [ "src/assets" ],"styles": [ "src/fonts.scss","src/styles.scss" ],"scripts": [] },"configurations": { "prod": { "fileReplacements": [ { "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts" } ] } } },"serve": { "builder": "@angular-devkit/build-angular:dev-server","options": { "browserTarget": "bcare:build" },"configurations": { "prod": { "browserTarget": "bcare:build:prod" } } },"extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n","options": { "browserTarget": "bcare:build" } },"test": { "builder": "@angular-devkit/build-angular:karma","options": { "main": "src/test.ts","karmaConfig": "./karma.conf.js","tsConfig": "src/tsconfig.spec.json","scripts": [],"assets": [ "src/assets" ] } },"lint": { "builder": "@angular-devkit/build-angular:tslint","options": { "tsConfig": [ "src/tsconfig.app.json","src/tsconfig.spec.json" ],"exclude": [] } } } },"bcare-e2e": { "root": "","sourceRoot": "","architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor","options": { "protractorConfig": "./protractor.conf.js","devServerTarget": "bcare:serve" } },"options": { "tsConfig": [ "e2e/tsconfig.e2e.json" ],"exclude": [] } } } } },"defaultProject": "bcare","schematics": { "@schematics/angular:component": { "prefix": "cc","styleext": "scss" },"@schematics/angular:directive": { "prefix": "cc" } } } APP-routing.module.ts import {RouterModule,Routes} from '@angular/router'; import {NotFoundComponent} from './core/main/not-found.component'; import {HomeComponent} from './core/main/home/home.component'; import {LoginComponent} from './core/main/login/login.component'; import {NgModule} from '@angular/core'; import {HomeGuard} from './core/main/home/home.guard'; import {CanLoadAdmin} from './core/services/can-load-admin'; import {RulesPreviewComponent} from './branches/preparation-admin/main/rules/rules-preview/rules-preview.component'; export const APP_ROUTES: Routes = [ { path: '',component: HomeComponent,canActivate: [HomeGuard],children: [ { path: '',redirectTo: 'preparation',pathMatch: 'full' },{ path: 'preparation',loadChildren: 'app/branches/preparation/preparation.module#PreparationModule' },{ path: 'admin',loadChildren: 'app/admin/admin/admin.module#AdminModule',canLoad: [CanLoadAdmin] } ] },{path: 'login',component: LoginComponent},{path: 'email-preview/:id',component: RulesPreviewComponent},{path: '**',component: NotFoundComponent},]; @NgModule({ imports: [RouterModule.forRoot(APP_ROUTES)],exports: [RouterModule] }) export class AppRoutingModule { } 解决方法
一旦我从Angular 5更新到6,我遇到了同样的问题.
我发现Angular在我的应用程序中根本没有加载,我甚至没有收到消息“Angular正在开发模式下运行.调用enableProdMode()来启用生产模式.”经过一番挖掘后,我注意到Angular 6生成的文件之一是不同的.在它生成inline.js,polyfills.js,scripts.js,vendor.js和main.js之前.从Angular 6开始,它现在生成runtime.js而不是inline.js.我一直在使用Angular和MVC,所以我直接引用了输出文件.我将引用从内联.*更改为运行时.*(对于MVC,它在BundlesConfig.cs中),一切都是正确的. 生成的文件应该在/ dist /中生成,除非你改变了它.您可以在项目中确认angular.json中的路径 – > my-project-name – >建筑师 – >构建 – >选项 – > outputPath. 升级的另一个问题可能与您的问题有关,因为我的css文件不再生成,因为ng build的-ec参数不再适用于Angular 6;你现在必须使用–extract-css. 希望有所帮助. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |