Как Angular Compiler или Angular CLI конвертируют файлы Imports of Typescript? - PullRequest
Новая
       11

Как Angular Compiler или Angular CLI конвертируют файлы Imports of Typescript?

0 голосов
/ 03 апреля 2019

Я недавно натолкнулся на проблему, что мои сервисы не были Singletons в моем коде, и мне потребовалось некоторое время, чтобы выяснить, почему это так, потому что я был на 99% уверен, что код, который я использовал, был правильным. В конце концов это было правильно, но Import в одном из моих файлов page.ts не были правильно заполнены автоматически.

Вместо

Import { Foo } from '../services/foo.service';

было импортировано вот так

Import { Foo } from '../services/foo.service.js';

Теперь я пытаюсь выяснить, почему мой код был скомпилирован без каких-либо ошибок или предупреждений.

Я пытался исследовать в Google, как работает компилятор angular cli, и это то, что я придумал, я не уверен, что это правильно:

Компилятор берет каждый файл в моем проекте и преобразует его в связанный файл Javascript, это означает, что файлы .html, .css и .ts в конце концов преобразуются в один файл. В этом процессе код, который не используется в представлении компилятора, удаляется.

Когда у меня есть служебный файл .ts, я должен использовать декоратор @Injectable с providedIn: 'root' в его теле, чтобы сообщить angular, что я хочу, чтобы этот сервис был одноэлементным (это относится к angular 6+). Когда компилятор видит расширение .js в импорте, он предполагает, что файл в пути является файлом Javascript, и поскольку этот декоратор в этом случае не используется, он отбрасывается.

Поэтому, когда он запускает мой скомпилированный код и я использую сервис на 2 разных страницах, он создает 2 экземпляра вместо одного, и это вызывает проблемы у меня, потому что я изменял данные в обоих случаях, предполагая, что я работаю только на одной.

FooService.ts 

import { Injectable } from '@angular/core';
@Injectable(
  { providedIn: 'root' }
)
export class FooService {

constructor() {
    console.log('This should only show once');
  }
}

TestPage.ts 

import { FooService } from '../services/foo.service.js'; // <- this is not correctly imported

@Component({
  ...
})

export class TestPage implements OnInit {

constructor(private foo: FooService) { }
}

TestPage2.ts 

import { FooService } from '../services/foo.service'; // <- this however is  correctly imported

@Component({
  ...
})

export class TestPage2 implements OnInit {

constructor(private foo: FooService) { }
}

Ожидаемым результатом будет то, что текст console.log будет выводиться только один раз в консоли, но реальный результат заключается в том, что при переходе от TestPage к TestPage2 в консоли будет 2 выхода.

Итак, мой вопрос, в конце концов, правильное ли мое понимание или это какая-то другая проблема, о которой я не знаю?

Может быть, кто-то может предоставить ссылку или текст о том, как Angular использует импорт в файлах Typescript

...