I have some .js files and I want to incorporate certain .ts files into them. However, when I attempt to import these files, I encounter some strange errors.
Here is the import statement in my .js file:
import {AuthComponent} from './auth/auth.component';
This is the content of the .ts file (auth.component.ts):
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {UserService} from '../user/user.service'; // which is 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'
};
};
Upon trying to compile the application, I am confronted with the following error message:
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.The issue is pinpointed to line 7 where @Component is located.
In my webpack.config.js file, I made the following addition:
resolve: {
extensions: ['.ts', '.js','.json']
}
Additionally, I created a tsconfig.json at the root of the app folder containing:
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"allowJs": true,
"checkJs": true
}
I assume it should be possible to import a .ts file into a .js file, but perhaps there is something that I am overlooking? Thank you all for your help!