Đây là cấu trúc Thư mục tôi đã tạo cho một dự án được thực hiện trong góc 2. Tôi đã xóa thư mục Node-Module và thư mục khác để vừa với nó. Đối với kiểu dáng tôi chỉ sử dụng Bootstrap. Tôi đã không sử dụng Angular-CLI. Bất cứ ai có thể hướng dẫn tôi làm thế nào tôi nên triển khai nó? Tôi có nên dùng gulp không? các bước của tôi nên là gì. Tôi đã trải qua rất nhiều câu trả lời trên stackoverflow nhưng tất cả đều sử dụng GULP và CLI. Là nó phải sử dụng cả hai, nếu vậy xin vui lòng hướng dẫn làm thế nào để đạt được triển khai. Đáng buồn là không có gì đề cập đến việc triển khai trên trang web chính thức của Anular2. Bất kỳ trợ giúp, hướng dẫn và đề nghị được hoan nghênh.Làm thế nào để triển khai dự án Angular2 mà không cần sử dụng CLI
|--app
| |-- logo.png
| |-- components
| | |-- main.component.ts
| | |-- config.component.ts
| | |-- download-resources.component.ts
| | |-- header-footer.component.ts
| | |-- licence.component.ts
| | |-- menu-bar.component.ts
| | |-- process-status.component.ts
| | |-- release-history.component.ts
| | |-- upload-release.component.ts
| | `-- version.component.ts
| |-- main
| | `--module.ts
| |-- main.ts
| |-- models
| | |-- config.model.ts
| | |-- meta-info.model.ts
| | |-- process-status.model.ts
| | `-- version.model.ts
| |-- services
| | |-- cc-info.service.ts
| | |-- config.service.ts
| | |-- release-history.service.ts
| | |-- shared.service.ts
| | |-- upload-release.service.ts
| | `-- version.service.ts
| `-- template
| |-- download-resources.component.html
| |-- licence.component.html
| |-- license-info.component.html
| |-- machines.component.html
| |-- menu-bar.component.html
| |-- process-status.component.html
| |-- release-history.component.html
| |-- topology-info.component.html
| |-- topology-upload.template.html
| |-- upload-release.component.html
| `-- version.component.html
|-- index.html
|-- package.json
|-- styles.css
|-- systemjs.config.js
|-- tsconfig.json
`-- typings.json
Đây là tập tin system.config.js tôi:
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'node_module'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'main-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/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'ng2-file-upload' : 'npm:ng2-file-upload',
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'ts': 'npm:[email protected]/lib/plugin.js',
'typescript': 'npm:[email protected]/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'ng2-file-upload':{
main: 'ng2-file-upload.js',
defaultExtension: 'js'
}
}
});
})(this);