|
|
| Line 13: |
Line 13: |
| | *4. Multiple Components | | *4. Multiple Components |
| | | | |
| − | == Base URL == | + | == Installing on mi-linux from Putty == |
| | | | |
| − | When starting the application by typing:
| |
| − |
| |
| − | <pre>
| |
| − | npm start
| |
| − | </pre>
| |
| − |
| |
| − | You are given an IP address + port to access the app, for example:
| |
| − |
| |
| − | <pre>
| |
| − | [1] [BS] Access URLs:
| |
| − | [1] --------------------------------------
| |
| − | [1] Local: http://localhost:3002
| |
| − | [1] External: http://134.220.4.152:3002
| |
| − | [1] --------------------------------------
| |
| − | [1] UI: http://localhost:3003
| |
| − | [1] UI External: http://134.220.4.152:3003
| |
| − | [1] --------------------------------------
| |
| − | </pre>
| |
| − |
| |
| − | But you may also want to deploy the application in your public_html folder, and browse to it via the domain name URL, for example mine is here:
| |
| − | * [http://mi-linux.wlv.ac.uk/~in9352/angular/quickstart/src/ http://mi-linux.wlv.ac.uk/~in9352/angular/quickstart/src/]
| |
| − |
| |
| − | To achieve this, you need to make a few changes to the following 2 files:
| |
| − | * src/index.html
| |
| − | * src/systemjs.config.js
| |
| − |
| |
| − | === index.html ===
| |
| − |
| |
| − | In this file, you need to set the <base> to YOUR base folder. For example mine is:
| |
| − | <pre>
| |
| − | <base href="/~in9352/angular/quickstart/src/">
| |
| − | </pre>
| |
| − |
| |
| − | You also need to add "../" in front of the paths to all "node_modules" link, so:
| |
| − | <pre>
| |
| − | <!-- Polyfill(s) for older browsers -->
| |
| − | <script src="../node_modules/core-js/client/shim.min.js"></script>
| |
| − |
| |
| − | <script src="../node_modules/zone.js/dist/zone.js"></script>
| |
| − | <script src="../node_modules/systemjs/dist/system.src.js"></script>
| |
| − | </pre>
| |
| − |
| |
| − | The full file now looks like this:
| |
| − |
| |
| − | <pre>
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <head>
| |
| − | <title>Angular QuickStart</title>
| |
| − | <meta charset="UTF-8">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − | <base href="/~in9352/angular/quickstart/src/">
| |
| − | <link rel="stylesheet" href="styles.css">
| |
| − |
| |
| − | <!-- Polyfill(s) for older browsers -->
| |
| − | <script src="../node_modules/core-js/client/shim.min.js"></script>
| |
| − |
| |
| − | <script src="../node_modules/zone.js/dist/zone.js"></script>
| |
| − | <script src="../node_modules/systemjs/dist/system.src.js"></script>
| |
| − |
| |
| − | <script src="systemjs.config.js"></script>
| |
| − | <script>
| |
| − | System.import('main.js').catch(function(err){ console.error(err); });
| |
| − | </script>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <my-app>Loading AppComponent content here ...</my-app>
| |
| − | </body>
| |
| − | </html>
| |
| − | </pre>
| |
| − |
| |
| − | ===systemjs.config.js===
| |
| − |
| |
| − | You also need to add the "../" in this file, here:
| |
| − |
| |
| − | <pre>
| |
| − | (function (global) {
| |
| − | System.config({
| |
| − | paths: {
| |
| − | // paths serve as alias
| |
| − | 'npm:': '../node_modules/'
| |
| − | },
| |
| − | </pre>
| |
| − |
| |
| − | Your website should now run via its mi-linux URL.
| |
| − |
| |
| − | Do let me know if you have found a neater way of doing this!
| |
| | | | |
| | == GitLab == | | == GitLab == |
| | '''Important:''' Make sure that you commit your work to [[GitLab_server|GitLab]] on a regular basis! | | '''Important:''' Make sure that you commit your work to [[GitLab_server|GitLab]] on a regular basis! |
