Check out this SystemJS + TypeScript plunk, which was created using the official Angular plunk template.
An error is being thrown:
(SystemJS) SyntaxError: Missing initializer in const declaration
at eval ()
...
This error occurs when the .ts file is treated as regular JavaScript, especially if it lacks import or export statements:
main.ts
const foo: boolean = 'foo';
console.log(foo);
config.js
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'app': './src',
...
},
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
...
}
});
index.html
...
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b1812181f0e0601182b5b455a5245585a">[email protected]</a>/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
...
However, the same plunk works smoothly with ES6 module indicators present:
main.ts
const foo: boolean = 'foo';
console.log(foo);
export default null;
If a file has a .ts extension, it should ideally be interpreted as TypeScript, regardless of whether it imports anything or not.
Why does this issue occur in this particular setup? And what steps can be taken to resolve it?