Ceci est la structure de dossiers que j'ai faite pour un projet fabriqué dans Angular 2. J'ai supprimé le dossier NODE-Module et d'autres dossiers afin de l'adapter ici. Pour le style, je n'ai utilisé que bootstrap. Je n'ai pas utilisé de cli angulaire. Quelqu'un peut-il me guider comment dois-je le déployer? Devrais-je utiliser GULP? Que devriez-vous être mes pas? J'ai traversé beaucoup de réponses sur Stackoverflow, mais que tous utilisaient Gulp et CLI. Est-il dû utiliser les deux, si oui, veuillez guider comment réaliser un déploiement. Malheureusement, il n'y a rien de mentionné sur le déploiement dans le site officiel d'Andry2. Toute aide, orientation et suggestion est la bienvenue.
(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:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.2/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);
3 Réponses :
J'ai eu le même problème que vous rencontrez dans je ne savais pas comment commencer par Angular2, car il semble qu'il y ait beaucoup d'étapes impliquées. En outre, bon nombre des projets que vous trouvez en ligne sont très limités dans ce qu'ils font. Pour la plupart, ils ne sont que des tutoriels sur la façon de commencer à utiliser Angular2 à l'aide de Tâches SystemJs et CLI - qui sont bonnes, car elles aident à comprendre ce que vous devez lancer l'application ou à gérer toutes les questions que vous pourriez avoir.
Ayant dit que la construction optimale est subjective à ce que vous voulez faire et comment vous voulez construire le projet. Par exemple, je suis moi-même allé avec l'approche de l'avantage comme c'est un outil que je connais et je ne voulais pas faire de CLI autre que simplement taper Je sais que ce n'est probablement pas la réponse que vous voulez, mais prenez-la comme un pourboire. Afin de comprendre ce que vous voulez faire, jouez avec angular 2 la façon dont le docs Promenez-vous et faites attention à la manière dont ils construisent le projet et comment tout interagit. Lorsque vous faites cela ignorant toutes les autres informations sur une gouffine ou tout ce que vous construisez, d'autres utilisent; Pour vous assurer de bien comprendre ce dont vous avez besoin. De là, je suggérerais de prendre vos compétences et vos connaissances d'autres outils pour créer un paquet plus robuste pouvant répondre à vos besoins et ce que vous voulez accomplir. Aussi, si vous voulez une étape à l'étape, le Visite angulaire du tutoriel des héros est assez descriptif et un bon moyen de commencer.
gulp . L'inconvénient de ce fait que le fait qu'il n'y ait pas de tutoriels illustrant comment travailler ensemble et courir angular2 comme je voulais, avec la difficulté supplémentaire de lier dans un backend qui a répondu à mes besoins.
J'ai résolu ce problème en utilisant WebPack. Mon webPack fait un bundle.js qui inclut tous les fichiers .js .html .html et la convertit en bundle.js. que j'importe dans index.html. Ce bundle.js contient toutes les choses requises pour qu'il fonctionne. Autres choses requises par mon site, comme Style.CSS et certaines bibliothèques de bootstrap doivent être incluses à l'extérieur dans Index.html. Les étapes que vous devez suivre sont:
J'ai modifié mon script de construction aussi dans Package.json. Ajout du code pour Webpack au travail p>
"Construire": "NPM Run TSC && NPM Run Clean && mkdir _Dist && Webpack --Devtool Inline-Source-Carte ", P> blockQuote> li>
Vous devez configurer votre webPack. Webpack.config.js contient toute la configuration que j'ai faite, elle ressemble à quelque chose comme ça. P> li> ol>
var webpack = require("webpack"); var CompressionPlugin = require("compression-webpack-plugin"); module.exports = { entry: { "app": "./app/main" }, output: { path: __dirname, filename: "./_dist/bundle.js", publicPath: 'http://localhost:4242/app' }, resolve: { extensions: ['', '.js', '.ts', '.html'] }, devtool: 'source-map', module: { loaders: [ { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] }, { test: /\.html$/, loader: 'html' } ] }, htmlLoader: { minimize: false }, plugins: [ new webpack.NoErrorsPlugin(), ], devServer: { historyApiFallback: true, stats: 'minimal', inline: true, port: 4242 } }
Enfin, les gars angulaires ont écouté mon problème et ont donné une solution très étendue. Ils ont mis à jour leur site et ont inclus l'étape ci-dessus sur leur site. Veuillez passer à travers cela pour obtenir une guidance appropriée Webpack pour Angular2