Блог

У меня есть файлы .js, и я хотел бы интегрировать некоторые имеющиеся у нас файлы .ts. Когда я пытаюсь их импортировать, я получаю несколько странных ошибок.

Вот импорт в мой файл .js:

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

Вот этот файл .ts ( 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'
  };
};
  

Когда я пытаюсь скомпилировать приложение, я получаю следующее

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.

Строка 7 — это @Component

В моем webpack.config.js я добавил:

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

Я также создаю tsconfig.json в корне app …это имеет:

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

Я предполагаю, что могу импортировать файл .ts в файл .js… но, может быть, я что-то упускаю?
спасибо всем!

Это абсолютно нормально, Javascript не знает, что такое Typescript. Ваша ошибка возникает из-за декораторов, которые еще не реализованы в JS.