从 Angular 2.2.3 升级到 2.4.0 [英] Upgrading from Angular 2.2.3 to 2.4.0

问题描述

我刚刚使用 npm 检查更新.使用 angular-cli 编译后，我收到此警告.不过，应用程序本身似乎运行良好.

I've just upgraded my Angular project from Angular 2.2.3 to 2.4.0 using npm-check-updates. Upon compilation using angular-cli, I am receiving this warning. The application itself seems to run fine, though.

>ng build
--snip--
ERROR in AppModule is not an NgModule

问题是它没有给我任何关于问题可能是什么的信息.如果需要任何其他代码或信息，我可以提供.

The problem is that it is not giving me any information on what the issue could possibly be. If any other code or information is needed, I can provide that.

新的 package.json:

"dependencies": {
    "@angular/common": "2.4.0",
    "@angular/compiler": "2.4.0",
    "@angular/core": "2.4.0",
    "@angular/forms": "2.4.0",
    "@angular/http": "2.4.0",
    "@angular/platform-browser": "2.4.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "3.4.0",
    "bootswatch": "^3.3.7",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "font-awesome": "^4.7.0",
    "mongoose": "^4.7.4",
    "morgan": "^1.7.0",
    "rxjs": "5.0.1",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.7.4"

旧 package.json

"dependencies": {
    "@angular/common": "2.2.3",
    "@angular/compiler": "2.2.3",
    "@angular/core": "2.2.3",
    "@angular/forms": "2.2.3",
    "@angular/http": "2.2.3",
    "@angular/platform-browser": "2.2.3",
    "@angular/platform-browser-dynamic": "2.2.3",
    "@angular/router": "3.2.3",
    "bootswatch": "^3.3.7",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "font-awesome": "^4.7.0",
    "mongoose": "^4.7.1",
    "morgan": "^1.7.0",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routes } from './app.router';

import { AppComponent } from './app.component';
import { BoardIndexComponent } from './board-index/board-index.component';
import { ViewForumComponent } from './view-forum/view-forum.component';
import { ViewTopicComponent } from './view-topic/view-topic.component';
import { PostingComponent } from './posting/posting.component';

import { DatabaseService } from './services/database.service';

@NgModule({
  declarations: [ // Components and directives 
    AppComponent,
    BoardIndexComponent,
    ViewForumComponent,
    ViewTopicComponent,
    PostingComponent
  ],
  imports: [ // Module dependencies
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
  ],
  providers: [DatabaseService], // Services
  bootstrap: [AppComponent] // Root component
})
export class AppModule { }

推荐答案

使您的 package.json 文件类似于此

Make your package.json file similar to this

 "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/compiler-cli": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.4.1",
    "@angular/upgrade": "2.4.1",
    "@angular/material": "2.0.0-beta.0",
    "bootstrap": "^3.3.7",
    "concurrently": "^3.1.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "systemjs": "^0.19.41",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/chai": "^3.4.34",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.5.38",
    "@types/selenium-webdriver": "2.53.38",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.4",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-remap-istanbul": "^0.4.0",
    "protractor": "4.0.14",
    "ts-node": "1.7.2",
    "tslint": "4.2.0",
    "typescript": "2.0.10"
  }

并再次运行npm install".如果您在此之前清理 node_modules 文件夹，效果会更好.之后运行npm -g angular-cli@latest".而且在 angular-cli.json 文件属性资产"现在应该是数组而不是标量:"assets": ["assets"] 现在应该添加默认部分:

and run "npm install" once again.Even more better if you clean node_modules folder before that. After that run "npm -g angular-cli@latest". More over in angular-cli.json file property "assets" should now be array instead of scalar: "assets": ["assets"] and defaults section should now be added :

"defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": true,
      "template": true
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }

像这样:

{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "testcli"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "indexcli.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "",
      "mobile": false,
      "styles": [],
      "scripts": [
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": true,
      "template": true
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

在所有这些准备工作之后 - ng build 应该可以工作了......

After all these preparations - ng build should work ...

这篇关于从 Angular 2.2.3 升级到 2.4.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！