Как импортировать стили модулей AngularJS в гибридное приложение Angular? - PullRequest
Новая
       27

Как импортировать стили модулей AngularJS в гибридное приложение Angular?

0 голосов
/ 23 января 2019

Я создал пример гибридного приложения, в котором приложение Angular работает бок о бок с модулем AngularJS.Я использую angular-upgrade для достижения этой цели.Проблема, с которой я сталкиваюсь, заключается в том, что хотя модули / компоненты AngularJS видны и работают, важные для них стили не видны в браузере.

Я попытался «импортировать» ../views/downloadManager.styl ';»Линия, которая работала, когда модуль AngularJS был автономным приложением.Кроме того, файл представления импортируется таким же образом, и он работает нормально.

Эта функция импортирована в модуль AngularJS: 

import {StateProvider} from '@uirouter/angularjs';

import '../views/downloadManager.pug';
import '../views/downloadManager.styl';

/**
 * @ngInject
 */
export default function DownloadManagerRouterConfig(
  $stateProvider: StateProvider
) {
  $stateProvider
    .state('downloadManager', {
      url: '/downloadmanager',
      abstract: true,
      views: {
        main: {
          templateUrl: 'downloadManager/views/downloadManager.pug'
        }
      }
    });
}

Так я загружаю приложения в основном.js file: 

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  setAngularLib(AngularJs);

  const config = require('./config.json');
  (<any>window).__XS_MMXUI_APP_CONFIG__ = config;

  const appMountPoint = document.querySelector('[xs-app-mountpoint]');
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(appMountPoint, [DownloadManager], {strictDi: false});
  console.log('hybrid app bootstrapped');
})
  .catch(err => console.log(err));

Глобальные стили, которые импортированы в файл 'styles.css' из корня всех приложений, видны в браузере.Но импорт из модуля выше не , хотя кажется, что Webpack помещает его в мой выведенный файл main.js .

...