3

I am trying to set up Angular 2 application with all the new tools (jspm 0.17.0-beta.40).

I am transpiling to System module. Here's the tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "ES5",
        "module": "System",
        "moduleResolution": "Node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "rootDir": "../"
      }
}

The issue is with ES6 import. After something like this is transpiled:

import { Component, ViewEncapsulation, AfterViewInit } from '@angular/core';

the use of this would be:

core_1.Component

But unfortunately, the browser running the app can't recognize it.

"TypeError: core_1.Component is not a function
at Object.execute (...app/app.component.js:32:24)
at E (...jspm_packages/system.js:4:7541)
at S (...jspm_packages/system.js:4:6746)
at S (...jspm_packages/system.js:4:6646)
at S (...jspm_packages/system.js:4:6646)
at x (...jspm_packages/system.js:4:6102)
at ...jspm_packages/system.js:5:6612"

The same type of error is raised when I use ViewEncapsulation.

This is when transpiling to System modules.

Transpiling with CommonJS module works (the app passes this step).

I can't work with that though, because I use 

import html from './app.component.html';

with the following meta config:

meta: {
  "*.html": {
     "loader": "text"
  },
}

Which fails with the error 

Error: No template specified for component AppComponent

I have tried switching versions of JSPM and System.

Apparently, the changes introduced in 0.20 version of System cause this.

Any ideas on how to approach this?

Dimdum
  • 322
  • 2
  • 15

1 Answers1

4

Yes this was a change in SystemJS 0.20 where named exports for non-ES modules are no longer supported, in order to align with how interop will work in NodeJS between ES modules and CommonJS, which is to only provide compatibility with the default import form - import module from 'module' (equivalent to import {default as module} from 'module').

Since Angular is being loaded from a UMD bulid which is not an ES module itself, the named exports aren't being supported.

The following configuration can be used to tell SystemJS to treat the Angular core module like an ES module with named exports:

meta: {
  '@angular/core': { esModule: true }
}
guybedford
  • 1,362
  • 11
  • 8
  • 1
    Thank you for your response. This works when using only `System`, with modules installed from node [github.com/dima-gusyatiner/system-0.20-angular-2](https://github.com/dima-gusyatiner/system-0.20-angular-2). This **does NOT work**, however, if I install angular through `jspm` [github.com/dima-gusyatiner/system-0.20-jspm-0.17-angular-2](https://github.com/dima-gusyatiner/system-0.20-jspm-0.17-angular-2) – Dimdum Mar 08 '17 at 22:40