4

I am trying to import import { UpgradeComponent } from '@angular/upgrade/static'; for using angular1 directive in angular2 using ngupgrade but I am getting this error.

Code:

import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
@Directive({
  selector: 'help'
})
export class HelpComponentA1Directive extends UpgradeComponent {
  constructor(elementRef: ElementRef, injector: Injector) {
      super('help', elementRef, injector);
  }
}
Lazar Ljubenović
  • 18,976
  • 10
  • 56
  • 91
Johnson Samuel
  • 2,046
  • 2
  • 18
  • 29
  • where is the error? show stack trace of the error please – Rehban Khatri Dec 02 '16 at 22:00
  • Rehban, Error message : main.bundle.js:84 Uncaught SyntaxError: Unexpected token export error shown in the console in the section-> export { downgradeComponent } from './src/aot/downgrade_component'; – Johnson Samuel Dec 02 '16 at 22:03
  • @johnsam Stacktrace means you should post not one line but a stack of calls from the root. – Roman C Dec 02 '16 at 23:18
  • @romanc: thanks for your time to take a look at this, export { downgradeComponent } from './src/aot/downgrade_component'; -> error is shown in the console in the first line itself export { downgradeInjectable } from './src/aot/downgrade_injectable'; export { UpgradeComponent } from './src/aot/upgrade_component'; export { UpgradeModule } from './src/aot/upgrade_module'; – Johnson Samuel Dec 05 '16 at 19:39

1 Answers1

0

export is not a javascript keyword, somehow your browser is loading the .ts file when it should be loading the compiled .js file.

Depending on the method you use to bundle modules, the solution to fix this problem could be anything. But you've got an instruction somewhere that is telling the browser that when it sees @angular/upgrade/static, then it should load node_modules/@angular/upgrade/static.ts. It should instead load one of

  • node_modules/@angular/upgrade/static.js, or
  • node_modules/@angular/upgrade/bundles/static.umd.js

The other potential problem you could have (and I've come across this multiple times) is that you've commented out an import statement to @angular/upgrade/static somewhere.

ovangle
  • 1,991
  • 1
  • 15
  • 29
  • thanks for your help. Looks like the root in the webpack was set in different place. It works now. – Johnson Samuel Dec 05 '16 at 22:06
  • @johnsam what did you change in your webpack config? I am having similar issues with my setup also. – TheBlueMan Dec 15 '16 at 18:22
  • @bluestring module.exports = { entry: { vendor: './app/vendor', main: './app/main', css: './app/styles.less' }, output: { path: __dirname, filename: "./build/[name].bundle.js" }, resolve: { root: path.join(__dirname, 'app'), }, module: { loaders: [ { test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/ } ] } }; – Johnson Samuel Dec 15 '16 at 23:15