在chrome扩展中引导多个不同的angluar2视图

Question

所以我正在构建一个具有多个html视图的chrome扩展，一个用于浏览器操作弹出，另一个用于另一个功能（让我们称之为view1.html和view2.html）。我使用systemjs作为我的模块加载器。由于Chrome扩展程序不允许使用内联JavaScript，因此我无法在html文件中包含以下脚本，而是必须从每个html文件中引用它们：

systemjsInitView_.html：

 System.config({
 packages: {        
   scripts:{
     format: 'register',
     defaultExtension: 'js'
   }
 }
});

System.import('scripts/bootstrap-view_')
        .then(null, console.error.bind(console));

自举-view_.js：

import { bootstrap }    from 'angular2/platform/browser';
import { PopupComponent } from './components/popup.component';

bootstrap(PopupComponent);

这是我的App文件夹结构

• view1.html
• view2.html
• 脚本
  • systemjsInitView1.js
  • systemjsInitView2.js
  • 自举-view1.js
  • 自举-view2.js
  • 部件
    • 更多文件......

我想知道我是否有多个html视图这是否意味着我需要每个html页面上面的每个文件的2个版本？ （因为我在每个页面加载不同的组件）？

我觉得这样的编码风格很糟糕，因为这两个文件或多或少都有重复修改，但我无法想到一个简单的补救措施。