Import 3rd Party library with no dependency #1367

AlBlanc · 2016-07-18T10:10:04Z

OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
I am running Mac OSX El Capitan (v10.11.5)
Versions. Please run ng --version. If there's nothing outputted, please

angular-cli: 1.0.0-beta.9
node: 5.7.0
os: darwin x64

Repro steps. Was this an app that wasn't created using the CLI? What change did you
do on your code?

I created the app with the cli. Then I installed the typedjson package using npm install typedjson --save and also installed typings with typings install npm:typedjson --save --global

TypedJSON repository

I Followed the 3rd party library installation wiki page. Here are my edited files:

angular-cli-build.js:

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)',
      'typedjson/js/indes.js',
    ]
  });
};

system-config.ts:

const map: any = {
  'typedjson': 'vendor/typedjson/js'
};

/** User packages configuration. */
const packages: any = {
  'typedjson': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'index.js',
  }
};
...

Then I try to import the module in a file:

import { JSONObject } from 'typedjson';

@JSONObject
export class PageMetaData {
    total: number;
    offset: number;
    count: number;
}

The result is a error during compilation:

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /Users/alblanc/Projects/Sportner/Api/web-app/tmp/broccoli_type_script_compiler-input_base_path-G44AiMQ5.tmp/0/src/app/response.ts (1, 10): Module ''typedjson'' has no exported mng 'JSONObject'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (node.js:370:9)
    at process._tickCallback (node.js:401:11)

The broccoli plugin was instantiated at:
    at BroccoliTypeScriptCompiler.Plugin (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BroccoliTypeScriptCompiler (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49)
    at Angular2App._getTsTree (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:329:18)
    at Angular2App._buildTree (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:124:23)
    at new Angular2App (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/alblanc/Projects/Sportner/Api/web-app/angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
    at /Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

Mention any other details that might be useful.

I notice every "member" strings are replaced by "mng". When i try to import JSONMember it appears as JSONMng in the log.

I also use typings v1.0.0. as global node package.

The text was updated successfully, but these errors were encountered:

AlBlanc · 2016-07-18T13:35:30Z

I don't know what i changed ... Now i am back to the error "Cannot find module":

Error: Typescript found the following errors:
  /Users/alblanc/Projects/Sportner/Api/web-app/tmp/broccoli_type_script_compiler-input_base_path-WcjnF0kE.tmp/0/src/app/response.ts (1, 28): Cannot find module 'typedjson'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (node.js:370:9)
    at process._tickCallback (node.js:401:11)

The broccoli plugin was instantiated at:
    at BroccoliTypeScriptCompiler.Plugin (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BroccoliTypeScriptCompiler (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49)
    at Angular2App._getTsTree (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:329:18)
    at Angular2App._buildTree (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:124:23)
    at new Angular2App (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/alblanc/Projects/Sportner/Api/web-app/angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
    at /Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/alblanc/Projects/Sportner/Api/web-app/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)```

AlBlanc · 2016-07-18T15:37:33Z

And i finally came back to the previous error by executing ng init

AlBlanc · 2016-07-18T17:11:22Z

I tried import * as tp from 'typedjson'; to have a look on public members. Then i discovered my module is not copied in dist/vendor as it should.

Even when I copy it manually, the index.js is not found when i run the web application. (I assume SystemJS registry have an issue)

AlBlanc · 2016-07-19T13:56:53Z

I though my issue was resolved (by a magical conspiracy) because the compiler is able to resolve the module. I just still have a last issue: library files are not copied in my dist/vendor directory (and it does not work if i copy it manually in dev environment)

refrigerator · 2016-07-21T05:59:38Z

Also having this issue - I've added the 3rd party packages to the angular-cli-build.js and system-config.ts but when I build, the packages aren't being added to dist/vendor. Any ideas?

aciccarello · 2016-07-21T13:34:00Z

I notice every "member" strings are replaced by "mng". When i try to import JSONMember it appears as JSONMng in the log.

This is also reported in #1405

filipesilva · 2016-07-28T03:30:47Z

Closed as issue was made obsolete by #1455.

angular-automatic-lock-bot · 2019-09-06T00:41:35Z

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.}

AlBlanc closed this as completed Jul 19, 2016

AlBlanc reopened this Jul 19, 2016

filipesilva closed this as completed Jul 28, 2016

filipesilva added the type: RFC / discussion / question label Jul 28, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Import 3rd Party library with no dependency #1367

Import 3rd Party library with no dependency #1367

AlBlanc commented Jul 18, 2016 •

edited

Loading

AlBlanc commented Jul 18, 2016

Uh oh!

AlBlanc commented Jul 18, 2016

Uh oh!

AlBlanc commented Jul 18, 2016

Uh oh!

AlBlanc commented Jul 19, 2016 •

edited

Loading

Uh oh!

refrigerator commented Jul 21, 2016

Uh oh!

aciccarello commented Jul 21, 2016

Uh oh!

filipesilva commented Jul 28, 2016

Uh oh!

angular-automatic-lock-bot bot commented Sep 6, 2019

Uh oh!

Import 3rd Party library with no dependency #1367

Import 3rd Party library with no dependency #1367

Comments

AlBlanc commented Jul 18, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

AlBlanc commented Jul 18, 2016

Uh oh!

AlBlanc commented Jul 18, 2016

Uh oh!

AlBlanc commented Jul 18, 2016

Uh oh!

AlBlanc commented Jul 19, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

refrigerator commented Jul 21, 2016

Uh oh!

aciccarello commented Jul 21, 2016

Uh oh!

filipesilva commented Jul 28, 2016

Uh oh!

angular-automatic-lock-bot bot commented Sep 6, 2019

Uh oh!

AlBlanc commented Jul 18, 2016 •

edited

Loading

AlBlanc commented Jul 19, 2016 •

edited

Loading