Why angular use `import { SomeComponent } from 'some.component.ts'` instead of `import SomeComponent from 'some.component.ts'`

Question

I write React/Vue. As usual, I like to export/import a default component.

// export
export default class SomeComponent from Component {
    // blahblah
}

// import
import SomeComponent from './some.js'

But when I use angular2+, I found a strange thing. It uses destructive import/export form.

// export
@Component({/* ... */})
export class SomeComponent {
    // blahblah
}

// import
import {SomeComponent} from './some.component.ts'

Why? I think it a little troublesome. It's defined by Typescript rules or contributor?

Possible duplicate of Why isn't "export default" recommended in Angular? — Sergeon
– Sergeon, Commented Jan 5, 2018 at 7:34

Igor Kurpis · Accepted Answer · 2018-01-05 07:26:46Z

1

If you add default before class then you gonna be able to import in in the same way as in React/Vue.

answered Jan 5, 2018 at 7:26

Igor Kurpis

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sandip Jaiswal · Accepted Answer · 2018-01-05 08:05:57Z

1

A typescript or javascript file can export multiple class( or functions, constants). Due to this behaviour you export your class( or functions, constants) in this fashion:

export class MyClass{}

and import in this fashion:

// import
import {MyClass} from './myClass.ts'

If you are sure that you will export only single class( or functions, constants) then just use following syntax:

//export
export default class MyClass{}
//import
import MyClass from "./myclass.ts"

answered Jan 5, 2018 at 8:05

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

Comments

user4676340 · Accepted Answer · 2018-01-05 07:40:50Z

0

This is the standard behavior.

It allows you to export several things out of your file.

For instance

export class MyClass {}
export const MyClassMockedForTesting = {};

But if you want to change that, you can use the default keyword like so

export default class MyClass {}

It will export your class and you won't need brackets anymore.

answered Jan 5, 2018 at 7:40

user4676340

Comments

Shanon Jackson · Accepted Answer · 2018-01-05 08:07:50Z

0

Angular Doesn't use default imports on its packages because default imports are not good. Other people have covered why in seperate posts so i'll link to one here. https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

answered Jan 5, 2018 at 8:07

Shanon Jackson

6,6611 gold badge26 silver badges42 bronze badges

Comments

yuan zhu · Accepted Answer · 2018-01-05 08:53:28Z

0

If you use 'import some from somecomponent' unless there is only one export moudel in the somecomponent,if there are more than one export moudle,you must use {} to specified import which moudle

answered Jan 5, 2018 at 8:53

yuan zhu

963 bronze badges

Collectives™ on Stack Overflow

Why angular use `import { SomeComponent } from 'some.component.ts'` instead of `import SomeComponent from 'some.component.ts'`

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related