从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：[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
    }
  }
}

之后这些准备工作 - 构建应该有效......

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

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