code-chunks/angular2-logger

Error importing angular2-logger in Webpack vendor bundle

Closed this issue · 11 comments

andreimaximov commented

I'm using Webpack to build my project and I have a separate vendor.ts file where I import all third party modules to build a separate vendor.bundle.js file.

angular2-logger is having trouble with the import 'module' import format. The following are my vendor.ts files and the Webpack build error message.

vendor.ts

import '@angular/core';
import '@angular/platform-browser-dynamic';
import '@angular/http';
import 'angular2-logger/core'; // This causes an issue...
import * as ng2log from 'angular2-logger/core';  // But this works...
import 'material-design-lite/material';

require('material-design-lite/material.css');

Error

ERROR in ./~/angular2-logger/core.ts
Module build failed: Error: Unknown file /Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/angular2-logger/core.ts
    at State.fastEmit (/Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/awesome-typescript-loader/dist.babel/host.js:300:23)
    at transform (/Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/awesome-typescript-loader/dist.babel/index.js:215:53)
    at _callee3$ (/Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/awesome-typescript-loader/dist.babel/index.js:265:42)
    at tryCatch (/Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/awesome-typescript-loader/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:62:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/awesome-typescript-loader/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:336:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/awesome-typescript-loader/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:95:21)
    at fulfilled (/Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/awesome-typescript-loader/dist.babel/index.js:31:32)
    at run (/Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/core-js/modules/es6.promise.js:89:22)
    at /Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/core-js/modules/es6.promise.js:102:28
    at flush (/Users/amaximov/Documents/Projects/collegevend-angular2-client/node_modules/core-js/modules/_microtask.js:18:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)
 @ ./src/boot/vendor.ts 5:0-31

Am I missing something obvious or is this a bug?

langley-agm commented

Does this work for you ? import {Logger} from "angular2-logger/core";

andreimaximov commented

Yup. That's how I'm using it in the meat of my actual code.

Just the import 'angular2-logger/core' syntax is throwing that error when building the vendor.bundle.js.

langley-agm commented

I'm sorry I haven't used webpack, but I'm not sure why you wouldn't write it as import {Logger} from "angular2-logger/core"; that's just simple typescript, in order to use webpack you have to change the way you write your typescript?

andreimaximov commented

The idea is that I have three separate bundles that power my app:

  1. polyfills (core-js/es6, core-js/es7/reflect, etc.)
  2. vendor (@angular2/*, ng2-mdl, etc.)
  3. main (Code for my app)

The two main benefits of this are...

  1. Polyfills and vendor rarely change so browser can just cache those files even if my app code changes as long as I'm not using any new libraries (Doesn't matter for development but beneficial in production)
  2. I'm also new to webpack, but I believe it speeds up the build during auto-reload because it only has to rebuild my app code and can ignore the vendor/libs which do not change.

Because of this I'm simply dumping import 'angular2-logger/core' into my vendor.ts to include it in the vendor bundle. I use import {Logger} from 'angular2-logger/core' in places I'm using the logger, but Webpack puts the compiled JS into a separate vendor/libs bundle from my application code.

To me this is the cleanest (No unused variable linter warnings) and most convenient syntax which is why I went with that approach. Either way, I can use the import * as ng2log from 'angular2-logger/core'; workaround.

Just though I'd share this issue since it is valid TypeScript module syntax.

langley-agm commented

I'll try to get into webpack as soon as I get some free time to understand this better, but as of now I see the following:

import '@angular/core'; is a folder. Maybe pointing to /index.ts by default.

'angular2-logger/core'; is a file.

It wasn't like that before.
Since I'm guessing you are using https://angular.io/docs/ts/latest/guide/webpack.html as a guide.

Latest changes were for rc1. As soon as I get a chance I'll apply the changes for rc2 and take a look at this issue with it.

vkniazeu commented

I'm getting a similar problem trying to load the angular2-logger library dynamically without explicitly including its script in the host html page.
I'm using system-config.js, not webpack.

I've tried various options in system-config.ts, like the following, but always end up with some angular2-logger file not being found at runtime.

// system-config.ts
/** Map relative paths to URLs. */
const map: any = {
  'firebase': 'vendor/firebase/firebase.js',
  'angularfire2': 'vendor/angularfire2',

  'angular2-logger': 'vendor/angular2-logger'
};

/** User packages configuration. */
const packages: any = {
  'angularfire2': {
    defaultExtension: 'js',
    main: 'angularfire2.js'
  },
  'angular2-logger': {
    defaultExtension: 'js',
    main: 'core.js'
  }
};

I'm trying to follow the 'firebase' or the 'angularfire2' config pattern and have updated angular-cli-build.js, tsconfig.json, and system-config.ts accordingly.

Have you had any luck with loading the angular2-logger dynamically?

vkniazeu commented

Got it to work with system-config.js!
Attaching the relevant files.

angular2-logger with system-config.zip

Looking forward to the remaining TODOs completion
Thanks!

langley-agm commented

@andreimaximov Did you ever solve this?

Did you try import 'angular2-logger' ?

Do you have a way in which I can reproduce it to see if I can figure it out?

I'm curious why does it say unknown file node_modules/angular2-logger/core.ts, you do have that file right?

andreimaximov commented

@langley-agm on angular2-logger 0.3 there were only core.js and core.d.ts files under node_modules/angular2-logger.

I'm having problems rebuilding my project because of a bunch of Angular 2 + typings deprecations so I haven't upgraded to a newer version of angular2-logger yet. (Going to be very busy for the next couple weeks so probably won't have time to try it in the near future)

langley-agm commented

because of a bunch of Angular 2 + typings deprecations

Tell me about it...

Anyway I think I'm going to close it for now as no one else seems to have the same problem and we don't know if the same issue happens in new versions. Please re-open if you encounter it again.

langley-agm commented

@andreimaximov

For reference if you ever retry, I followed this guide:

https://angular.io/docs/ts/latest/guide/webpack.html

Then I added import 'angular2-logger/core'; to the vendor.ts and it worked fine =)

Let me know if anything.