Question

我似乎无法理解模块和路径。我正在编写Chrome扩展程序，并尝试使用angular2和angular2。我有点工作，但我想重组我的目录。似乎每次我想要获得项目设置或添加文件或页面我都有这个问题。有没有去学习定位模块和javascript /打字稿文件的规则？

我想要做的是拥有一个src文件夹，其中包含我的html，css（或更少/ sass），打字稿文件以及带有我的html，css和已编译的js文件的www文件夹。我已经设置了我的咕噜声任务，他们编译得很好。由于我正在使用Angular 2并且在扩展中我不能使用内联脚本，因此我为每个正在创建的页面创建了两个单独的脚本，一个src/pages/index-page.ts脚本具有系统设置并直接从{ {1}} www/index.html：

<script src="js/pages/index-page.js"></script>

应加载的declare var System : any; System.config({ packages: { appScripts: { defaultExtension: 'js' } } }); System.import('js/pages/index-boot') .then(null, console.error.bind(console));脚本

src/pages/index-boot.ts

我尝试加载import {provide} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {ROUTER_PROVIDERS, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/router'; import {IndexApp} from './index-app'; bootstrap(IndexApp, [ ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy }) ]);时遇到网络故障。如果我添加了js，那么它会加载该文件，但是在找到/www/js/pages/index-boot和router时出错。

为什么index-app尝试在没有扩展程序的情况下在浏览器中加载index-page？我需要以不同方式组织我的文件吗？是否有某个地方可以解释所有这些？我不明白为什么我必须为一个页面分配三个单独的代码文件（系统配置和导入启动，启动和应用程序）。

Answer 1

为什么index-page尝试在没有扩展名的浏览器中加载index-boot？

因为您没有要求它这样做。据我所知，您的设置中没有文件夹appScripts，因此defaultExtension：＆＃39; js＆＃39;简直被忽略了。要解决这个问题，请使用以下方法：

System.defaultJSExtensions = true;

在此处查看更多内容：defaultJSExtensions

这将帮助您在学习如何在systemjs（packages）中设置包时开始，但请注意，此构造已弃用。

作为起点，angular2 quickstart是一个好地方。请注意他们使用名为＆＃34; app＆＃34;并将其与其文件夹结构进行比较 - 注意＆＃39; app＆＃39;文件夹那里。

SystemJS您必须根据您的应用程序设置一次（index-page.js）。不适用于每一页。然后你需要一些地方来引导你的angular2应用程序（index-boot.ts），然后你的应用程序的其余部分（app.ts和其他所有内容）包含业务逻辑

Answer 2

defaultJSExtensions将解决您的扩展问题。

System.config({
  defaultJSExtensions: true, // Will prepend .js to the module names
  paths: {
    '*': '/www/js/pages/*',  // If all your module are under /www/js/pages
    'angular2/*': '/path/to/angular2/*'
  },
  packages: {  // I don't see any appScripts package ref in your exemple, you can probably drop that one.
    appScripts: {                    
      defaultExtension: 'js'
    }
  }
});

使用此配置，您只需执行System.import('index-boot')

即可

SystemJS打字稿困境？

2 个答案: