CODEWITHSUNDEEP
angularangular-cli
Luke Baughan
Luke Baughan

Reputation: 4686

angular-cli throws error on ng init and ng build but not ng new

I'm trying to run ng build --prod on a modified version of the 5 minute quickstart app. The project was not created with ng. I get the following error when I run ng build --prod or ng init --source-dir app (which I read somewhere should help with the build part). I can run other ng commands successfully and the build command works on projects that I create using ng. I'm guessing that something isn't quite right within my project setup or files but I don't understand what this error message is trying to tell me. Additionally I manually updated the dependancies from RC2 to RC4 versions, removed node_modules and ran npm install (not sure whether that's important). I ran ng new TestApp and copied across the angular-cli.json and angular-cli-build.json files manually into this project and additionally ran npm install angular-cli from the root folder to see if that would also help, it didn't. I have angular-cli installed globally too.

C:\ng2\testApp\Web.UI.Angular2>ng init --source-dir app
(node:10640) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
C:\ng2\testApp\Web.UI.Angular2\node_modules\angular-cli\node_modules\ember-cli\lib\models\project.js:642
      throw reason;
      ^
SyntaxError: Unexpected token  in JSON at position 0
    at Object.parse (native)
    at Function.Project.closestSync (C:\ng2\testApp\Web.UI.Angular2\node_modules\angular-cli\node_modules\ember-cli\lib\models\project.js:610:16)
    at Function.Project.projectOrnullProject (C:\ng2\testApp\Web.UI.Angular2\node_modules\angular-cli\node_modules\ember-cli\lib\models\project.js:637:20)
    at module.exports (C:\ng2\testApp\Web.UI.Angular2\node_modules\angular-cli\node_modules\ember-cli\lib\cli\index.js:94:25)
    at module.exports (C:\ng2\testApp\Web.UI.Angular2\node_modules\angular-cli\lib\cli\index.js:106:10)
    at C:\Users\Luke.Baughan\AppData\Roaming\npm\node_modules\angular-cli\bin\ng:31:5
    at C:\Users\Luke.Baughan\AppData\Roaming\npm\node_modules\angular-cli\node_modules\resolve\lib\async.js:44:21
    at ondir (C:\Users\Luke.Baughan\AppData\Roaming\npm\node_modules\angular-cli\node_modules\resolve\lib\async.js:187:31)
    at C:\Users\Luke.Baughan\AppData\Roaming\npm\node_modules\angular-cli\node_modules\resolve\lib\async.js:153:39
    at onex (C:\Users\Luke.Baughan\AppData\Roaming\npm\node_modules\angular-cli\node_modules\resolve\lib\async.js:93:22)

System.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

tsconfig.js:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

angular-cli.json:

{
  "project": {
    "version": "1.0.0-beta.9",
    "name": "testApp"
  },
  "apps": [
    {
      "main": "app/main.ts",
      "tsconfig": "tsconfig.json",
      "mobile": false
    }
  ],
  "addons": [],
  "packages": [],
  "defaults": {
    "prefix": "app",
    "sourceDir": "",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

angular-cli-build.json:

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
    ]
  });
};

So my question is what have I missed and/or what is the error trying to tell me about why ng build and ng init don't run as expected.

Upvotes: 1

Views: 2851

Answers (1)

Luke Baughan
Luke Baughan

Reputation: 4686

OK so not the best but this is what I went with:

  • Create a brand new app with ng new MyApp
  • Copy across all the bits n bobs related to my app into the new project structure
  • Run ng build
  • Run ng serve

Thankfully angular-cli is very forgiving and I only had a few components and a handful of services so moving it wasn't too much trouble.

Upvotes: 1

Related Questions