Question

我创建了一个示例混合应用程序，其中Angular应用程序与AngularJS模块并排工作。我正在使用角度升级来实现这一目标。我面临的问题是，尽管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'
        }
      }
    });
}

这是我在main.js文件中引导应用程序的方式：

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文件。

如何在混合Angular应用程序中导入AngularJS模块样式？

0 个答案: