angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.73k stars 11.98k forks source link

Are npm packages included in the 'compiled' version of the code? #908

Closed NullVoxPopuli closed 8 years ago

NullVoxPopuli commented 8 years ago

I'm trying to use js-data, and I 404s to /js-data and /js-data-http, which, I'm like: why?

shouldn't that be in application.js or whatever the main file is called?

$ ng --version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.5
node: 5.10.1
os: linux x64 (ubuntu 15.10)

image

//package.json
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "js-data": "^3.0.0-beta.6",
    "js-data-http": "^3.0.0-beta.6",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "angular-cli": "^1.0.0-beta.2-mobile.3",
    "clang-format": "^1.0.35",
    "codelyzer": "0.0.14",
    "ember-cli-inject-live-reload": "^1.4.0",
    "jasmine-core": "^2.4.1",
    "jasmine-spec-reporter": "^2.4.0",
    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.3",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "ts-node": "^0.5.5",
    "tslint": "^3.6.0",
    "typescript": "^1.8.10",
    "typings": "^0.8.1",
    "jade": "^1.11.0",
    "jasmine-core": "^2.3.4",
    "jasmine-spec-reporter": "^2.4.0",
    "node-sass": "3.5.3",
    "broccoli-funnel": "1.0.1",
    "broccoli-render-template": "0.0.3"
  }
thorstenschaefer commented 8 years ago

Did you add it to the vendorNpmFiles in angular-cli-build.json? Otherwise, they won't appear in the dist directory.

NullVoxPopuli commented 8 years ago

oh ok, I assumed that was automatic.

are there plans for that to be automatic in the future? (maybe via ng install or something?)

anywho, I feel liek I'm doing something wrong. here is my angular-cli-build.js file

/* global require, module */

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

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

  // // Render all of the jade we have available
  var renderedJadeTree  = renderTemplates(app, { pretty:true });
  return renderedJadeTree;
};

I restarted the server (ng serve), and I still get the 404s. :-(

js-data and js-data-http exist in the node_modules folder.

image

thorstenschaefer commented 8 years ago

I'm not an expert on the topic (fighting with it too) and I agree that currently it's not the most user friendly way, but I suspect this will get better in the future. There's a wiki page describing how to integrate 3rd party libs correctly: https://github.com/angular/angular-cli/wiki/3rd-party-libs

NullVoxPopuli commented 8 years ago

what does ember-cli do that makes this process so easy? can that happen with angular-cli?

NullVoxPopuli commented 8 years ago

I found that I had to add this to my system-config.js:

const map: any = {
  '@portal': '../src/app',
  'js-data': 'vendor/js-data',
  'js-data-http': 'vendor/js-data-http',
  'traceur': 'vendor/traceur'
};

/** User packages configuration. */
const packages: any = {
  'js-data': {
    main: 'lib/mindex/index.js'
  },
  'js-data-http': {
    main: 'dist/js-data-http.min.js'
  },
  'traceur': {
    main: 'bin/traceur.js'
  }
};
NullVoxPopuli commented 8 years ago

but now I'm getting issues with js-data-http, not sure if it's a configuration issue or not.

NullVoxPopuli commented 8 years ago

I'll close this with mentioning that in order to use any third party library:

  1. add to package to json
  2. add to angular-cli-build.js
  3. add to system-config.js#map
  4. add to system-config.js#packages

gross.

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.