我遵循了Angular 2快速入门指南,效果很好。但是我真的不喜欢他们使用的ts编译器,也不希望我的node_modules文件夹中有数十亿个我不需要的依赖项。所以我决定从头开始构建我自己的Angular 2项目,使用Gulp将我的打字稿代码编译/丑化/连接到1个文件中。
现在,当我运行我的应用程序时,我看到“正在加载...”而不是“你好世界!
在我的控制台中,我收到以下错误:
获取http://localhost:3000/app/main.js404(未找到)(zone.js:138)
错误:(SystemJS)XHR错误(404未找到)加载((索引):37)
我猜我的 SystemJS 和/或打字稿的编译出了问题。它正在寻找一个“main.js”,即使我只有一个“main.ts”。
在快速入门指南中,由于编译的打字稿,我的应用程序文件夹中确实有一个“main. js”。但是因为我使用的是Gulp,所以我所有编译的东西都放在一个单独的文件夹中,有一个单独的名称,所以我没有“main.js”。
在这一点上,我在网上找不到任何解决方案,而且我已经开始想念Angular 1,所以非常欢迎任何帮助。
如果需要,我很乐意提供我的任何代码,但我的应用程序文件夹systemjs.config.js和tsconfig.json与快速入门指南完全相同。
更新
这就是我的systemjs. config.js的样子,因为我认为这就是问题所在。它似乎在寻找.mode和.组件文件,但我只有一个文件:'app.min.js',其中包含所有代码。这是错的吗?
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'dist/app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './app.min.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
你的问题不在于你需要用angular cli重新创建你的项目。。。您的项目表示它找不到main.js
文件,或者换句话说,找不到您的main.ts
。在angular 2中,编译器npm将这些.ts文件转换为.js或javascript文件。所以你犯的错误
获取 http://localhost:3000/app/main.js 404(未找到)(区域.js:138)
基本上是说它不能引用main.ts文件。你可以尝试一下
<代码>
要注意的重要部分是('app')
部分。这是将被引用以查找您的main. ts
的文件路径
3.确保(“应用程序”)
实际上引用了正确的路径位置。
要找到答案,只需导航到您的systemjs.config.js文件并查找类似以下内容...
map: {
app: 'app/components',
只需将应用程序的路径更改为放置 main.ts 文件的每个位置即可。在此示例中,我必须将我的 main.ts 位于我的组件文件夹下。
编辑
好的,这是我最后一次编辑:
重要的是,你要明白你的typescript并不是真正正在编译的,如果你已经将.js文件拆分到另一个文件夹中,那么这就是你需要指向的app
路径定义。我还想将此添加为注释。不要害怕npm和node_modules。angular 2只有在实际部署项目时才显得笨重,angular会将您的项目缩减到非常合理的大小,您可以参考这里的SO中的其他问题
如果你想开始一个新项目,你应该这样做:
安装< code>angular-cli:
npm i -g angular-cli
创建新项目:
ng new yourNewProjectName --style=scss
(您可以删除 scss 或将其替换为“less”或“sass”。默认值:“css”)。
转到您的项目 :
cd yourNewProjectName
启动项目:
ng serve
转到 http://localhost:4200
快乐地玩angular2!