Error when importing a .ts file into a .js file

Question

I have .js files and would like to integrate some .ts files we have. When I try to import them I get some odd errors.

Here is the import in my .js file:

import {AuthComponent} from './auth/auth.component';

Here is that .ts file ( auth.component.ts ):

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {UserService} from '../user/user.service'; //also a .ts file

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})

export class AuthComponent implements OnInit {
  loadingConfig: any = {
    fullScreenBackdrop: true,
    backdropBackgroundColour: 'rgba(0,0,0,0.9)',
    primaryColour: '#b8860b'
  };
};

When I try to compile the app I get the following

Error in ./app/auth/auth.component.ts Module parse failed: /data/1/projects/myapp/src/app/auth/auth.component.ts Unexpected character '@' (7:0) You may need an appropriate loader to handle this file type.

Line 7 is the @Component

In my webpack.config.js I added:

resolve: {
   extensions: ['.ts', '.js','.json']
}

I also create a tsconfig.json in the root of app ...that has:

"compilerOptions": {
  "target": "es6",
  "module": "commonjs",
  "allowJs": true,
  "checkJs": true
}

Im guessing I can import a .ts file into a .js file... but maybe Im missing something? thanks all!

Answer 1

It's absolutely normal, Javascript does not know what Typescript is. Your error occurs cuz of decorators which aren't implemented in JS yet.